浏览代码

HUE-7056 [importer] Minimal arrow linking step 1 to 2

Enrico Berti 8 年之前
父节点
当前提交
08f0706

文件差异内容过多而无法显示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


文件差异内容过多而无法显示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 0 - 110
desktop/core/src/desktop/static/desktop/css/wizard.css

@@ -1,110 +0,0 @@
-/*
- 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.
-*/
-
-.step-indicator-fixed {
-  position: fixed;
-  background-color: #FFF;
-  margin-top: -10px;
-  z-index: 100;
-  padding-top: 10px;
-}
-
-.step-indicator-fixed ol {
-  margin: 0;
-}
-
-.vertical-spacer {
-  height: 80px;
-}
-
-.step-indicator {
-  border-collapse: separate;
-  display: table;
-  margin-left: 0px;
-  position: relative;
-  table-layout: fixed;
-  vertical-align: middle;
-}
-
-.step-indicator li {
-  display: table-cell;
-  float: none;
-  padding: 0;
-  width: 1%;
-}
-
-
-.step-indicator .active .step {
-  border-color: #0B7FAD;
-  color: #0B7FAD;
-}
-
-.step-indicator .active .caption {
-  color: #0B7FAD;
-}
-
-.step-indicator .complete .step {
-  border-color: #0F9D56;
-  color: #0F9D56;
-}
-
-.step-indicator .complete .caption {
-  color: #0F9D56;
-}
-
-.step-indicator .error .step {
-  border-color: #d6616b;
-  color: #d6616b;
-}
-
-.step-indicator .error .caption {
-  color: #d6616b;
-}
-
-.step-indicator .active.complete .step {
-  border-color: #0B7FAD;
-  color: #0B7FAD;
-}
-
-.step-indicator .active.complete .caption {
-  color: #0B7FAD;
-}
-
-.step-indicator .inactive .caption {
-  color: #dddddd;
-}
-
-.step-indicator .step {
-  background-color: #ffffff;
-  border: 1px solid #dddddd;
-  color: #dddddd;
-  font-size: 18px;
-  width: 36px;
-  height: 36px;
-  line-height: 36px;
-  border-radius: 18px;
-  margin: 0 auto;
-  position: relative;
-  z-index: 1;
-}
-
-.step-indicator .caption {
-  box-sizing: border-box;
-  color: #dddddd;
-  padding: 11px 16px;
-}

+ 100 - 0
desktop/core/src/desktop/static/desktop/less/components/hue-wizard.less

@@ -0,0 +1,100 @@
+/*
+ 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) "hue-mixins.less";
+@import (reference) "hue-helpers.less";
+
+.step-indicator-fixed {
+  position: fixed;
+  background-color: @cui-white;
+  margin-top: -10px;
+  z-index: 100;
+  padding-top: 10px;
+  ol {
+    margin: 0;
+  }
+}
+
+.step-indicator {
+  border-collapse: separate;
+  display: table;
+  margin-left: 0px;
+  position: relative;
+  table-layout: fixed;
+  vertical-align: middle;
+  width: 100%;
+  li {
+    display: table-cell;
+    float: none;
+    padding: 0;
+    width: 49%;
+  }
+  li.arrow {
+    width: 2%;
+    text-align: center;
+  }
+  .active .step {
+    border-color: @cui-blue-700;
+    color: @cui-blue-700;
+  }
+  .active .caption {
+    color: @cui-blue-700;
+  }
+  .complete .step {
+    border-color: @cui-green-500;
+    color: @cui-green-500;
+  }
+  .complete .caption {
+    color: @cui-green-500;
+  }
+  .error .step {
+    border-color: @cui-red-400;
+    color: @cui-red-400;
+  }
+  .error .caption {
+    color: @cui-red-400;
+  }
+  .active.complete .step {
+    border-color: @cui-blue-700;
+    color: @cui-blue-700;
+  }
+  .active.complete .caption {
+    color: @cui-blue-700;
+  }
+  .inactive .caption {
+    color: @cui-gray-300;
+  }
+  .step {
+    background-color: @cui-white;
+    border: 1px solid @cui-gray-300;
+    color: @cui-gray-300;
+    font-size: 18px;
+    width: 36px;
+    height: 36px;
+    line-height: 36px;
+    border-radius: 18px;
+    margin: 0 auto;
+    position: relative;
+    z-index: 1;
+  }
+  .caption {
+    box-sizing: border-box;
+    color: @cui-gray-300;
+    padding: 11px 16px;
+  }
+}
+

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

@@ -34,6 +34,7 @@
 @import "components/hue-breadcrumbs.less";
 @import "components/hue-inputautocomplete.less";
 @import "components/hue-shepherd.less";
+@import "components/hue-wizard.less";
 @import "hue-helpers.less";
 
 body {

文件差异内容过多而无法显示
+ 0 - 0
desktop/libs/indexer/src/indexer/static/indexer/css/importer.css


+ 4 - 0
desktop/libs/indexer/src/indexer/static/indexer/less/importer.less

@@ -20,6 +20,10 @@
 @import (reference) "hue-helpers.less";
 
 .importer-main {
+  .vertical-spacer {
+    height: 80px;
+  }
+
   .path {
     margin-bottom: 0!important;
     border-right: none!important;

+ 2 - 1
desktop/libs/indexer/src/indexer/templates/importer.mako

@@ -61,7 +61,6 @@ ${ assist.assistPanel() }
 <link rel="stylesheet" href="${ static('desktop/ext/css/selectize.css') }">
 %endif
 
-<link rel="stylesheet" href="${ static('desktop/css/wizard.css') }">
 <link rel="stylesheet" href="${ static('indexer/css/importer.css') }" type="text/css">
 
 <style type="text/css">
@@ -176,6 +175,8 @@ ${ assist.assistPanel() }
           </div>
         </li>
 
+        <li class="arrow muted"><i class="fa fa-fw fa-angle-double-right"></i></li>
+
         <li data-bind="css: { 'inactive': currentStep() == 1, 'active': currentStep() == 2, 'complete': currentStep() == 3, 'pointer': currentStep() == 1 && !createWizard.isGuessingFormat() && createWizard.source.show() }, click: function() { if (!createWizard.isGuessingFormat() && createWizard.source.show()){ currentStep(2); }}">
           <div class="step" title="${ _('Go to Step 2') }">
             <!-- ko if: currentStep() < 3 -->

+ 0 - 1
desktop/libs/indexer/src/indexer/templates/indexer.mako

@@ -44,7 +44,6 @@ ${ assist.assistJSModels() }
 ${ assist.assistPanel() }
 %endif
 
-<link rel="stylesheet" href="${ static('desktop/css/wizard.css') }">
 <style type="text/css">
 % if conf.CUSTOM.BANNER_TOP_HTML.get():
   .show-assist {

部分文件因为文件数量过多而无法显示