You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cloudstack.apache.org by bf...@apache.org on 2013/10/15 22:19:00 UTC
git commit: updated refs/heads/ui-restyle to 418ebb2
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 <br...@citrix.com>
Authored: Tue Oct 15 13:18:41 2013 -0700
Committer: Brian Federle <br...@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