瀏覽代碼

[search] Skeleton for magic layout

Romain Rigaux 11 年之前
父節點
當前提交
df559a9
共有 3 個文件被更改,包括 15 次插入5 次删除
  1. 9 4
      apps/search/src/search/templates/search2.mako
  2. 二進制
      apps/search/static/art/layout_magic.png
  3. 6 1
      apps/search/static/js/search.ko.js

+ 9 - 4
apps/search/src/search/templates/search2.mako

@@ -184,8 +184,11 @@ ${ commonheader(_('Search'), "search", user, "60px") | n,unicode }
   <div style="float: left">
     <div style="font-weight: bold; color: #999; padding-left: 8px">${_('LAYOUT')}</div>
     <a href="javascript: oneThirdLeftLayout()" onmouseover="viewModel.previewColumns('oneThirdLeft')" onmouseout="viewModel.previewColumns('')"><img src="/search/static/art/layout_onethirdleft.png" /></a>
-    <a href="javascript: oneThirdRightLayout()" onmouseover="viewModel.previewColumns('oneThirdRight')" onmouseout="viewModel.previewColumns('')"><img src="/search/static/art/layout_onethirdright.png" /></a>
+    <!-- <a href="javascript: oneThirdRightLayout()" onmouseover="viewModel.previewColumns('oneThirdRight')" onmouseout="viewModel.previewColumns('')"><img src="/search/static/art/layout_onethirdright.png" /></a> -->    
     <a href="javascript: fullLayout()" onmouseover="viewModel.previewColumns('full')" onmouseout="viewModel.previewColumns('')"><img src="/search/static/art/layout_full.png" /></a>
+    <a data-bind="visible: columns().length == 0" href="javascript: magicLayout()" onmouseover="viewModel.previewColumns('magic')" onmouseout="viewModel.previewColumns('')">
+      <img src="/search/static/art/layout_magic.png" />
+    </a>
   </div>
 
   <div style="float: left; margin-left: 20px" data-bind="visible: columns().length > 0">
@@ -221,6 +224,11 @@ ${ commonheader(_('Search'), "search", user, "60px") | n,unicode }
       <div class="span12 preview-row">
       </div>
     </div>
+    <div class="row-fluid" data-bind="visible: previewColumns() == 'magic'">
+      <div class="span12 preview-row">
+        Hue logo picks a timeline, filter, result, pie bar, widgets...: big magic icon? could preview but too complicated for now.
+      </div>
+    </div>
   </div>
 </div>
 
@@ -483,9 +491,6 @@ ${ commonheader(_('Search'), "search", user, "60px") | n,unicode }
       ${ _('Gap') }: <input type="text" data-bind="value: properties.gap" />
     </div>  
 
-    <a href="javascript:void(0)"><i class="fa fa-plus"></i></a>
-    <a href="javascript:void(0)"><i class="fa fa-minus"></i></a>
-
     <div data-bind="barChart: {data: counts, field: field, label: label, transformer: barChartDataTransformer, onClick: function(d){viewModel.query.selectFacet({count: d.y,selected: false,value: d.x,cat: field})}}" />
   </div>
   <!-- /ko -->

二進制
apps/search/static/art/layout_magic.png


+ 6 - 1
apps/search/static/js/search.ko.js

@@ -123,10 +123,15 @@ function oneThirdLeftLayout() {
   setLayout([3, 9]);
 }
 
-function oneThirdRightLayout() { // instead --> full with 1 row = timeline, 2 = 3 pies, 3 = grid result
+function oneThirdRightLayout() {
   setLayout([9, 3]);
 }
 
+function magicLayout() {
+  setLayout([3, 9]);
+  alert('Hue picked a timeline, filter, result, pie bar, widgets...');
+}
+
 function setLayout(colSizes) {
   // Save previous widgets
   var _allRows = [];