[Ovirt-devel] [PATCH server] UI tweaks for cloud

Jeremy Perry jeremy.perry at redhat.com
Thu Jun 18 17:41:09 UTC 2009


Initial styling for the cloud, added a few images

Signed-off-by: Jeremy Perry <jeremy.perry at redhat.com>
---
 src/app/views/cloud/instance/index.rhtml |    2 +-
 src/app/views/layouts/cloud/cloud.rhtml  |    9 +-
 src/public/images/mystery_cloud.png      |  Bin 0 -> 1984 bytes
 src/public/images/tab_bg.png             |  Bin 0 -> 174 bytes
 src/public/stylesheets/cloud/layout.css  |  164 +++++++++++++++++++++---------
 5 files changed, 124 insertions(+), 51 deletions(-)
 create mode 100644 src/public/images/mystery_cloud.png
 create mode 100644 src/public/images/tab_bg.png

diff --git a/src/app/views/cloud/instance/index.rhtml b/src/app/views/cloud/instance/index.rhtml
index 218bd8c..757d67c 100644
--- a/src/app/views/cloud/instance/index.rhtml
+++ b/src/app/views/cloud/instance/index.rhtml
@@ -1,4 +1,4 @@
-<div id="toolbar_nav">
+<div id="toolbar">
   <!-- TODO: Make each li a submit button with same styling as current li.
        Handlng of this will be implemented in InstanceController::handle_form
   -->
diff --git a/src/app/views/layouts/cloud/cloud.rhtml b/src/app/views/layouts/cloud/cloud.rhtml
index b891bf2..708a2c3 100644
--- a/src/app/views/layouts/cloud/cloud.rhtml
+++ b/src/app/views/layouts/cloud/cloud.rhtml
@@ -12,7 +12,9 @@
   </head>
 
   <body>
+  <div id="wrapper">
     <div id="head">
+    <h1><a href="#">The name of our project goes here</a></h1>
       <!-- Header stuff! -->
       <div id="login-box">
         Hi, <%= @user %>
@@ -21,8 +23,9 @@
                 {:controller => 'help', :action => @help_section, :anchor => @anchor},
                 :id=>"help-link", :popup => true, :title => "Help" %>
       </div>
-      <div id="nav">
-        <ul class="toolbar">
+     </div>
+     <div id="navcontainer">
+        <ul class="navlist">
           <li>
             <%=
                 link_to_unless(controller.controller_name == 'dashboard', "Dashboard", { :controller => 'cloud/dashboard' }) do |name|
@@ -47,9 +50,9 @@
           </li>-->
         </ul>
       </div>
-    </div>
     <div id="content">
       <%= yield %>
     </div>
+  </div>
   </body>
 </html>
diff --git a/src/public/images/mystery_cloud.png b/src/public/images/mystery_cloud.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b4db8233828264d1d3c23ec1520c5a13f9b1e45
GIT binary patch
literal 1984
zcmV;x2S50UP)<h;3K|Lk000e1NJLTq002V(001Wl1^@s6RIl|v0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU(Vo5|nRCwClTH8((TM*sg2;Ob*77?K_
zK*GhGA!^i+sDb!kLL!g69ryzA3xqG=_yurYh{PC2jYgx9!AMj<K@<scIRhBHM#npf
zz^S!!YErYO2WG};l(Unao=f+1_1dedR at I)A`T2SEtH<Qz<dJ93o*jAp`t={*zkj#*
zbJ&)ho!zlz%a*>KJ9qli)6;`)+L7|Bz<B at uz1`c}dtzv4sCH&%#!5|1RhTI$DN2HY
zIX5?_W at l%WZQH)Gva-_v=6?gmojZ3LdU|?Jtz5ZMtyr-_c|0C{G{L|C2ms^9j~{yC
z{kCn}{6~)-t=qV9V_?~W0XAH at a^-w581w>&w6ru0L^Lp%82|v27^DID_U#+a4VIUe
zpDZaUX-SrSo}~if)vH%tpU>A$4`;1jy;=hy!C*Hr2Ux*?00 at dH8aM*P^85YGI44<v
zED0DNK76n*UcA^&t8T4Xvqn)M3;}@$i{>KC4gi7)HsKmR;<{V6ZZ+e&;^N|#WdR0U
zgASSzt5&VjV3>?xAWS#Gz(X at 2@_asabaXUt*svi$naBTIgK_WPy#`{27mQ#azzSvr
z1K`98{tTe-gG<mb at f`z_pP&Etx^?RU>({Rj<mBY|f2#lr_h at Zx{RfQTDJgC;VX?us
z%Ity|f`E#N*O>U6em}Tt*DfCg*~VD2PRw9DefqR|WMt$x2_rA2NoNQn%z}b~3p9QB
zytA{jiF8E0WCa7kD=M=Fzvfk!_mJl at ATp>*AUNwVD2ERpK3Q5?+Vaz2JbLt~_U_%g
zr#^l9WXnJ&X)47L23BJK{{4;J-Q7)ejRg?cJ!Hn<IKbCRTg<p%GD(Ut21RNS282N>
zEG%p}cI;SPLSVdn`O<ss+O_7lZ{K=l1dpZ^<%6;DtR-Z?<nv)Leuvnkwr}4K0M**H
zYeT<D>{DO9e1TL~q)Q_1Etw=ik*@&=gE2ilttu)i>K0;%BN$)<rK~1s0z3=@5epcS
z)=nVuD(2?qs-mJI4c1}<z!1wqnZ*P|>Jhes<B9}>J`2{>)#XL2aU#F~5ZA9?Z-$Sv
zFp@#fjOu0$AqSt2BhCj9IPTlGPi@`0HLhU%?%g|e`}XY+$kGP$8Kh8Sb^r`8jcS|5
zg9i^bINc-FbPWaqQ|bZ+MY2Rrb_qVm%o+?<US3|@KwxBKWaw)-CdgRjl#+Q7*cM(`
z3g~|>sxt^V>(Zr5=NSkNdXf<`_&JFq^R<~R0LI|pAPOzDY15|Ac~71^Q4b$JRBztA
z(eGh29-Oj(wt+`hR+c_Dnsi?X6kf2;pFi8Ek(|<P=ojzbzhD3L>sOmufFoCxOmj2m
zJFQGK0mbKmwpXuSRUbcogbq<{ZEcX$n!+TQ^n~G~qoWW~VZV`?nHd%+r43F~0wO`7
zd)rZ&0ao<)_n%+ at xNhJd;S3S4KyzXV3<A|}-n^*+0XWDad_M*Z*HSu<_)P`^GZw+d
zwlf&)wozloz`#H)-Ncd^W1%RW=;V|Ou)ze}hh0);9h`^Hyk2jZv2de!?QvoWEkrY_
zXh$%{#>S4zz5>Sxnah86N at Jw{kSyd3VB5B;uC7)jr^Ad51OgEnBc6NnV$ed^XV0E(
zN5Y5zV`^&ZhzyjH;>iHQ2 at nZ723!a3QdL!@sGd+%Y(;2|$B!R}X`FcPE#n5U#yWH6
zO#6!$FG7H%f-W*!nE5-|(<#$15S5jcI)IvkY9d9ME=;>5x)4$sLsXupftaZSC|<}q
zgX2Uz)nuZBfk4Gcbwh+2otT(F3jkd*9b2S3#cQJp2&Y=OOjlP|{h>pL8d7D^m54tk
zI%N&9dGqE7w}4BWJ9kb8O^81ZvQEl3)@h0{7KslYJU9VTc$~`PrDzh%W-mmT9AL_g
z8#ls0SWJS)dQWBsF9?`P`pQC!!h at n^A>Vcz49w at xpDUuO1_lHALY4t$y8jvbOonh4
zMX$y~bwb~-1OtO2x*8uJ*Q*3WC527(n+)5`_<@NXJ?$pgsiO2+&3?QTLpF3UckI}q
z`x<124wxnr+*}~sD-<&bj0=;Klhpu%JJD`u6B$IQtX6yW><N9>)6;`if~)b%Y%glp
z!58`Y`9AWSARFg)CNVQgX=!Pgp}TkQj=301rtZ;TAc&Gdr{S|~pxcIU?GVi^WkKc^
z2xjXc<d_Ez9B8mCt4}shmSSZvdwYAsfWZ5uWG5y%`(bTAYypt$)%&5cf^<`TqFhHy
z4q78SI~!3Q9XFj?rM_ at 0X5s$OHO0lne?{~_kzy`izTCdh-vp9r47c~Whry{;wiDdC
zKRkdpp=xSs$|8Da*slaiGH$r#F0xMGHlu7cn)@<t#48*rrTd|`92<#QSy>%2fVuK7
zng3SXY}~TYVx8fpn=&&gUN%PEcm_Mjh#;M4Iqi<SHJp^D8#+U7P43;hw~_xA<p>5+
zEmZ07 at Nli{AuRV{Zd{YTYLR;=QU8)aCpBUhJ<%QW-yMw1%*;M)NXzg46<`2a|Dl%-
SVlR;Z0000<MNUMnLSTZOu9xco

literal 0
HcmV?d00001

diff --git a/src/public/images/tab_bg.png b/src/public/images/tab_bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..1385ccc0303c5a3819822b3140181c456310ac25
GIT binary patch
literal 174
zcmeAS at N?(olHy`uVBq!ia0vp^Ahs3<6Od&66MF|pNtU=qlmzFem6RtIr7}3C<R_&n
zc;+Uirv{}arc at T5Otk?j3h;Ds45_$vX0jn4g8~P$=EMK<OADR;Hk4*?Y>Hdwz#(D$
zHg03j)ZnU|RqjQ5;vNcAd3R at 8F!b%roz#2kV%FPZ1=HWXePO*qB<>fR{A1k%47=?4
VI-QIdgn?!=c)I$ztaD0e0s!hTJX8Px

literal 0
HcmV?d00001

diff --git a/src/public/stylesheets/cloud/layout.css b/src/public/stylesheets/cloud/layout.css
index 60b5c91..0fd158d 100644
--- a/src/public/stylesheets/cloud/layout.css
+++ b/src/public/stylesheets/cloud/layout.css
@@ -1,47 +1,90 @@
 /* ------ General Layout ------ */
 
-.toolbar {text-align:left;}
+html {min-width:640px;}
 
-.current, .toolbar a:hover {
-  border-bottom: 5px solid #5599B8;
+#head h1 a {
+	background:transparent url(/images/mystery_cloud.png) no-repeat scroll 20px 50%;
+  /*
+    TODO: change this back to a real logo when we have one.
+  */
+	display:block;
+	height:59px;
+	overflow:hidden;
+	text-decoration:none;
+	text-indent:-9999px;
+	width:87px;
 }
 
-.toolbar a {
-  text-decoration: none;
+#login-box {
+	display:block;
+	line-height:3.75ex;
+	position:absolute;
+	right:4ex;
+	text-align:right;
+	top:12px;
+}
+
+#login-box a {
+  color: #337ACC;
 }
 
-#nav {height:1em;padding-top:1ex;}
+#navcontainer {
+	height:40px;
+}
 
-#nav a {display: inline-block;}
+#navcontainer ul {
+	padding-left: 0;
+	margin-left: 0;
+	background-color: #fff;
+	color: #afb2bd;
+	float: left;
+	width: 100%;
+}
 
-#head {height:50px;}
+#navcontainer ul li { display: inline; }
 
-#login-box {
-  text-align:right;
-  /*
-    TODO: put this back in with a real logo when we have one.
-        background: url('../../images/logo_cumulus.png') left top no-repeat;
-  */
+#navcontainer ul li a {
+	padding: 12px 20px;
+	border-top: solid 2px transparent;
+	background: #fff;
+	color: #afb2bd;
+	font-weight: bold;
+	text-decoration: none;
+	text-transform: uppercase;
+	float: left;
 }
 
-#content {margin-left:18px;}
+#navcontainer ul li a:hover {
+	background: #fff;
+	color: #989ba7;
+}
+
+#navcontainer ul li a.current {
+	border-top: solid 2px #337acc;
+	background: #e0eeff url(/images/tab_bg.png) repeat-x;
+	color: #404552;
+}
+
+#content {margin-left:0;}
 
 #content table{width:100%;}
 
-#content table tr.odd {background:#eef2f2;}
+/* #content table tr.odd {background:#eef2f2;} */
 
-#content table tr:hover {background: #729FCF; color: #FFFFFF;}
+#content table tr:hover {background: #fdfef1;}
 
 #content table th, #content table td {
-  border:1px solid #AAAAAA;
+  border:1px solid #E1E1E3;
+  border-right: 0;
+  border-left: 0;
   padding:0;
   text-align:left;
 }
 
-#content table th {background-color: #F0F0F0;}
+#content table th {background: none;border-top: none;}
 
 #content table div {
-  padding: 0.4ex;
+  padding: 0.5ex;
 }
 
 #content table th a {
@@ -49,31 +92,35 @@
   text-decoration: none;
 }
 
+#content table th a:hover {
+  text-decoration: underline;
+}
+
 .sortup {
-  background: #F0F0F0 url('../../images/Sort_up_11.png') top center no-repeat !important;
+  background: transparent url('/images/Sort_up_11.png') top center no-repeat !important;
 }
 
 .sortdown {
-  background: #F0F0F0 url('../../images/Sort_down_11.png') top center no-repeat !important;
+  background: transparent url('/images/Sort_down_11.png') top center no-repeat !important;
 }
 
-.sortable:hover {background-color: #DDDDDD !important;}
+.sortable:hover {/* background-color: #DDDDDD !important; */}
 
-.selected {background: #337ACC !important; color: #FFFFFF;}
+.selected {background: #fbf0a7 !important;}
 
 .center {text-align:center;}
 
 .pagination {padding-top: 1ex;}
 
-#list-view {}
+#list-view {margin-bottom:2em;}
+
 
 #detail-view {
-  border-top: 3px solid #AAAAAA;
-  margin-top: 2ex;
+  border-top: 2px solid #CECECE;
 }
 
 #graph {
-  border: 1px solid #AAAAAA;
+  border: 1px solid #EFEFEF;
   margin-bottom: 1.5ex;
   height: 15ex;
 }
@@ -84,18 +131,34 @@
   border: 0;
   color: #337ACC;
   cursor: pointer;
+  margin-right:12px;
+  font-size: 1em;
+  text-decoration: underline;
+}
+
+input#submit_for_list {
+	margin:12px 16px 0 0;
+	padding:0;
 }
 
 #detail_header {
-  background-color: #F0F0F0;
-  height: 10ex;
-  margin-bottom: 1.5ex;
+  background-color: #EFEFEF;
+  height: 5em;
+  margin-bottom: 1em;
+}
+
+#detail_header h3 {
+	color:#666666;
+	margin: 8px 12px 12px 16px;
+	display:inline-block;
+	font-size: 1.2em;
 }
 
+
 /* ----- Backgrounds for states ----- */
 .state-container {
   margin-left:5px;
-  text-indent:10px;
+  text-indent:12px;
 }
 
 .task-canceled {background:url(../../images/icon-canceled-11px.png) left center no-repeat;}
@@ -115,52 +178,59 @@
 .instance-creating {background:url(../../images/icon_startup_11px.png) left center no-repeat;}
 
 
-/*  ----- Toolbar Navigation --------  */
-#toolbar_nav {
-  background: #F0F0F0;
+/*  ----- Actions Toolbar --------  */
+#toolbar {
+  background: #e3eaf2;
+  border-top: 1px solid #d1dfee;
+  border-bottom: 1px solid #d1d7de;
+  margin-bottom: 1em;
 }
 
-#toolbar_nav img {
+#toolbar img {
   margin: 0;
 }
 
-#toolbar_nav ul{
+#toolbar ul{
   list-style: none;
+  margin:0;
+  padding:0;
 }
 
-#toolbar_nav li {
+#toolbar li {
   display: inline-block;
   position: relative;
   color: #666666;
-  padding: 0 1ex;
+  padding: 8px 16px;
 }
-#toolbar_nav li:hover {
+
+#toolbar li:hover {
   background: #337ACC;
   color: #FFFFFF;
   cursor: pointer;
 }
 
-#toolbar_nav li.current { /* This is not really needed right now, but will be useful when we add filters. */
+#toolbar li.current { /* This is not really needed right now, but will be useful when we add filters. */
   background: #4B95B8;
 }
 
-#toolbar_nav li ul {
+#toolbar li ul {
   display: none;
   position: absolute;
   top: 1em;
   left: 0;
-  background: #F0F0F0;
+  background: #bec7e0;   /* #F0F0F0; */
+  padding: 4px;
 }
 
-#toolbar_nav li ul li {
+#toolbar li ul li {
   display: block;
   white-space: nowrap;
-  padding-right: 1ex;
+  padding-right: 1em;
 }
 
-#toolbar_nav li > ul {
+#toolbar li > ul {
   top: auto;
   left: auto;
 }
 
-#toolbar_nav li:hover ul {display: block;}
\ No newline at end of file
+#toolbar li:hover ul {display: block;}
-- 
1.6.0.6




More information about the ovirt-devel mailing list