Browse Source

[search] Support for pseudo-fullscreen Search dashboards

Enrico Berti 10 năm trước cách đây
mục cha
commit
75f3938

+ 61 - 1
apps/search/src/search/static/search/css/search.css

@@ -547,4 +547,64 @@ em {
   max-width: 160px;
   overflow: hidden;
   text-overflow: ellipsis;
-}
+}
+
+.player-toolbar {
+  top: 0;
+  left: 0;
+  position: fixed;
+  height: 48px;
+  width: 100%;
+  background-color: #f1f1f1;
+  z-index: 30000;
+}
+
+.player-toolbar .pull-right {
+  color: #999;
+  margin: 14px;
+}
+
+.player-toolbar form {
+  margin: 0;
+  display: inline;
+}
+
+.player-toolbar input {
+  display: inline-block;
+  margin: 6px!important;
+  margin-top: 0!important;
+  -webkit-box-shadow: none!important;
+  -moz-box-shadow: none!important;
+  box-shadow: none!important;
+  -webkit-border-radius: 0!important;
+  -moz-border-radius: 0!important;
+  border-radius: 0!important;
+  border: 1px solid #999!important;
+}
+
+.player-toolbar img {
+  padding-left: 20px;
+  width: 24px;
+  height: 24px;
+  margin-right: 6px;
+  margin-top: -4px;
+  opacity: 0.7;
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+}
+
+.player-toolbar img:hover {
+  -webkit-filter: grayscale(0%);
+  filter: grayscale(0%);
+}
+
+.player-toolbar h4 {
+  display: inline-block;
+  margin: 0!important;
+  line-height: 48px;
+  color: #999;
+}
+
+.player-toolbar .link {
+  display: inline-block;
+}

+ 2 - 0
apps/search/src/search/static/search/js/search.ko.js

@@ -1194,6 +1194,8 @@ var SearchViewModel = function (collection_json, query_json, initial_json) {
   });
   self.isSyncingCollections = ko.observable(false);
 
+  self.isPlayerMode = ko.observable(false);
+
   function bareWidgetBuilder(name, type){
     return new Widget({
       size: 12,

+ 39 - 2
apps/search/src/search/templates/search.mako

@@ -36,8 +36,11 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
   }
 </script>
 
-<div class="search-bar">
+<div class="search-bar" data-bind="visible: ! $root.isPlayerMode()">
   <div class="pull-right" style="padding-right:50px">
+    <a class="btn pointer" title="${ _('Player mode') }" rel="tooltip" data-placement="bottom" data-bind="click: function(){ $root.isEditing(false); $root.isPlayerMode(true); }">
+      <i class="fa fa-expand"></i>
+    </a>
     <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>
@@ -262,10 +265,27 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
       </%def>
 </%dashboard:layout_toolbar>
 
+<div class="player-toolbar" data-bind="visible: $root.isPlayerMode">
+  <div class="pull-right pointer" data-bind="visible: $root.isPlayerMode, click: function(){ $root.isPlayerMode(false); }"><i class="fa fa-times"></i></div>
+  <img src="${ static('desktop/art/icon_hue_48.png') }" />
+  <h4 data-bind="text: collection.label"></h4>
+  <form class="form-search" data-bind="submit: searchBtn">
+  <span data-bind="foreach: query.qs">
+    <input data-bind="clearable: q, typeahead: { target: q, source: $root.collection.template.fieldsNames, 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">
+    <!-- ko if: $parent.query.qs().length > 1 -->
+    <div class="pointer muted link" data-bind="click: $root.query.removeQ"><i class="fa fa-minus"></i></div>
+    <!-- /ko -->
+  </span>
+  <div class="pointer muted link" data-bind="click: $root.query.addQ"><i class="fa fa-plus"></i></div>
+  <div class="pointer muted link" data-bind="click: $root.searchBtn"><i class="fa fa-search" data-bind="visible: ! isRetrievingResults()"></i></div>
+  <!--[if !IE]> --><i class="fa fa-spinner fa-spin muted" data-bind="visible: isRetrievingResults()"></i><!-- <![endif]-->
+  <!--[if IE]><img src="${ static('desktop/art/spinner.gif') }" data-bind="visible: isRetrievingResults()"/><![endif]-->
+  </form>
+</div>
+
 
 ${ dashboard.layout_skeleton() }
 
-
 <script type="text/html" id="empty-widget">
   ${ _('This is an empty widget.')}
 </script>
@@ -1825,6 +1845,12 @@ ${ dashboard.import_charts() }
   #emptyDashboardEditing {
     top: 190px!important;
   }
+  .dashboard {
+    margin-top: 20px;
+  }
+  .dashboard.with-top-margin {
+    margin-top: 80px;
+  }
 % endif
 </style>
 
@@ -2352,6 +2378,17 @@ $(document).ready(function () {
     }
   });
 
+  viewModel.isPlayerMode.subscribe(function(value) {
+    if (value){
+      $(".navigator").hide();
+      $("body").css("paddingTop", "40px");
+    }
+    else {
+      $(".navigator").show();
+      $("body").css("paddingTop", "80px");
+    }
+  });
+
   var _refreshTimeout = null;
 
   viewModel.collection.autorefresh.subscribe(function (value) {

BIN
desktop/core/src/desktop/static/desktop/art/hue-logo-mini-white-ellie.png