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.fede...@citrix.com> Authored: Tue Oct 15 13:18:41 2013 -0700 Committer: Brian Federle <brian.fede...@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
