Browse Source

HUE-8240 [dashboard] HTML widget editing should move to a popover like dimensions editing

Enrico Berti 7 years ago
parent
commit
10b61b7712

+ 2 - 2
desktop/core/src/desktop/static/desktop/js/freshereditor.js

@@ -99,7 +99,7 @@
           ], [
           ], [
             {
             {
               name: 'backcolor',
               name: 'backcolor',
-              label: "<div style='display:inline-block;margin:3px;margin-top:8px;width:15px;height:12px;background-color:#0000ff;'></div> <span class='caret'></span>",
+              label: "<div style='display:inline-block;margin:3px;margin-top:4px;width:15px;height:12px;background-color:#0B7FAD;'></div> <span class='caret'></span>",
               title: 'Select background color',
               title: 'Select background color',
               classname: 'toolbar_bgcolor dropdown-toggle',
               classname: 'toolbar_bgcolor dropdown-toggle',
               dropdown: true
               dropdown: true
@@ -129,7 +129,7 @@
           ], [
           ], [
             {
             {
               name: 'createlink',
               name: 'createlink',
-              label: '@',
+              label: "<i style='margin-top:2px;' class='fa fa-external-link'></i>",
               title: 'Link to a web page (Ctrl+L)',
               title: 'Link to a web page (Ctrl+L)',
               userinput: "yes",
               userinput: "yes",
               classname: 'toolbar_link'
               classname: 'toolbar_link'

+ 2 - 1
desktop/core/src/desktop/static/desktop/js/ko.common-dashboard.js

@@ -236,7 +236,8 @@ var Widget = function (params) {
   self.widgetType = ko.observable(typeof params.widgetType != "undefined" && params.widgetType != null ? params.widgetType : "empty-widget");
   self.widgetType = ko.observable(typeof params.widgetType != "undefined" && params.widgetType != null ? params.widgetType : "empty-widget");
   self.properties = ko.observable(typeof params.properties != "undefined" && params.properties != null ? params.properties : {});
   self.properties = ko.observable(typeof params.properties != "undefined" && params.properties != null ? params.properties : {});
   self.offset = ko.observable(typeof params.offset != "undefined" && params.offset != null ? params.offset : 0).extend({ numeric: 0 });
   self.offset = ko.observable(typeof params.offset != "undefined" && params.offset != null ? params.offset : 0).extend({ numeric: 0 });
-  self.isLoading = ko.observable(typeof params.isLoading != "undefined" && params.isLoading != null ? params.isLoading : false);
+  self.isLoading = ko.observable(!!params.isLoading);
+  self.isEditing = ko.observable(!!params.isEditing);
 
 
   self.klass = ko.computed(function () {
   self.klass = ko.computed(function () {
     return "card card-widget span" + self.size() + (self.offset() * 1 > 0 ? " offset" + self.offset() : "");
     return "card card-widget span" + self.size() + (self.offset() * 1 > 0 ? " offset" + self.offset() : "");

File diff suppressed because it is too large
+ 0 - 0
desktop/libs/dashboard/src/dashboard/static/dashboard/css/common_dashboard.css


File diff suppressed because it is too large
+ 0 - 0
desktop/libs/dashboard/src/dashboard/static/dashboard/css/search.css


+ 3 - 1
desktop/libs/dashboard/src/dashboard/static/dashboard/js/search.ko.js

@@ -1977,8 +1977,10 @@ var SearchViewModel = function (collection_json, query_json, initial_json, has_g
         gridsterHeight: gridsterHeight,
         gridsterHeight: gridsterHeight,
         id: UUID(),
         id: UUID(),
         name: name,
         name: name,
-        widgetType: type
+        widgetType: type,
+        isEditing: false
       });
       });
+
       self.draggableWidgets[type] = w;
       self.draggableWidgets[type] = w;
       return w;
       return w;
     }
     }

+ 6 - 0
desktop/libs/dashboard/src/dashboard/static/dashboard/less/common_dashboard.less

@@ -582,6 +582,12 @@
     }
     }
   }
   }
 
 
+  .html-form {
+    width: 98%;
+    height: 380px;
+    margin-top: -35px;
+  }
+
   .empty-gridster-widget {
   .empty-gridster-widget {
     .metric-form {
     .metric-form {
       .hue-no-box-shadow;
       .hue-no-box-shadow;

+ 7 - 2
desktop/libs/dashboard/src/dashboard/static/dashboard/less/search.less

@@ -307,6 +307,12 @@
     }
     }
   }
   }
 
 
+  .colorpanel {
+    background-color: @cui-white;
+    padding: 4px;
+    border-radius: 0;
+  }
+
   .CodeMirror {
   .CodeMirror {
     border: 1px dotted @cui-gray-300;
     border: 1px dotted @cui-gray-300;
   }
   }
@@ -344,8 +350,7 @@
 
 
   .editor-title {
   .editor-title {
     font-weight: bold;
     font-weight: bold;
-    color: @cui-gray-900;
-    border-bottom: 1px solid @hue-primary-color-dark;
+    color: @hue-primary-color-dark;
   }
   }
 
 
   .document-details-actions {
   .document-details-actions {

+ 30 - 15
desktop/libs/dashboard/src/dashboard/templates/common_search.mako

@@ -928,29 +928,31 @@ ${ dashboard.layout_skeleton(suffix='search') }
 
 
 <script type="text/html" id="html-resultset-widget">
 <script type="text/html" id="html-resultset-widget">
   <!-- ko ifnot: $root.collection.template.isGridLayout() -->
   <!-- ko ifnot: $root.collection.template.isGridLayout() -->
-    <div data-bind="visible: $root.isToolbarVisible() || $root.isEditing()" style="margin-bottom: 20px">
-      <ul class="nav nav-pills">
-        <li class="active"><a href="javascript: void(0)" class="widget-editor-pill">${_('Editor')}</a></li>
-        <li><a href="javascript: void(0)" class="widget-html-pill">${_('HTML')}</a></li>
-        <li><a href="javascript: void(0)" class="widget-css-pill">${_('CSS & JS')}</a></li>
-        <li><a href="javascript: void(0)" class="widget-settings-pill">${_('Sorting')}</a></li>
-      </ul>
-    </div>
+    <!-- ko if: isEditing() -->
+    <div class="metric-form html-form">
+      <a href="javascript:void(0)" data-bind="toggle: isEditing" class="pull-right"><i class="fa fa-times inactive-action"></i></a>
+      <div style="margin-bottom: 20px">
+        <ul class="nav nav-pills">
+          <li class="active"><a href="javascript: void(0)" class="widget-editor-pill">${_('Editor')}</a></li>
+          <li><a href="javascript: void(0)" class="widget-html-pill">${_('HTML')}</a></li>
+          <li><a href="javascript: void(0)" class="widget-css-pill">${_('CSS & JS')}</a></li>
+          <li><a href="javascript: void(0)" class="widget-settings-pill">${_('Sorting')}</a></li>
+        </ul>
+      </div>
 
 
-    <!-- ko if: $root.isToolbarVisible() || $root.isEditing() -->
       <div class="widget-section widget-editor-section">
       <div class="widget-section widget-editor-section">
         <div class="row-fluid">
         <div class="row-fluid">
           <div class="span9">
           <div class="span9">
             <div data-bind="freshereditor: {data: $root.collection.template.template}"></div>
             <div data-bind="freshereditor: {data: $root.collection.template.template}"></div>
           </div>
           </div>
           <div class="span3">
           <div class="span3">
-            <h5 class="editor-title">${_('Available Fields')}</h5>
+            <div class="editor-title">${_('Available Fields')}</div>
             <select data-bind="options: $root.collection.fields, optionsText: 'name', value: $root.collection.template.selectedVisualField" class="input-large chosen-select"></select>
             <select data-bind="options: $root.collection.fields, optionsText: 'name', value: $root.collection.template.selectedVisualField" class="input-large chosen-select"></select>
-            <button title="${ _('Click on this button to add the field') }" class="btn plus-btn" data-bind="click: $root.collection.template.addFieldToVisual">
+            <button title="${ _('Click on this button to add the field') }" class="btn btn-mini plus-btn" data-bind="click: $root.collection.template.addFieldToVisual">
               <i class="fa fa-plus"></i>
               <i class="fa fa-plus"></i>
             </button>
             </button>
 
 
-            <h5 class="editor-title" style="margin-top: 30px">${_('Available Functions')}</h5>
+            <div class="editor-title margin-top-30">${_('Available Functions')}</div>
             <select id="visualFunctions" data-bind="value: $root.collection.template.selectedVisualFunction" class="input-large chosen-select">
             <select id="visualFunctions" data-bind="value: $root.collection.template.selectedVisualFunction" class="input-large chosen-select">
               <option title="${ _('Formats date or timestamp in DD-MM-YYYY') }" value="{{#date}} {{/date}}">{{#date}}</option>
               <option title="${ _('Formats date or timestamp in DD-MM-YYYY') }" value="{{#date}} {{/date}}">{{#date}}</option>
               <option title="${ _('Formats date or timestamp in HH:mm:ss') }" value="{{#time}} {{/time}}">{{#time}}</option>
               <option title="${ _('Formats date or timestamp in HH:mm:ss') }" value="{{#time}} {{/time}}">{{#time}}</option>
@@ -965,7 +967,7 @@ ${ dashboard.layout_skeleton(suffix='search') }
               <option title="${ _('Truncate a value after 250 characters') }" value="{{#truncate250}} {{/truncate250}}">{{#truncate250}}</option>
               <option title="${ _('Truncate a value after 250 characters') }" value="{{#truncate250}} {{/truncate250}}">{{#truncate250}}</option>
               <option title="${ _('Truncate a value after 500 characters') }" value="{{#truncate500}} {{/truncate500}}">{{#truncate500}}</option>
               <option title="${ _('Truncate a value after 500 characters') }" value="{{#truncate500}} {{/truncate500}}">{{#truncate500}}</option>
             </select>
             </select>
-            <button title="${ _('Click on this button to add the function') }" class="btn plus-btn" data-bind="click: $root.collection.template.addFunctionToVisual">
+            <button title="${ _('Click on this button to add the function') }" class="btn btn-mini plus-btn" data-bind="click: $root.collection.template.addFunctionToVisual">
               <i class="fa fa-plus"></i>
               <i class="fa fa-plus"></i>
             </button>
             </button>
             <p class="muted" style="margin-top: 10px"></p>
             <p class="muted" style="margin-top: 10px"></p>
@@ -978,13 +980,13 @@ ${ dashboard.layout_skeleton(suffix='search') }
             <textarea data-bind="codemirror: {data: $root.collection.template.template, lineNumbers: true, htmlMode: true, mode: 'text/html', stripScript: true }" data-template="true"></textarea>
             <textarea data-bind="codemirror: {data: $root.collection.template.template, lineNumbers: true, htmlMode: true, mode: 'text/html', stripScript: true }" data-template="true"></textarea>
           </div>
           </div>
           <div class="span3">
           <div class="span3">
-            <h5 class="editor-title">${_('Available Fields')}</h5>
+            <div class="editor-title">${_('Available Fields')}</div>
             <select data-bind="options: $root.collection.fields, optionsText: 'name', value: $root.collection.template.selectedSourceField" class="input-medium chosen-select"></select>
             <select data-bind="options: $root.collection.fields, optionsText: 'name', value: $root.collection.template.selectedSourceField" class="input-medium chosen-select"></select>
             <button title="${ _('Click on this button to add the field') }" class="btn plus-btn" data-bind="click: $root.collection.template.addFieldToSource">
             <button title="${ _('Click on this button to add the field') }" class="btn plus-btn" data-bind="click: $root.collection.template.addFieldToSource">
               <i class="fa fa-plus"></i>
               <i class="fa fa-plus"></i>
             </button>
             </button>
 
 
-            <h5 class="editor-title" style="margin-top: 30px">${_('Available Functions')}</h5>
+            <div class="editor-title" style="margin-top: 30px">${_('Available Functions')}</div>
             <select id="sourceFunctions" data-bind="value: $root.collection.template.selectedSourceFunction" class="input-medium chosen-select">
             <select id="sourceFunctions" data-bind="value: $root.collection.template.selectedSourceFunction" class="input-medium chosen-select">
               <option title="${ _('Formats a date in the DD-MM-YYYY format') }" value="{{#date}} {{/date}}">{{#date}}</option>
               <option title="${ _('Formats a date in the DD-MM-YYYY format') }" value="{{#date}} {{/date}}">{{#date}}</option>
               <option title="${ _('Formats a date in the HH:mm:ss format') }" value="{{#time}} {{/time}}">{{#time}}</option>
               <option title="${ _('Formats a date in the HH:mm:ss format') }" value="{{#time}} {{/time}}">{{#time}}</option>
@@ -1018,14 +1020,24 @@ ${ dashboard.layout_skeleton(suffix='search') }
         </div>
         </div>
         <br/>
         <br/>
       </div>
       </div>
+    </div>
     <!-- /ko -->
     <!-- /ko -->
 
 
     <div class="result-main" style="overflow-x: auto">
     <div class="result-main" style="overflow-x: auto">
+      <div class="edit-dimensions" style="float: right">
+        <div class="badge dimensions-badge-container dimensions-badge-container-add">
+          <div class="action-icon" data-bind="click: function(){ isEditing(true);}"><i class="fa fa-pencil"></i> ${ _('Edit template') }</div>
+        </div>
+        <div class="clearfix"></div>
+      </div>
+
       <div data-bind="visible: $root.hasRetrievedResults() && $root.results().length == 0">
       <div data-bind="visible: $root.hasRetrievedResults() && $root.results().length == 0">
         <br/>
         <br/>
         ${ _('Your search did not match any documents.') }
         ${ _('Your search did not match any documents.') }
       </div>
       </div>
 
 
+
+
       <!-- ko if: $root.response().response && $root.results().length > 0 -->
       <!-- ko if: $root.response().response && $root.results().length > 0 -->
         <div data-bind="template: {name: 'resultset-pagination', data: $root.response() }"></div>
         <div data-bind="template: {name: 'resultset-pagination', data: $root.response() }"></div>
       <!-- /ko -->
       <!-- /ko -->
@@ -4483,6 +4495,9 @@ $(document).ready(function () {
                 widget: null,
                 widget: null,
                 tempFieldName: null,
                 tempFieldName: null,
                 callback: function (el) {
                 callback: function (el) {
+                  if (["resultset-widget", "html-resultset-widget", "filter-widget", "leafletmap-widget"].indexOf(tempDraggable.widgetType()) > -1) {
+                    showAddFacetDemiModal(tempDraggable, searchViewModel.gridItems()[searchViewModel.gridItems().length - 1]);
+                  }
                   tempDraggable = null;
                   tempDraggable = null;
                 }
                 }
               })
               })

Some files were not shown because too many files changed in this diff