浏览代码

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

Enrico Berti 8 年之前
父节点
当前提交
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.
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 See the License for the specific language governing permissions and
 limitations under the License.
 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
  See the License for the specific language governing permissions and
  limitations under the License.
  limitations under the License.
 */
 */
+@import (reference) "cui/colors.less";
+
 #fileviewerComponents {
 #fileviewerComponents {
   .card-body {
   .card-body {
     padding: 0;
     padding: 0;
@@ -28,7 +30,7 @@
 
 
   #fileArea {
   #fileArea {
     overflow: auto;
     overflow: auto;
-    background-color: #F5F5F5;
+    background-color: @cui-gray-050;
     position: relative;
     position: relative;
     font-size: 12px;
     font-size: 12px;
     &.loading {
     &.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 {
   .binary {
     font-family: "Courier New", Courier, monospace;
     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 -->
               <!-- /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 -->
             <!-- ko if: $root.isViewing -->
             <div id="fileArea" data-bind="css: {'loading': isLoading}, visible: $root.file() && $root.file().stats.size()">
             <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>
               <pre></pre>
               <table class="binary">
               <table class="binary">
                 <tbody>
                 <tbody>
@@ -485,8 +484,6 @@ ${ fb_components.menubar() }
   $(document).ready(function () {
   $(document).ready(function () {
     ko.applyBindings(viewModel, $('#fileviewerComponents')[0]);
     ko.applyBindings(viewModel, $('#fileviewerComponents')[0]);
 
 
-    $("#loader").css("marginLeft", ($(".hue-breadcrumbs-bar").width() - $("#loader").width()) / 2);
-
     $(document).ajaxError(function () {
     $(document).ajaxError(function () {
       $.jHueNotify.error("${_('There was an unexpected server error.')}");
       $.jHueNotify.error("${_('There was an unexpected server error.')}");
     });
     });