Forráskód Böngészése

[notebook] Support for player mode

Enrico Berti 10 éve
szülő
commit
832b8a2ce3

+ 0 - 60
apps/search/src/search/static/search/css/search.css

@@ -588,66 +588,6 @@ em {
   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;
-}
-
 .grid-th {
   text-align: left;
   white-space: nowrap;

+ 60 - 0
desktop/core/src/desktop/static/desktop/css/hue3.css

@@ -2083,3 +2083,63 @@ pre {
 .datatables-counter-col {
   width: 10px;
 }
+
+.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;
+}

+ 4 - 3
desktop/libs/notebook/src/notebook/static/notebook/js/notebook.ko.js

@@ -636,7 +636,7 @@ var Notebook = function (vm, notebook) {
   self.name = ko.observable(typeof notebook.name != "undefined" && notebook.name != null ? notebook.name : 'My Notebook');
   self.description = ko.observable(typeof notebook.description != "undefined" && notebook.description != null ? notebook.description: '');
   self.snippets = ko.observableArray();
-  self.selectedSnippet = ko.observable(vm.availableSnippets().length > 0 ? vm.availableSnippets()[0].type() : "NO_SNIPPETS");
+  self.selectedSnippet = ko.observable(vm.availableSnippets().length > 0 ? vm.availableSnippets()[0].type() : 'NO_SNIPPETS');
   self.creatingSessionLocks = ko.observableArray();
   self.sessions = ko.mapping.fromJS(typeof notebook.sessions != "undefined" && notebook.sessions != null ? notebook.sessions : [], {
     create: function(value) {
@@ -864,6 +864,7 @@ function EditorViewModel(notebooks, options) {
   self.notebooks = ko.observableArray();
   self.selectedNotebook = ko.observable();
   self.combinedContent = ko.observable();
+  self.isPlayerMode = ko.observable(false);
 
   self.displayCombinedContent = function () {
     if (! self.selectedNotebook()) {
@@ -898,9 +899,9 @@ function EditorViewModel(notebooks, options) {
     $("#removeSnippetModal").modal("show");
   };
 
-  self.assistAvailable = options.assistAvailable;
+  self.assistAvailable = ko.observable(options.assistAvailable);
 
-  self.isLeftPanelVisible = ko.observable(self.assistAvailable && $.totalStorage('spark_left_panel_visible') != null && $.totalStorage('spark_left_panel_visible'));
+  self.isLeftPanelVisible = ko.observable(self.assistAvailable() && $.totalStorage('spark_left_panel_visible') != null && $.totalStorage('spark_left_panel_visible'));
 
   self.isLeftPanelVisible.subscribe(function(newValue) {
     $.totalStorage('spark_left_panel_visible', newValue);

+ 42 - 6
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -111,9 +111,14 @@ from desktop.views import _ko
 % endif
 </style>
 
-<div class="search-bar">
+<div class="search-bar" data-bind="visible: ! $root.isPlayerMode()">
   <div class="pull-right" style="padding-right:50px">
-
+    <!-- ko if: $root.selectedNotebook() && $root.selectedNotebook().snippets().length > 0 -->
+    <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>
+    &nbsp;&nbsp;
+    <!-- /ko -->
     <div class="btn-group">
       <a class="btn dropdown-toggle" data-toggle="dropdown">
         <i class="fa fa-check-square-o"></i>
@@ -191,6 +196,15 @@ from desktop.views import _ko
 
 </div>
 
+<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') }" />
+  <!-- ko if: $root.selectedNotebook() -->
+  <h4 data-bind="text: $root.selectedNotebook().name"></h4>
+  <!-- /ko -->
+</div>
+
+
 <div id="combinedContentModal" class="modal hide" data-backdrop="true" style="width:780px;margin-left:-410px!important">
   <div class="modal-header">
     <a href="javascript: void(0)" data-dismiss="modal" class="pull-right"><i class="fa fa-times"></i></a>
@@ -205,7 +219,7 @@ from desktop.views import _ko
 </div>
 
 
-<a title="${_('Toggle Assist')}" class="pointer show-assist" data-bind="visible: !$root.isLeftPanelVisible() && $root.assistAvailable, click: function() { $root.isLeftPanelVisible(true) }">
+<a title="${_('Toggle Assist')}" class="pointer show-assist" data-bind="visible: !$root.isLeftPanelVisible() && $root.assistAvailable(), click: function() { wasAssistVisible = true; $root.isLeftPanelVisible(true); }">
   <i class="fa fa-chevron-right"></i>
 </a>
 
@@ -220,13 +234,13 @@ from desktop.views import _ko
 </div>
 
 <script type="text/html" id="notebook">
-  <div class="assist-container left-panel" data-bind="visible: $root.isLeftPanelVisible() && $root.assistAvailable">
-    <a title="${_('Toggle Assist')}" class="pointer hide-assist" data-bind="click: function() { $root.isLeftPanelVisible(false) }">
+  <div class="assist-container left-panel" data-bind="visible: $root.isLeftPanelVisible() && $root.assistAvailable()">
+    <a title="${_('Toggle Assist')}" class="pointer hide-assist" data-bind="click: function() { wasAssistVisible = false; $root.isLeftPanelVisible(false) }">
       <i class="fa fa-chevron-left"></i>
     </a>
     <div class="assist" data-bind="component: { name: 'assist-panel', params: { assistHelper: assistHelper, appName: 'notebook'  }}"></div>
   </div>
-  <div class="resizer" data-bind="visible: $root.isLeftPanelVisible() && $root.assistAvailable, splitDraggable : { appName: 'notebook', leftPanelVisible: $root.isLeftPanelVisible }"><div class="resize-bar">&nbsp;</div></div>
+  <div class="resizer" data-bind="visible: $root.isLeftPanelVisible() && $root.assistAvailable(), splitDraggable : { appName: 'notebook', leftPanelVisible: $root.isLeftPanelVisible }"><div class="resize-bar">&nbsp;</div></div>
   <div class="right-panel" data-bind="event: { scroll: function(){ $(document).trigger('hideAutocomplete'); } }">
     <div>
       <div class="row-fluid row-container sortable-snippets" data-bind="css: {'is-editing': $root.isEditing},
@@ -1621,5 +1635,27 @@ from desktop.views import _ko
   viewModel = new EditorViewModel(${ notebooks_json | n,unicode }, vmOptions);
   ko.applyBindings(viewModel);
   viewModel.init();
+
+  var isAssistAvailable = viewModel.assistAvailable();
+  var wasAssistVisible = viewModel.isLeftPanelVisible();
+
+
+  viewModel.isPlayerMode.subscribe(function(value) {
+    if (value){
+      $(".jHueNotify").hide();
+      viewModel.assistAvailable(false);
+      viewModel.isLeftPanelVisible(false);
+      $(".navigator").hide();
+      $(".add-snippet").hide();
+      $(".main-content").css("top", "50px");
+    }
+    else {
+      viewModel.isLeftPanelVisible(wasAssistVisible);
+      viewModel.assistAvailable(isAssistAvailable);
+      $(".navigator").show();
+      $(".add-snippet").show();
+      $(".main-content").css("top", "70px");
+    }
+  });
 </script>
 </%def>