Browse Source

HUE-6077 [frontend] Fixed filechooser sizes and updated the upload button style

Enrico Berti 8 years ago
parent
commit
725ed34

File diff suppressed because it is too large
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


File diff suppressed because it is too large
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


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

@@ -1408,135 +1408,6 @@ body {
   margin-right: 4px;
 }
 
-.qq-uploader {
-    position: relative;
-}
-
-.qq-upload-button {
-  display: inline-block;
-  height: 29px;
-  min-height: 29px;
-  padding: 0 8px;
-  margin: 0;
-  font-size: 13px;
-  font-weight: bold;
-  line-height: 29px;
-  color: #444;
-  text-align: center;
-  text-shadow: none;
-  vertical-align: middle;
-  cursor: pointer;
-  background-color: #f9f9f9;
-  background-image: -moz-linear-gradient(top, #fff, #f1f1f1);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#f1f1f1));
-  background-image: -webkit-linear-gradient(top, #fff, #f1f1f1);
-  background-image: -o-linear-gradient(top, #fff, #f1f1f1);
-  background-image: linear-gradient(to bottom, #fff, #f1f1f1);
-  background-repeat: repeat-x;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-color: #f1f1f1 #f1f1f1 #cbcbcb;
-  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-  border-color: rgba(0, 0, 0, 0.1);
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff1f1f1', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-
-.qq-upload-button-focus {
-  outline: none;
-}
-
-.qq-upload-button:hover,.qq-upload-button:focus {
-  color: #444;
-  text-decoration: none;
-  background-position: 0 -15px;
-  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-  -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-  -webkit-transition: background-position .1s linear;
-  -moz-transition: background-position .1s linear;
-  -o-transition: background-position .1s linear;
-  transition: background-position .1s linear;
-  background-color: #f1f1f1;
-  *background-color: #e4e4e4;
-}
-
-.qq-upload-drop-area {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    min-height: 40px;
-    z-index: 2;
-    background: #FFFFFF;
-    border: 2px dashed #DDDDDD;
-    -webkit-border-radius: 6px;
-    -moz-border-radius: 6px;
-    border-radius: 6px;
-    text-align: center;
-}
-
-.qq-upload-drop-area span {
-    display: block;
-    position: absolute;
-    top: 50%;
-    width: 100%;
-    margin-top: -8px;
-    font-size: 16px;
-    color: #666666;
-}
-
-.qq-upload-drop-area-active {
-    border-color: #CCCCCC;
-    background-color: #EFEFEF;
-}
-
-.qq-upload-list {
-    margin: 15px 35px;
-    padding: 0;
-    list-style: disc;
-}
-
-.qq-upload-list li {
-    margin: 0;
-    padding: 0;
-    line-height: 15px;
-    font-size: 12px;
-}
-
-.qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-failed-text {
-    margin-right: 7px;
-}
-
-.qq-upload-file {
-}
-
-.qq-upload-spinner {
-    display: inline-block;
-    background: url("/static/desktop/ext/js/loading.gif");
-    width: 15px;
-    height: 15px;
-    vertical-align: text-bottom;
-}
-
-.qq-upload-size, .qq-upload-cancel {
-    font-size: 11px;
-}
-
-.qq-upload-failed-text {
-    display: none;
-}
-
-.qq-upload-fail .qq-upload-failed-text {
-    display: inline;
-}
-
 input[type='password']::-ms-reveal {
   display: none;
 }

+ 4 - 4
desktop/core/src/desktop/static/desktop/js/jquery.filechooser.js

@@ -184,13 +184,13 @@
 
       path = data.current_dir_path; // use real path.
       var _flist = $("<ul>").addClass("unstyled").css({
-        'height': '270px',
+        'height': '260px',
         'overflow-y': 'auto'
       });
       if (data.title != null && data.title == "Error") {
         var _errorMsg = $("<div>").addClass("alert").addClass("alert-error").text(data.message);
         _errorMsg.appendTo($(_parent.element).find('.filechooser-tree'));
-        var _previousLink = $("<a>").addClass("btn").addClass("bnt-small").text(_parent.options.labels.BACK).click(function () {
+        var _previousLink = $("<a>").addClass("btn").text(_parent.options.labels.BACK).click(function () {
           _parent.options.onFolderChange(_parent.previousPath);
           _parent.navigateTo(_parent.previousPath);
         });
@@ -467,7 +467,7 @@
           initUploader(path, _parent, _uploadFileBtn, _parent.options.labels);
         }
         if (_parent.options.selectFolder) {
-          _selectFolderBtn = $("<a>").addClass("btn").addClass("small").text(_parent.options.labels.SELECT_FOLDER);
+          _selectFolderBtn = $("<a>").addClass("btn").text(_parent.options.labels.SELECT_FOLDER);
           if (_parent.options.uploadFile) {
             _selectFolderBtn.css("margin-top", "10px");
           }
@@ -479,7 +479,7 @@
         }
         $("<span> </span>").appendTo(_actions);
         if (_parent.options.createFolder) {
-          _createFolderBtn = $("<a>").addClass("btn").addClass("small").text(_parent.options.labels.CREATE_FOLDER);
+          _createFolderBtn = $("<a>").addClass("btn").text(_parent.options.labels.CREATE_FOLDER);
           if (_parent.options.uploadFile) {
             _createFolderBtn.css("margin-top", "10px");
           }

+ 150 - 0
desktop/core/src/desktop/static/desktop/less/components/hue-qq-upload.less

@@ -0,0 +1,150 @@
+/*
+ Licensed to Cloudera, Inc. under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  Cloudera, Inc. licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ 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.
+*/
+@import (reference) "../cui/colors.less";
+@import (reference) "../cui/extra-variables.less";
+@import (reference) "../hue-mixins.less";
+
+.qq-uploader {
+  position: relative;
+}
+
+.qq-upload-button {
+  display: inline-block;
+  *display: inline;
+  /* IE7 inline-block hack */
+  *zoom: 1;
+  padding: 5px 12px;
+  margin-bottom: 0;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  color: #0B7FAD;
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+  background-color: #ffffff;
+  background-image: -moz-linear-gradient(top, #FFFFFF, #FFFFFF);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FFFFFF), to(#FFFFFF));
+  background-image: -webkit-linear-gradient(top, #FFFFFF, #FFFFFF);
+  background-image: -o-linear-gradient(top, #FFFFFF, #FFFFFF);
+  background-image: linear-gradient(to bottom, #FFFFFF, #FFFFFF);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffffffff', GradientType=0);
+  border-color: #FFFFFF #FFFFFF #d9d9d9;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  *background-color: #FFFFFF;
+  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  border: 1px solid #C8C8C8;
+  *border: 0;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  *margin-left: .3em;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+}
+
+.qq-upload-button-focus {
+  outline: none;
+}
+
+.qq-upload-button:hover, .qq-upload-button:focus {
+  color: #29A7DE;
+  border-color: #29A7DE;
+  background-color: #FFFFFF;
+  *background-color: #f2f2f2;
+  text-decoration: none;
+  background-position: 0 -15px;
+  -webkit-transition: background-position 0.1s linear;
+  -moz-transition: background-position 0.1s linear;
+  -o-transition: background-position 0.1s linear;
+  transition: background-position 0.1s linear;
+}
+
+.qq-upload-drop-area {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  min-height: 40px;
+  z-index: 2;
+  background: #FFFFFF;
+  border: 2px dashed #DDDDDD;
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+  text-align: center;
+}
+
+.qq-upload-drop-area span {
+  display: block;
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  margin-top: -8px;
+  font-size: 16px;
+  color: #666666;
+}
+
+.qq-upload-drop-area-active {
+  border-color: #CCCCCC;
+  background-color: #EFEFEF;
+}
+
+.qq-upload-list {
+  margin: 15px 35px;
+  padding: 0;
+  list-style: disc;
+}
+
+.qq-upload-list li {
+  margin: 0;
+  padding: 0;
+  line-height: 15px;
+  font-size: 12px;
+}
+
+.qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-failed-text {
+  margin-right: 7px;
+}
+
+.qq-upload-file {
+}
+
+.qq-upload-spinner {
+  display: inline-block;
+  background: url("/static/desktop/ext/js/loading.gif");
+  width: 15px;
+  height: 15px;
+  vertical-align: text-bottom;
+}
+
+.qq-upload-size, .qq-upload-cancel {
+  font-size: 11px;
+}
+
+.qq-upload-failed-text {
+  display: none;
+}
+
+.qq-upload-fail .qq-upload-failed-text {
+  display: inline;
+}

+ 1 - 0
desktop/core/src/desktop/static/desktop/less/hue-cross-version.less

@@ -31,6 +31,7 @@
 @import "components/hue-tour.less";
 @import "components/hue-scrollbar.less";
 @import "components/hue-query-builder.less";
+@import "components/hue-qq-upload.less";
 @import "hue-helpers.less";
 
 .app-header {

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