Sfoglia il codice sorgente

HUE-6077 [frontend] Got rid of loader on fileviewer and fixed colors of the file area

Enrico Berti 8 anni fa
parent
commit
83d5f43

+ 1 - 1
apps/filebrowser/src/filebrowser/static/filebrowser/css/display.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.
- */#fileviewerComponents .card-body{padding:0;margin:0}#fileviewerComponents .hue-breadcrumbs-bar{margin:0;padding-bottom:0}#fileviewerComponents #fileArea{overflow:auto;background-color:#F5F5F5;position:relative;font-size:12px}#fileviewerComponents #fileArea.loading{opacity:.7}#fileviewerComponents #loader{position:fixed;margin-top:40px;width:140px;height:140px;line-height:140px;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;font-size:50px;text-align:center}#fileviewerComponents .binary{font-family:"Courier New",Courier,monospace}#fileviewerComponents pre{border:none}#fileviewerComponents pre a{color:#444;cursor:default;white-space:inherit}#fileviewerComponents pre a:hover{color:#444;text-decoration:none}#fileviewerComponents .pagination-input-form{position:relative;right:1em;top:-10px}#fileviewerComponents .pagination-input{text-align:center;width:40px}#fileviewerComponents dd{margin-left:0;margin-bottom:6px}
+ */#fileviewerComponents .card-body{padding:0;margin:0}#fileviewerComponents .hue-breadcrumbs-bar{margin:0;padding-bottom:0}#fileviewerComponents #fileArea{overflow:auto;background-color:#F8F8F8;position:relative;font-size:12px}#fileviewerComponents #fileArea.loading{opacity:.7}#fileviewerComponents .binary{font-family:"Courier New",Courier,monospace}#fileviewerComponents pre{border:none}#fileviewerComponents pre a{color:#444;cursor:default;white-space:inherit}#fileviewerComponents pre a:hover{color:#444;text-decoration:none}#fileviewerComponents .pagination-input-form{position:relative;right:1em;top:-10px}#fileviewerComponents .pagination-input{text-align:center;width:40px}#fileviewerComponents dd{margin-left:0;margin-bottom:6px}

+ 3 - 14
apps/filebrowser/src/filebrowser/static/filebrowser/less/display.less

@@ -15,6 +15,8 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 */
+@import (reference) "cui/colors.less";
+
 #fileviewerComponents {
   .card-body {
     padding: 0;
@@ -28,7 +30,7 @@
 
   #fileArea {
     overflow: auto;
-    background-color: #F5F5F5;
+    background-color: @cui-gray-050;
     position: relative;
     font-size: 12px;
     &.loading {
@@ -36,19 +38,6 @@
     }
   }
 
-  #loader {
-    position: fixed;
-    margin-top: 40px;
-    width: 140px;
-    height: 140px;
-    line-height: 140px;
-    -webkit-border-radius: 20px;
-    -moz-border-radius: 20px;
-    border-radius: 20px;
-    font-size: 50px;
-    text-align: center;
-  }
-
   .binary {
     font-family: "Courier New", Courier, monospace;
   }

+ 2 - 5
apps/filebrowser/src/filebrowser/templates/display.mako

@@ -144,11 +144,10 @@ ${ fb_components.menubar() }
                 <!-- /ko -->
               <!-- /ko -->
             <!-- /ko -->
-            <div id="loader" data-bind="visible: isLoading">
-              <i class="fa fa-spinner fa-spin"></i>
-            </div>
+            <!-- ko hueSpinner: { spin: !$root.file() && isLoading(), center: true, size: 'xlarge' } --><!-- /ko -->
             <!-- ko if: $root.isViewing -->
             <div id="fileArea" data-bind="css: {'loading': isLoading}, visible: $root.file() && $root.file().stats.size()">
+              <!-- ko hueSpinner: { spin: isLoading, center: true, size: 'xlarge' } --><!-- /ko -->
               <pre></pre>
               <table class="binary">
                 <tbody>
@@ -485,8 +484,6 @@ ${ fb_components.menubar() }
   $(document).ready(function () {
     ko.applyBindings(viewModel, $('#fileviewerComponents')[0]);
 
-    $("#loader").css("marginLeft", ($(".hue-breadcrumbs-bar").width() - $("#loader").width()) / 2);
-
     $(document).ajaxError(function () {
       $.jHueNotify.error("${_('There was an unexpected server error.')}");
     });