Explorar o código

HUE-4530 [indexer] Added wizard circles

Enrico Berti %!s(int64=9) %!d(string=hai) anos
pai
achega
d1d7299858

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

@@ -0,0 +1,110 @@
+/*
+ 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 {
+  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 li:before {
+  background-color: #dddddd;
+  content: "";
+  display: block;
+  height: 1px;
+  position: relative;
+  top: 18px;
+}
+
+.step-indicator li:first-child:before {
+  left: 50%;
+}
+
+.step-indicator li:last-child:before {
+  right: 50%;
+}
+
+.step-indicator .active .step {
+  border-color: #338BB8;
+  color: #338BB8;
+}
+
+.step-indicator .active .caption {
+  color: #338BB8;
+}
+
+.step-indicator .complete .step {
+  border-color: #0F9D56;
+  color: #0F9D56;
+}
+
+.step-indicator .complete .caption {
+  color: #0F9D56;
+}
+
+.step-indicator .incomplete .step {
+  border-color: #ff3b30;
+  color: #ff3b30;
+}
+
+.step-indicator .incomplete .caption {
+  color: #ff3b30;
+}
+
+.step-indicator .active.complete .step {
+  border-color: #338BB8;
+  color: #338BB8;
+}
+
+.step-indicator .active.complete .caption {
+  color: #338BB8;
+}
+
+.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;
+}

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

@@ -33,6 +33,7 @@ ${ tableStats.tableStats() }
 ${ assist.assistPanel() }
 
 <link rel="stylesheet" href="${ static('notebook/css/notebook.css') }">
+<link rel="stylesheet" href="${ static('desktop/css/wizard.css') }">
 <style type="text/css">
 % if conf.CUSTOM.BANNER_TOP_HTML.get():
   .show-assist {
@@ -121,6 +122,36 @@ ${ assist.assistPanel() }
 
 <script type="text/html" id="create-index-wizard">
   <div data-bind="visible: createWizard.show">
+
+    <ol class="list-inline text-center step-indicator">
+      <li data-bind="css: { 'active': currentStep() == 1, 'complete': currentStep() > 1 }">
+        <div class="step">
+          <!-- ko if: currentStep() == 1 -->
+          1
+          <!-- /ko -->
+          <!-- ko ifnot: currentStep() == 1 -->
+          <span class="fa fa-check"></span>
+          <!-- /ko -->
+        </div>
+        <div class="caption">${ _('Pick it') }</div>
+      </li>
+      <li data-bind="css: { 'inactive': currentStep() == 1, 'active': currentStep() == 2, 'complete': currentStep() == 3 }">
+        <div class="step">
+          <!-- ko if: currentStep() < 3 -->
+          2
+          <!-- /ko -->
+          <!-- ko if: currentStep() == 3 -->
+          <span class="fa fa-check"></span>
+          <!-- /ko -->
+        </div>
+        <div class="caption">${ _('Tweak it') }</div>
+      </li>
+      <li data-bind="css: { 'inactive': currentStep() < 3, 'active': currentStep() == 3 }">
+        <div class="step">3</div>
+        <div class="caption">${ _('Index it') }</div>
+      </li>
+    </ol>
+
     <!-- ko if: currentStep() == 1 -->
     <div class="control-group" data-bind="css: { error: createWizard.isNameAvailable() === false && createWizard.fileFormat().name().length == 0, success: createWizard.isNameAvailable()}">
       <label for="collectionName" class="control-label">${ _('Name') }</label>