cloudstack-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From bfede...@apache.org
Subject git commit: updated refs/heads/ui-restyle to 418ebb2
Date Tue, 15 Oct 2013 20:19:00 GMT
Updated Branches:
  refs/heads/ui-restyle d55ed9533 -> 418ebb2fa


List/toolbar search: Better styling for advanced search icon


Project: http://git-wip-us.apache.org/repos/asf/cloudstack/repo
Commit: http://git-wip-us.apache.org/repos/asf/cloudstack/commit/418ebb2f
Tree: http://git-wip-us.apache.org/repos/asf/cloudstack/tree/418ebb2f
Diff: http://git-wip-us.apache.org/repos/asf/cloudstack/diff/418ebb2f

Branch: refs/heads/ui-restyle
Commit: 418ebb2fa7efad8e22d73f785fd24ebc3c44d125
Parents: d55ed95
Author: Brian Federle <brian.federle@citrix.com>
Authored: Tue Oct 15 13:18:41 2013 -0700
Committer: Brian Federle <brian.federle@citrix.com>
Committed: Tue Oct 15 13:18:41 2013 -0700

----------------------------------------------------------------------
 ui/scripts/ui/widgets/listView.js |  2 +-
 ui/stylesheets/_list-view.scss    | 40 +++++++++++++++------
 ui/stylesheets/cloudstack.css     | 65 ++++++++++++++++++++++------------
 ui/stylesheets/csui/_form.scss    |  2 +-
 ui/stylesheets/csui/_toolbar.scss |  6 ++--
 5 files changed, 78 insertions(+), 37 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/cloudstack/blob/418ebb2f/ui/scripts/ui/widgets/listView.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/widgets/listView.js b/ui/scripts/ui/widgets/listView.js
index f313064..3a56a17 100644
--- a/ui/scripts/ui/widgets/listView.js
+++ b/ui/scripts/ui/widgets/listView.js
@@ -862,7 +862,7 @@
         $search.append('<div id="basic_search" class="button search"></div>');
 
         if (listViewData.advSearchFields != null) {
-            $search.append(
+            $search.prepend(
                 $('<div>').attr({
                     id: 'advanced_search'
                 })

http://git-wip-us.apache.org/repos/asf/cloudstack/blob/418ebb2f/ui/stylesheets/_list-view.scss
----------------------------------------------------------------------
diff --git a/ui/stylesheets/_list-view.scss b/ui/stylesheets/_list-view.scss
index b7aa766..62250ee 100644
--- a/ui/stylesheets/_list-view.scss
+++ b/ui/stylesheets/_list-view.scss
@@ -20,27 +20,47 @@
     // Advanced search field
     #advanced_search {
         float: right;
-        .icon {
-            @include csui-sprite(61, 167);
 
+        $border: 1px solid #808080;
+        
+        .icon {
             position: relative;
-            width: 15px;
-            height: 15px;
-            left: 215px;
-            top: 10px;
+            width: $csui-toolbar-field-height;
+            height: $csui-toolbar-field-height;
+            left: -10px;
             cursor: pointer;
             z-index: 10;
+            border-radius: 0 3px 3px 0;
+            text-align: center;
+            border: $border;
+            border-left: none;
+
+            &:hover {
+                box-shadow: inset 0px 0px 7px lighten(black, 30%);
+            }
+
+            @include linear-gradient(white, #9E9E9E);
+
+            &:after {
+                @include icon($caret-down);
+
+                font-size: 15px;
+                position: relative;
+                top: $csui-toolbar-field-height / 4;
+            }
         }
 
         .form-container {
             @include csui-dialog;
             @include csui-form;
 
-            width: 400px;
-            margin-top: -15px;
-            margin-left: -160px;
-            opacity: 0.9;
+            $width: 400px;
+            
+            width: $width;
+            margin-top: -$csui-toolbar-field-height;
+            margin-left: -$width - 10;
             padding-top: 0px;
+            border: $border;
 
             form {
                 display: inline-block;

http://git-wip-us.apache.org/repos/asf/cloudstack/blob/418ebb2f/ui/stylesheets/cloudstack.css
----------------------------------------------------------------------
diff --git a/ui/stylesheets/cloudstack.css b/ui/stylesheets/cloudstack.css
index aeaec7e..f0d109a 100644
--- a/ui/stylesheets/cloudstack.css
+++ b/ui/stylesheets/cloudstack.css
@@ -4990,7 +4990,7 @@ input[type=text], input[type=password] {
   padding: 10px;
   margin-top: 10px;
   margin-bottom: 10px;
-  border: 2px solid gray;
+  border: 1px solid gray;
   text-indent: 15px;
   padding-right: 15px; }
   input[type=text]:focus, input[type=password]:focus {
@@ -5319,7 +5319,7 @@ ul.ui-tabs-nav {
         cursor: pointer;
         text-align: center;
         float: right;
-        margin-right: 10px; }
+        margin-left: 10px; }
         .dashboard.admin .sub.alerts .top .button.action:hover {
           box-shadow: inset 0 0 10px black; }
       .dashboard.admin .sub.alerts .top input, .dashboard.admin .sub.alerts .top label, .dashboard.admin
.sub.alerts .top select {
@@ -5327,12 +5327,12 @@ ul.ui-tabs-nav {
         margin: 0 10px 0 10px;
         padding-top: 6px;
         padding-bottom: 6px;
-        font-size: 12px; }
+        font-size: 12px;
+        height: 35px; }
       .dashboard.admin .sub.alerts .top label {
         margin-right: 0px; }
       .dashboard.admin .sub.alerts .top .search-bar {
-        float: right;
-        margin-right: 25px; }
+        float: right; }
       .dashboard.admin .sub.alerts .top .title {
         float: left;
         padding-top: 8px; }
@@ -5385,7 +5385,7 @@ ul.ui-tabs-nav {
         cursor: pointer;
         text-align: center;
         float: right;
-        margin-right: 10px; }
+        margin-left: 10px; }
         .dashboard.admin .head .top .button.action:hover {
           box-shadow: inset 0 0 10px black; }
       .dashboard.admin .head .top input, .dashboard.admin .head .top label, .dashboard.admin
.head .top select {
@@ -5393,12 +5393,12 @@ ul.ui-tabs-nav {
         margin: 0 10px 0 10px;
         padding-top: 6px;
         padding-bottom: 6px;
-        font-size: 12px; }
+        font-size: 12px;
+        height: 35px; }
       .dashboard.admin .head .top label {
         margin-right: 0px; }
       .dashboard.admin .head .top .search-bar {
-        float: right;
-        margin-right: 25px; }
+        float: right; }
       .dashboard.admin .head .top .title {
         float: left;
         margin-top: 8px; }
@@ -6098,24 +6098,43 @@ ul.ui-tabs-nav {
   .list-view #advanced_search {
     float: right; }
     .list-view #advanced_search .icon {
-      background: url(../images/sprites.png) no-repeat -61px -167px;
       position: relative;
-      width: 15px;
-      height: 15px;
-      left: 215px;
-      top: 10px;
+      width: 35px;
+      height: 35px;
+      left: -10px;
       cursor: pointer;
-      z-index: 10; }
+      z-index: 10;
+      border-radius: 0 3px 3px 0;
+      text-align: center;
+      border: 1px solid gray;
+      border-left: none;
+      background-color: white;
+      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white),
color-stop(100%, #9e9e9e));
+      background-image: -webkit-linear-gradient(white, #9e9e9e);
+      background-image: linear-gradient(white, #9e9e9e); }
+      .list-view #advanced_search .icon:hover {
+        box-shadow: inset 0px 0px 7px #4d4d4d; }
+      .list-view #advanced_search .icon:after {
+        font-family: FontAwesome;
+        font-weight: normal;
+        font-style: normal;
+        text-decoration: inherit;
+        -webkit-font-smoothing: antialiased;
+        *margin-right: .3em;
+        content: "\f0d7";
+        font-size: 15px;
+        position: relative;
+        top: 8.75px; }
     .list-view #advanced_search .form-container {
       background: white;
       box-shadow: 0px 2px 10px black;
       position: absolute;
       padding: 20px;
       width: 400px;
-      margin-top: -15px;
-      margin-left: -160px;
-      opacity: 0.9;
-      padding-top: 0px; }
+      margin-top: -35px;
+      margin-left: -410px;
+      padding-top: 0px;
+      border: 1px solid gray; }
       .list-view #advanced_search .form-container .ui-dialog-titlebar {
         *zoom: 1;
         display: block;
@@ -6976,7 +6995,7 @@ body {
     cursor: pointer;
     text-align: center;
     float: right;
-    margin-right: 10px; }
+    margin-left: 10px; }
     .toolbar .button.action:hover {
       box-shadow: inset 0 0 10px black; }
   .toolbar input, .toolbar label, .toolbar select {
@@ -6984,12 +7003,12 @@ body {
     margin: 0 10px 0 10px;
     padding-top: 6px;
     padding-bottom: 6px;
-    font-size: 12px; }
+    font-size: 12px;
+    height: 35px; }
   .toolbar label {
     margin-right: 0px; }
   .toolbar .search-bar {
-    float: right;
-    margin-right: 25px; }
+    float: right; }
   .toolbar .panel-controls {
     display: none; }
   .toolbar .button.refresh {

http://git-wip-us.apache.org/repos/asf/cloudstack/blob/418ebb2f/ui/stylesheets/csui/_form.scss
----------------------------------------------------------------------
diff --git a/ui/stylesheets/csui/_form.scss b/ui/stylesheets/csui/_form.scss
index 3d8058d..3ac45fa 100644
--- a/ui/stylesheets/csui/_form.scss
+++ b/ui/stylesheets/csui/_form.scss
@@ -60,7 +60,7 @@
     padding: 10px;
     margin-top: 10px;
     margin-bottom: 10px;
-    border: 2px solid gray;
+    border: 1px solid gray;
     text-indent: 15px;
     padding-right: 15px;
 

http://git-wip-us.apache.org/repos/asf/cloudstack/blob/418ebb2f/ui/stylesheets/csui/_toolbar.scss
----------------------------------------------------------------------
diff --git a/ui/stylesheets/csui/_toolbar.scss b/ui/stylesheets/csui/_toolbar.scss
index ff0557e..1a3b948 100644
--- a/ui/stylesheets/csui/_toolbar.scss
+++ b/ui/stylesheets/csui/_toolbar.scss
@@ -1,3 +1,5 @@
+$csui-toolbar-field-height: 35px;
+
 @mixin csui-toolbar {
     @include row;
 
@@ -8,7 +10,7 @@
         @include csui-button;
 
         float: right;
-        margin-right: 10px;
+        margin-left: 10px;
     }
 
     input, label, select {
@@ -17,6 +19,7 @@
         padding-top: 6px;
         padding-bottom: 6px;
         font-size: 12px;
+        height: $csui-toolbar-field-height;
     }
 
     label {
@@ -25,6 +28,5 @@
 
     .search-bar {
         float: right;
-        margin-right: 25px;
     }
 }
\ No newline at end of file


Mime
View raw message