Эх сурвалжийг харах

HUE-5967 [search] Fixed top bar styling for Hue 4

Enrico Berti 8 жил өмнө
parent
commit
51ec40a

Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


+ 0 - 3
desktop/core/src/desktop/static/desktop/less/hue.less

@@ -793,9 +793,6 @@ a:visited {
   .with-top-margin {
     margin-top: 10px;
   }
-  .form-search .input-append .search-query {
-    width: 50px;
-  }
 }
 
 /* oozie workflow */

+ 1 - 1
desktop/libs/dashboard/src/dashboard/static/dashboard/css/admin.css

@@ -14,4 +14,4 @@ distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
- */.dashboard-admin .search-bar{background-color:#fafafa;border-bottom:1px solid #e3e3e3;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.065);-moz-box-shadow:0 1px 4px rgba(0,0,0,0.065);box-shadow:0 1px 4px rgba(0,0,0,0.065);margin:0;margin-bottom:20px;padding:10px;padding-left:20px;padding-right:20px;text-align:left}.dashboard-admin .search-bar h4{font-size:20px !important;color:#0B7FAD !important;padding:0 !important;margin-top:4px !important;margin-left:20px;border:none !important;max-width:none !important}.dashboard-admin #collections{list-style-type:none;margin:0;padding:0;width:100%}.dashboard-admin .coll-heading{position:relative;top:10px}.dashboard-admin .placeholder{background-color:#F5F5F5;border:1px solid #E3E3E3;height:40px}.dashboard-admin .collection-actions{cursor:pointer;margin:10px 10px 0 0}.dashboard-admin .waiting{font-size:196px;color:#DDD}.dashboard-admin h1.emptyMessage{margin-top:50px;color:#BBB;line-height:60px}
+ */.dashboard-admin .search-bar{background-color:#F8F8F8;border-bottom:1px solid #E0E0E0;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.065);-moz-box-shadow:0 1px 4px rgba(0,0,0,0.065);box-shadow:0 1px 4px rgba(0,0,0,0.065);margin:0;margin-bottom:20px;padding:10px;padding-left:20px;padding-right:20px;text-align:left}.dashboard-admin .search-bar h4{font-size:20px !important;color:#0B7FAD !important;padding:0 !important;margin-top:4px !important;margin-left:20px;border:none !important;max-width:none !important}.dashboard-admin #collections{list-style-type:none;margin:0;padding:0;width:100%}.dashboard-admin .coll-heading{position:relative;top:10px}.dashboard-admin .placeholder{background-color:#F8F8F8;border:1px solid #E0E0E0;height:40px}.dashboard-admin .collection-actions{cursor:pointer;margin:10px 10px 0 0}.dashboard-admin .waiting{font-size:196px;color:#DCDCDC}.dashboard-admin h1.emptyMessage{margin-top:50px;color:#B4B4B4;line-height:60px}

Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 0 - 0
desktop/libs/dashboard/src/dashboard/static/dashboard/css/common_dashboard.css


Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 0 - 0
desktop/libs/dashboard/src/dashboard/static/dashboard/css/search.css


+ 6 - 6
desktop/libs/dashboard/src/dashboard/static/dashboard/less/admin.less

@@ -20,8 +20,8 @@
 
 .dashboard-admin {
   .search-bar {
-    background-color: #fafafa;
-    border-bottom: 1px solid #e3e3e3;
+    background-color: @cui-gray-050;
+    border-bottom: 1px solid @cui-gray-200;
     -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
@@ -56,8 +56,8 @@
   }
 
   .placeholder {
-    background-color: #F5F5F5;
-    border: 1px solid #E3E3E3;
+    background-color: @cui-gray-050;
+    border: 1px solid @cui-gray-200;
     height: 40px;
   }
 
@@ -68,12 +68,12 @@
 
   .waiting {
     font-size: 196px;
-    color: #DDD;
+    color: @cui-gray-300;
   }
 
   h1.emptyMessage {
     margin-top: 50px;
-    color: #BBB;
+    color: @cui-gray-500;
     line-height: 60px;
   }
 }

+ 34 - 32
desktop/libs/dashboard/src/dashboard/static/dashboard/less/common_dashboard.less

@@ -29,16 +29,16 @@
   }
 
   .row-container.is-editing {
-    border: 1px solid #e5e5e5;
+    border: 1px solid @cui-gray-100;
   }
 
   .ui-sortable {
-    background-color: #F3F3F3;
+    background-color: @cui-gray-050;
     min-height: 100px;
   }
 
   .ui-sortable.white {
-    background-color: #FFF!important;
+    background-color: @cui-white!important;
   }
 
   .ui-sortable h2 {
@@ -52,7 +52,7 @@
   }
 
   .ui-sortable-disabled {
-    background-color: #FFF;
+    background-color: @cui-white;
   }
 
   .sortable-arguments {
@@ -101,15 +101,15 @@
   }
 
   .row-header {
-    background-color: #F6F6F6;
+    background-color: @cui-gray-050;
     display: inline;
     padding: 3px;
-    border: 1px solid #e5e5e5;
+    border: 1px solid @cui-gray-100;
     border-bottom: none;
   }
 
   .row-highlight {
-    background-color: #DDD;
+    background-color: @cui-gray-300;
     min-height: 100px;
   }
 
@@ -117,7 +117,7 @@
     position: absolute;
     right: 204px;
     top: 80px;
-    color: #666;
+    color: @cui-gray-700;
     font-size: 20px;
     z-index: 1000;
   }
@@ -126,29 +126,29 @@
     position: absolute;
     left: 120px;
     top: 160px;
-    color: #666;
+    color: @cui-gray-700;
     font-size: 20px;
   }
 
   .emptyRow {
     margin-top: 10px;
     margin-left: 140px;
-    color: #666;
+    color: @cui-gray-700;
     font-size: 18px;
   }
 
   .preview-row {
-    background-color: #f9f9f9;
+    background-color: @cui-gray-050;
     min-height: 400px !important;
     margin-top: 30px;
     text-align: center;
-    color:#DDD;
+    color:@cui-gray-300;
   }
 
   .toolbar-label {
     float: left;
     font-weight: bold;
-    color: #999;
+    color: @cui-gray-600;
     padding-left: 8px;
     padding-top: 24px;
   }
@@ -157,7 +157,7 @@
     width: 40px;
     text-align: center;
     float: left;
-    border: 1px solid #CCC;
+    border: 1px solid @cui-gray-400;
     margin-top: 10px;
     margin-left: 10px;
     cursor: move;
@@ -174,7 +174,7 @@
 
   .draggable-widget.disabled a {
     cursor: default;
-    color: #CCC;
+    color: @cui-gray-400;
   }
 
   .layout-container {
@@ -187,18 +187,18 @@
   .layout-box {
     float: left;
     height: 48px;
-    background-color: #DDD;
+    background-color: @cui-gray-300;
     text-align: center;
   }
 
   .layout-box i {
-    color: #999;
+    color: @cui-gray-600;
     font-size: 28px;
     line-height: 54px;
   }
 
   .layout-container:hover .layout-box {
-    background-color: #CCC;
+    background-color: @cui-gray-400;
   }
 
   .with-top-margin {
@@ -219,13 +219,15 @@
     padding-bottom: 6px;
   }
 
-  .form-search .input-append .btn {
-    border-radius: 4px!important;
-    margin-right: 10px;
-    &.flat-left {
+  .form-search .input-append {
+    .btn {
+      border-radius: 4px !important;
+    }
+    .flat-left {
       border-top-left-radius: 0!important;
       border-bottom-left-radius: 0!important;
       border-left-width: 0;
+      margin-left: 0;
     }
   }
 
@@ -236,7 +238,7 @@
   .widget-spinner {
     padding: 10px;
     font-size: 80px;
-    color: #CCC;
+    color: @cui-gray-400;
     text-align: center;
   }
 
@@ -249,16 +251,16 @@
   }
 
   .add-row {
-    background-color: #F6F6F6;
+    background-color: @cui-gray-050;
     min-height: 36px;
-    border: 2px dashed #DDD;
+    border: 2px dashed @cui-gray-300;
     text-align: center;
     padding: 4px;
     cursor: pointer;
   }
 
   .add-row:before {
-    color: #DDD;
+    color: @cui-gray-300;
     display: inline-block;
     font-family: FontAwesome;
     font-style: normal;
@@ -272,18 +274,18 @@
 
   .add-row-highlight {
     min-height: 10px;
-    background-color: #CCC;
+    background-color: @cui-gray-400;
   }
 
   .spinedit-cnt div.spinedit .fa-chevron-up {
     top: -7px;
-    color: #666;
+    color: @cui-gray-700;
   }
 
   .spinedit-cnt div.spinedit .fa-chevron-down {
     top: 7px;
     left: -4px;
-    color: #666;
+    color: @cui-gray-700;
   }
 
   .facet-field-cnt {
@@ -297,12 +299,12 @@
   }
 
   .facet-field-label {
-    color: #333;
+    color: @cui-gray-800;
     font-size: 11px;
     margin-bottom: 2px;
     margin-right: 4px;
     text-transform: uppercase;
-    text-shadow: 1px 1px 0 #fff;
+    text-shadow: 1px 1px 0 @cui-white;
   }
 
   .facet-field-label-fixed-width {
@@ -431,7 +433,7 @@
 
   .ace-editor {
     padding-left: 4px;
-    border-left: 1px solid #FFFFFF;
+    border-left: 1px solid @cui-white;
     -webkit-transition: border-left-color 0.2s ease;
     -moz-transition: border-left-color 0.2s ease;
     -ms-transition: border-left-color 0.2s ease;

+ 47 - 54
desktop/libs/dashboard/src/dashboard/static/dashboard/less/search.less

@@ -29,8 +29,8 @@
   }
 
   .search-bar {
-    background-color: #F5F5F5;
-    border-bottom: 1px solid #e3e3e3;
+    background-color: @cui-gray-050;
+    border-bottom: 1px solid @cui-gray-200;
     -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
@@ -97,7 +97,7 @@
   }
 
   .counter {
-    color: #999999;
+    color: @cui-gray-600;
     font-size: 13px;
   }
 
@@ -129,7 +129,7 @@
   }
 
   .breadcrumb {
-    background-color: #FFFFFF;
+    background-color: @cui-white;
     padding-left: 0;
     margin-bottom: 0;
   }
@@ -143,20 +143,15 @@
   }
 
   .selectMask {
-    background-color: #F9F9F9;
-    background-image: linear-gradient(to bottom, #FFFFFF, #F1F1F1);
-    background-repeat: repeat-x;
-    border: 1px solid #C0C0C0;
-    border-right-color: rgba(0, 0, 0, 0.1);
-    border-radius: 2px;
-    border-bottom-right-radius: 0;
-    border-top-right-radius: 0;
+    background-color: @cui-gray-050;
+    border: 1px solid @cui-gray-400;
+    border-radius: 0;
     box-shadow: none;
-    color: #444444;
+    color: @cui-gray-800;
     display: inline-block;
     font-size: 13px;
-    height: 29px;
-    line-height: 29px;
+    height: 30px;
+    line-height: 30px;
     margin: 0;
     margin-left: 5px;
     min-height: 29px;
@@ -171,8 +166,6 @@
   .search-query {
     border-bottom-left-radius: 0 !important;
     border-top-left-radius: 0 !important;
-    margin-left: 0 !important;
-    border-left: 0 !important;
   }
 
   .download-btn-group {
@@ -217,11 +210,11 @@
   }
 
   .CodeMirror {
-    border: 1px dotted #DDDDDD;
+    border: 1px dotted @cui-gray-300;
   }
 
   [contenteditable=true] {
-    border: 1px dotted #DDDDDD;
+    border: 1px dotted @cui-gray-300;
     outline: 0;
     margin-top: 20px;
     margin-bottom: 20px;
@@ -229,14 +222,14 @@
   }
 
   [contenteditable=true] [class*="span"], .tmpl [class*="span"] {
-    background-color: #eee;
+    background-color: @cui-purple-gray-050;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     border-radius: 3px;
     min-height: 40px;
     line-height: 40px;
-    background-color: #F3F3F3;
-    border: 2px dashed #DDD;
+    background-color: @cui-gray-050;
+    border: 2px dashed @cui-gray-300;
   }
 
   .tmpl {
@@ -245,7 +238,7 @@
   }
 
   .tmpl [class*="span"] {
-    color: #999;
+    color: @cui-gray-600;
     font-size: 12px;
     text-align: center;
     font-weight: bold;
@@ -253,12 +246,12 @@
 
   .editor-title {
     font-weight: bold;
-    color: #262626;
+    color: @cui-gray-900;
     border-bottom: 1px solid @hue-primary-color-dark;
   }
 
   .document-details-actions {
-    background-color: #F6F6F6;
+    background-color: @cui-gray-050;
     padding: 10px;
     margin-top: 8px;
   }
@@ -269,7 +262,7 @@
 
   .document-details {
     padding: 10px;
-    border-left: 1px solid #e5e5e5;
+    border-left: 1px solid @cui-gray-100;
     width: 93%;
   }
 
@@ -279,11 +272,11 @@
   }
 
   .document-details tr.readonly:hover {
-    background-color: #F6F6F6;
+    background-color: @cui-gray-050;
   }
 
   .result-row:nth-child(even) {
-    background-color: #F6F6F6;
+    background-color: @cui-gray-050;
   }
 
   .result-row td {
@@ -292,12 +285,12 @@
   }
 
   .result-container thead tr {
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid @cui-gray-100;
     text-align: left;
   }
 
   .result-container td {
-    border-right: 1px solid #e5e5e5;
+    border-right: 1px solid @cui-gray-100;
   }
 
   .result-container .show-details-icon {
@@ -305,15 +298,15 @@
     height: 8px;
     padding: 0;
     line-height: 8px;
-    border-top: 1px solid #FFF;
+    border-top: 1px solid @cui-white;
   }
 
   .result-container .show-details-icon:hover {
-    border-top-color: #DDD;
+    border-top-color: @cui-gray-300;
   }
 
   .result-container .show-details-icon i {
-    color: #D1D1D1;
+    color: @cui-gray-400;
   }
 
   .result-container .show-details-icon:hover i {
@@ -321,14 +314,14 @@
   }
 
   .result-sorting th {
-    border-top: 3px solid #FFFFFF !important;
+    border-top: 3px solid @cui-white !important;
     padding-left: 3px !important;
     padding-right: 4px !important;
     vertical-align: middle !important;
   }
 
   .result-sorting th:hover {
-    border-top: 3px solid #EEEEEE !important;
+    border-top: 3px solid @cui-purple-gray-050 !important;
   }
 
   .result-sorting th span, .result-sorting th i {
@@ -347,10 +340,10 @@
 
   .filter-box .title {
     font-weight: bold;
-    color: #333;
+    color: @cui-gray-800;
     padding: 5px;
-    border: 1px solid #d8d8d8;
-    background-color: #F6F6F6;
+    border: 1px solid @cui-gray-300;
+    background-color: @cui-gray-050;
     border-bottom: none;
     -webkit-border-radius: 3px 3px 0 0;
     -moz-border-radius: 3px 3px 0 0;
@@ -358,17 +351,17 @@
   }
 
   .filter-box .title a {
-    color: #333;
+    color: @cui-gray-800;
   }
 
   .filter-box .title.excluded {
-    background-color: #d84a38;
+    background-color: @cui-red-500;
   }
 
   .filter-box .content {
     padding: 8px;
-    background-color: #FFFFFF;
-    border: 1px solid #d8d8d8;
+    background-color: @cui-white;
+    border: 1px solid @cui-gray-300;
     border-top: none;
     -webkit-border-radius: 0 0 3px 3px;
     -moz-border-radius: 0 0 3px 3px;
@@ -392,7 +385,7 @@
   }
 
   .filter-box:hover .title, .filter-box:hover .content {
-    border: 1px solid #d8d8d8 !important;
+    border: 1px solid @cui-gray-300 !important;
   }
 
   .filter-box:hover .content-readonly {
@@ -425,7 +418,7 @@
   }
 
   .field-selector.hoverable:hover {
-    background-color: #DDD;
+    background-color: @cui-gray-300;
   }
 
   .fa.analysis {
@@ -434,7 +427,7 @@
   }
 
   .fa.analysis:hover {
-    color: #333;
+    color: @cui-gray-800;
   }
 
   .typeahead {
@@ -463,7 +456,7 @@
   }
 
   .trigger-exclude:hover {
-    background-color: #F6F6F6;
+    background-color: @cui-gray-050;
     text-decoration: none;
   }
 
@@ -472,7 +465,7 @@
   }
 
   .fa-sign-out.red {
-    color: #d84a38;
+    color: @cui-red-500;
   }
 
   .hue-tree {
@@ -501,7 +494,7 @@
   }
 
   .pivot-cell.selected {
-    border: 2px dashed #CCC;
+    border: 2px dashed @cui-gray-400;
   }
 
   .partitionChart {
@@ -525,7 +518,7 @@
 
   .partitionChart text {
     pointer-events: none;
-    fill: #212121;
+    fill: @cui-gray-900;
   }
 
   .d3-tip {
@@ -533,7 +526,7 @@
     font-weight: bold;
     padding: 12px;
     background: rgba(0, 0, 0, 0.8);
-    color: #fff;
+    color: @cui-white;
     border-radius: 2px;
     pointer-events: none;
     margin-top: 5px;
@@ -669,7 +662,7 @@
   }
 
   .grid-side-btn {
-    color: #DBE8F1;
+    color: @cui-blue-050;
     display: inline-block;
     line-height: 27px;
     height: 27px;
@@ -686,11 +679,11 @@
 
   .grid-side-btn.disabled {
     cursor: default !important;
-    color: #DBE8F1 !important;
+    color: @cui-blue-050 !important;
   }
 
   .grid-side-btn:focus {
-    color: #DBE8F1;
+    color: @cui-blue-050;
   }
 
   .grid-side-btn.active {
@@ -726,7 +719,7 @@
     }
 
     .search-bar input {
-      border-left: 1px solid #c0c0c0 !important;
+      border-left: 1px solid @cui-gray-400 !important;
     }
 
     .dashboard {

+ 3 - 5
desktop/libs/dashboard/src/dashboard/templates/common_search.mako

@@ -59,7 +59,7 @@ from desktop.views import commonheader, commonfooter, _ko
     </div>
   </div>
 
-  <div class="pull-right" style="padding-right:50px">
+  <div class="pull-right" ${ is_embeddable and '' or 'style="padding-right:50px"'}>
     <a class="btn pointer" title="${ _('Edit') }" rel="tooltip" data-placement="bottom" data-bind="click: toggleEditing, css: {'btn': true, 'btn-inverse': isEditing}">
       <i class="fa fa-pencil"></i>
     </a>
@@ -129,7 +129,6 @@ from desktop.views import commonheader, commonfooter, _ko
   </form>
 
   <form class="form-search" style="margin: 0" data-bind="submit: searchBtn, visible: columns().length != 0">
-    <strong>${_("Search")}</strong>
     <div class="input-append">
       <div class="selectMask">
         <span
@@ -138,13 +137,12 @@ from desktop.views import commonheader, commonfooter, _ko
       </div>
 
       <span data-bind="foreach: query.qs">
-        <input data-bind="clearable: q, valueUpdate:'afterkeydown', typeahead: { target: q, nonBindableSource: queryTypeahead, multipleValues: true, multipleValuesSeparator: ':', extraKeywords: 'AND OR TO', completeSolrRanges: true }, css:{'input-xlarge': $root.query.qs().length == 1, 'input-medium': $root.query.qs().length < 4, 'input-small': $root.query.qs().length >= 4}" maxlength="4096" type="text" class="search-query">
+        <input data-bind="clearable: q, valueUpdate:'afterkeydown', typeahead: { target: q, nonBindableSource: queryTypeahead, multipleValues: true, multipleValuesSeparator: ':', extraKeywords: 'AND OR TO', completeSolrRanges: true }, css:{'input-xlarge': $root.query.qs().length == 1, 'input-medium': $root.query.qs().length < 4, 'input-small': $root.query.qs().length >= 4, 'flat-left': $index() === 0}" maxlength="4096" type="text" class="search-query">
         <!-- ko if: $index() >= 1 -->
         <a class="btn flat-left" href="javascript:void(0)" data-bind="click: $root.query.removeQ"><i class="fa fa-minus"></i></a>
         <!-- /ko -->
       </span>
-
-      <a class="btn" href="javascript:void(0)" data-bind="click: $root.query.addQ"><i class="fa fa-plus"></i></a>
+      <a class="btn" href="javascript:void(0)" data-bind="click: $root.query.addQ, css: { 'flat-left': $root.query.qs().length === 1}, style: { 'margin-left': $root.query.qs().length > 1 ? '10px' : '0' }"><i class="fa fa-plus"></i></a>
 
       <button type="submit" id="search-btn" class="btn btn-inverse" style="margin-left:10px; margin-right:10px">
         <i class="fa fa-search" data-bind="visible: ! isRetrievingResults()"></i>

Энэ ялгаанд хэт олон файл өөрчлөгдсөн тул зарим файлыг харуулаагүй болно