From 48956568e02d8bbb58699b1346a59fa08039285c Mon Sep 17 00:00:00 2001 From: Xuqing Kuang Date: Tue, 4 Sep 2012 17:35:11 +0800 Subject: [PATCH] [UI] Refined the navigator with CSS. --- src/css/builder.css | 97 ++++++++++++++---------------------- src/css/images/homeIcon.png | Bin 1344 -> 435 bytes src/js/main.js | 8 +-- 3 files changed, 41 insertions(+), 64 deletions(-) diff --git a/src/css/builder.css b/src/css/builder.css index 335c39af..1bae2a75 100644 --- a/src/css/builder.css +++ b/src/css/builder.css @@ -186,35 +186,39 @@ body.ui-tabs.ui-widget { } .navbar > ul.ui-tabs-nav { display: -webkit-box; - border: 0px none transparent; + border: 3px solid #1C2229; background: none; + height: 26px; + width: 293px; /* FIXME: ul li width calculate have some issues, it will be broken when zoom in/out. */ padding: 0px; margin: 12px 0px 12px 10px; - -webkit-border-top-left-radius: 0px; - -webkit-border-top-right-radius: 0px; - -webkit-border-bottom-left-radius: 0px; - -webkit-border-bottom-right-radius: 0px; + border-radius: 8px; } .navbar > ul.ui-tabs-nav li { - -webkit-border-top-left-radius: 0px; - -webkit-border-top-right-radius: 0px; - -webkit-border-bottom-left-radius: 0px; - -webkit-border-bottom-right-radius: 0px; top: 0px; margin: 0px; - border: none; - background: none; + border-top: 1px solid #95999B; + border-right: 1px solid #393C3D; + border-bottom: 1px solid #323536; + border-left: 1px solid #95999B; + border-radius: 0px; + background: -webkit-gradient(linear, left top, left bottom, color-stop(80%, #575D63), color-stop(20%, #737A80)); } .navbar > ul.ui-tabs-nav li:first-child { - -webkit-border-top-left-radius: .5em !important; - -webkit-border-bottom-left-radius: .5em !important; + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; } .navbar > ul.ui-tabs-nav li:last-child { - -webkit-border-top-right-radius: .5em !important; - -webkit-border-bottom-right-radius: .5em !important; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.navbar > ul.ui-tabs-nav li:hover { + background: -webkit-gradient(linear, left top, left bottom, color-stop(80%, #528791), color-stop(20%, #6B9FA9)); + box-shadow: inset 0 0 10px #446A70; } .navbar > ul.ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0px; + background: -webkit-gradient(linear, left top, left bottom, color-stop(80%, #366B7E), color-stop(20%, #46889A)); } .navbar .default-tools a:hover { /* GRG */ @@ -235,9 +239,18 @@ body.ui-tabs.ui-widget { } .navbar > ul.ui-tabs-nav li a { - padding: 0; - height: 32px; + width: 80px; + height: 26px; + font-size: 12px; + font-family: OpenSans-SB; + text-transform: uppercase; + text-align: center; + text-shadow: -1px -1px 1px #222; + line-height: 26px; + color: white; + padding: 0px; border: none; + outline:none; } /* @@ -1495,54 +1508,18 @@ p.title { input.screenCoordinate::-webkit-inner-spin-button { -webkit-appearance: none } - .projectViewButton { - background: url("images/homeButton_up.png") no-repeat 0 0; - width: 45px; -} -.projectViewButton:focus, -.projectViewButton:hover, -.projectViewButton:active { - background-image: url("images/homeButton_active.png"); -} -.ui-tabs-selected >.projectViewButton { - background-image: url("images/homeButton_down.png"); -} -.layoutViewButton { - background: url("images/layoutButton_up.png") no-repeat 0 0; - width: 80px; -} -.layoutViewButton:focus, -.layoutViewButton:hover, -.layoutViewButton:active { - background-image: url("images/layoutButton_active.png"); -} -.ui-tabs-selected >.layoutViewButton { - background-image: url("images/layoutButton_down.png"); + width: 45px !important; /* Override .navbar > ul.ui-tabs-nav li a settings in line 236 */ + text-indent: -3000px; + background-image: url(images/homeIcon.png); + background-position: center; + background-repeat: no-repeat; } .codeViewButton { - background: url("images/codeButton_up.png") no-repeat 0 0; - width: 71px; -} -.codeViewButton:focus, -.codeViewButton:hover, -.codeViewButton:active { - background-image: url("images/codeButton_active.png"); -} -.ui-tabs-selected >.codeViewButton { - background-image: url("images/codeButton_down.png"); + width: 70px !important; /* Override .navbar > ul.ui-tabs-nav li a settings in line 236 */ } .liveViewButton { - background: url("images/previewButton_up.png") no-repeat 0 0; - width: 87px; -} -.liveViewButton:focus, -.liveViewButton:hover, -.liveViewButton:active { - background-image: url("images/previewButton_active.png"); -} -.ui-tabs-selected >.liveViewButton { - background-image: url("images/previewButton_down.png"); + width: 90px !important; /* Override .navbar > ul.ui-tabs-nav li a settings in line 236 */ } .centerImage { margin-top: 8px; diff --git a/src/css/images/homeIcon.png b/src/css/images/homeIcon.png index b4261a566644fd544ac920802bca239f61f1bd64..bbeec725525c4322fce994c60d7bf4452bcc090a 100644 GIT binary patch delta 409 zcmV;K0cQTd3bO-{B!3BTNLh0L01FcU01FcV0GgZ_0004HNkl;=o{>7#J8_aA9?IaU)Jf44b>30yj0`Lom>!u?wAXbMYg%IY0yQTH14I$)g}% za>IMM-`(Zze@aByW=bgsH~}WWL`2eJ%-$d10ZYk$B|N~w)N5m|F!AGq*5 z?y%-LM_r(MzsDSe#xGRAPHhkZI-UgZp zeBbY6gS2z-Y&04@?E-U;qUdKl9^U|t1yq6{xNJ6?9j$d#DwUkAyUR>#{aLM68?9FB zEuZc&Q1AEqkAMGF29AJ35n)e6G!O#Gu8QV%0S%c*L?i)bN~x8K=JWacU@*Aq^?J8q z7=9UWDk4kriDfng;#GQ)X}jJ208YEzuFk#_vqMv!x?C=Yg%%TFZdq2|QJS^A0jITE zZJIx9+fIQ9__i!7HsV$qSLRh^m$Z2R>$Vh;8Ne?Kn-W3G!#10_00000NkvXXu0mjf DirKU( literal 1344 zcmbVMOKjU@9CuSdUA1nEj#leoHSUCVAn_x161xp;5<6QEPNOsuMVdw&=SyM|+rf58 zTBN~NAzHCfc3_7L)C*!#g&0V{fKEg$NHDZr&@^DYTHpYutOAJ*`rvbxlnGTmV9EYo zzu)iw{5&0t9_ncCX-5#GBXXFJ!*RF$w%r52{nuW31P=QwVbmJYGge7501`;+DS$>) zDGTC2N{>Hv2@D`e>w8LK)EX5Z> z<^9-gr$)sX8qy7bGA_a?6CMKfkS@|qd%fO=P>LW4oS<-$a*|%oO>qQ)HXaOGGtwC@ z&W9Ve;L4BXEUU=jc&Su!mE11f$l@f+vbF|AIU&Mnj%$`wc4}r{Q-KGjY$!!b(KXao zlv4Vb<;S3>w?j~iaV49x%uR94Y$OY&4KGVYoOBVmQODTvHCdv#JwsJD(WVs#|2n^= zzL^*=0z3{(eaw(y6*GNznA+Zu4Q#}~iIR~Au!>=+V1oLAD00Klc}0^7ye^NaK(ive zAA=NET1j&R=_5$eOA}s-@c2lQWx_&`X96q}U?@K9ZE9@Ar6AfT5DYB@D3TP&0Ll6S zd|03uIz)#_Uy~crOiR*a(6p;SyA3YAEtd-!K(cfrq3eZaL&b8srJFguh=xWORFq^z zv)6XDVN5Vu9vI5gARRVz6|Er9*<7r943|%P>I#YjD&5CucZx2Df|d zj^1l-!G^Y{n>PtAHt!|)5sv$_r0}(!uC|^&dlgXv*(A_78F1LL8-O%dp zsj6cIN7rZGcA~#pw}F!v#<4+q8n>} z|G6H}VIP$fWPyJn{|``h2>W-WA;*Il9R6m|&%?Iy$vVXEICjau;Oz(NeN@uWAJ+?NnXKJSQ{rp#VbtM;v z-t_1{Tr`4})1kA|#~sg&{65n=7*(&odujf{1@Hb}FK55L`u5V7tF<4i!wU-w-GP=$ zrSezj>=m@S`qT3AtzEEC+k&_w{i+9}c9 fcjkydBW(ooVP@|$f4Coi-TtRVged=3FnQu1GFi-Z diff --git a/src/js/main.js b/src/js/main.js index 98900651..a0a587bc 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -255,10 +255,10 @@ _constructApp: function(container) { var widget = this; $('
    ').appendTo(container) - .append('
    • ') - .append('
    • ') - .append('
    • ') - .append('
    • '); + .append('
  • Projects
    • ') + .append('
  • Layout
    • ') + .append('
  • Code
    • ') + .append('
  • Preview
    • '); // Add the view plugins this.ui.projectView = $('
    ').appendTo(container)