Bläddra i källkod

HUE-5565 [responsive] Avoid leaking of Oozie workflow css

Enrico Berti 8 år sedan
förälder
incheckning
9cf9433fbe

+ 2 - 1
Gruntfile.js

@@ -38,7 +38,8 @@ module.exports = function(grunt) {
           'desktop/core/src/desktop/static/desktop/css/hue3-extra.css': 'desktop/core/src/desktop/static/desktop/less/hue3-extra.less',
           'apps/metastore/src/metastore/static/metastore/css/metastore.css': 'apps/metastore/src/metastore/static/metastore/less/metastore.less',
           'desktop/libs/notebook/src/notebook/static/notebook/css/notebook.css': 'desktop/libs/notebook/src/notebook/static/notebook/less/notebook.less',
-          'desktop/libs/notebook/src/notebook/static/notebook/css/notebook-layout.css': 'desktop/libs/notebook/src/notebook/static/notebook/less/notebook-layout.less'
+          'desktop/libs/notebook/src/notebook/static/notebook/css/notebook-layout.css': 'desktop/libs/notebook/src/notebook/static/notebook/less/notebook-layout.less',
+          'apps/oozie/src/oozie/static/oozie/css/workflow-editor.css': 'apps/oozie/src/oozie/static/oozie/less/workflow-editor.less'
         }
       }
     },

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 16 - 312
apps/oozie/src/oozie/static/oozie/css/workflow-editor.css


+ 315 - 0
apps/oozie/src/oozie/static/oozie/less/workflow-editor.less

@@ -0,0 +1,315 @@
+/*
+ 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.
+*/
+
+#oozie_workflowComponents {
+
+  .draggable-widget, .draggable-icon {
+    cursor: move;
+    background-color: #FFF;
+  }
+
+  #emptyDashboard {
+    right: 70px !important;
+  }
+
+  .drop-target {
+    background-color: #F6F6F6;
+    min-height: 20px;
+    border: 2px dotted #DDD;
+    text-align: center;
+    padding: 4px;
+  }
+
+  .drop-target-dragging {
+    background-color: #F0F0F0;
+    border-color: #DDD;
+  }
+
+  .ui-sortable.drop-target {
+    min-height: 20px;
+  }
+
+  .drop-target-highlight {
+    min-height: 20px;
+    background-color: #CCC;
+    border-color: #BBB;
+  }
+
+  .drop-target-disabled {
+    background-color: #FFFFFF;
+    border-color: #FFFFFF;
+  }
+
+  .drop-target-side {
+    min-height: 100px;
+    height: 100%;
+  }
+
+  .dashboard .row-fluid .span10.readonly {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  .dashboard .row-fluid .span1.readonly {
+    width: 0;
+    height: 0;
+  }
+
+  .readonly .card-widget {
+    border: 1px solid #d8d8d8 !important;
+  }
+
+  .row-fluid [class*="span"]:not([class*="offset"]) {
+    //margin-left: 0;
+  }
+
+  .widget [class*="span"]:not([class*="offset"]) {
+    //margin-left: 2.127659574468085%;
+  }
+
+  .dashboard .row-fluid .span10 {
+    //width: 90%;
+  }
+
+  .dashboard .row-fluid .span1 {
+    //width: 4.5%;
+  }
+
+  .card-widget {
+    position: relative;
+    z-index: 11;
+    overflow-x: auto;
+    border: 1px solid #d8d8d8 !important;
+  }
+
+  .card-widget h2, .card-widget .card-body {
+    min-width: 240px;
+  }
+
+  .card-column-disabled {
+    background-color: #f1f1f1;
+  }
+
+  .widget-icon {
+    color: #338bb8;
+    height: 16px;
+    width: 16px;
+    margin-left: 3px;
+    margin-right: 3px;
+  }
+
+  .advanced-triangle-container {
+    position: absolute;
+    right: 0;
+  }
+
+  .advanced-triangle {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 40px 40px 0;
+    border-color: transparent #338bb8 transparent transparent;
+    cursor: pointer;
+  }
+
+  .advanced-triangle a {
+    color: #FFFFFF;
+    padding-left: 20px;
+    padding-top: 4px;
+  }
+
+  .card-widget h6 {
+    text-transform: uppercase;
+    color: #338bb8;
+    margin-bottom: 1px;
+  }
+
+  .card-widget h6.field-title {
+    margin-bottom: 0;
+    padding-left: 4px;
+  }
+
+  .widget-main-section {
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 350px;
+  }
+
+  .row-fluid .offset3andhalf:first-child {
+    margin-left: 29%;
+  }
+
+  .row-container.is-editing {
+    border: none !important;
+  }
+
+  .dashboard {
+    margin-top: 50px;
+  }
+
+  .dashboard.readonly {
+    margin-top: 0;
+  }
+
+  .big-icon {
+    color: #DDD;
+    font-size: 40px;
+    text-align: center;
+    padding: 5px;
+  }
+
+  .ui-sortable {
+    min-height: 10px !important;
+  }
+
+  .row-container {
+    min-height: 10px !important;
+  }
+
+  .card-column {
+    min-height: 200px !important;
+  }
+
+  .readonly .card {
+    margin-bottom: 15px;
+  }
+
+  .readonly .card-column {
+    min-height: 5px !important;
+  }
+
+  .readonly .drop-target-side {
+    min-height: 10px !important;
+    height: 10px !important;
+  }
+
+  textarea {
+    resize: none;
+  }
+
+  .span4.readonly {
+    margin-left: 1px;
+  }
+
+  em {
+    font-weight: normal;
+    background-color: #FFFFFF;
+  }
+
+  .properties ul li {
+    margin-bottom: 3px;
+  }
+
+  .widget-main-section .nav-tabs {
+    margin-bottom: 10px;
+  }
+
+  .widget-main-section .tab-content {
+    min-height: 200px;
+  }
+
+  .widget-main-section .tab-content h6:first-child {
+    margin-top: 0;
+  }
+
+  canvas {
+    pointer-events: none;
+    z-index: 10;
+  }
+
+  ul.unstyled li {
+    margin-bottom: 2px;
+    white-space: nowrap;
+  }
+
+  .widget-statusbar {
+    height: 2px;
+    border-radius: 3px;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    width: 0;
+    -webkit-transition: width .6s ease;
+    -moz-transition: width .6s ease;
+    -o-transition: width .6s ease;
+    transition: width .6s ease;
+  }
+
+  .widget-statusbar-running {
+    background-color: #fbb450;
+  }
+
+  .widget-statusbar-failed {
+    background-color: #c13e2c;
+  }
+
+  .widget-statusbar-success {
+    background-color: #2f973f;
+  }
+
+  .widget-running {
+    opacity: .5;
+  }
+
+  .airy {
+    margin-bottom: 3px;
+  }
+
+  .widget-label {
+    display: inline-block;
+    width: 80px;
+  }
+
+  .widget-label-large {
+    width: 90px;
+  }
+
+  .expanded-widget .input-expandable {
+    width: 365px;
+  }
+
+  .zoom-in {
+    cursor: zoom-in;
+  }
+
+  .ui-autocomplete {
+    z-index: 4000;
+  }
+}
+
+#addActionDemiModal {
+  position: absolute;
+  margin-left: 0;
+  border: 1px solid #d8d8d8;
+  border-top: none;
+}
+
+#addActionDemiModal input, #addActionDemiModal select {
+  margin-bottom: 0;
+}
+
+#exposeOverlay {
+  background-color: #000;
+  opacity: 0.3;
+  display: none;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1031;
+}

+ 1 - 1
apps/oozie/src/oozie/templates/dashboard/list_oozie_workflow.mako

@@ -29,7 +29,7 @@
 ${ commonheader(_("Workflow Dashboard"), "oozie", user, request) | n,unicode }
 ${ layout.menubar(section='workflows', dashboard=True) }
 
-<div class="container-fluid" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<div id="oozie_workflowComponents" class="container-fluid">
 <div class="card card-small">
   <div class="card-body">
   <p>

+ 5 - 5
apps/oozie/src/oozie/templates/editor2/common_workflow.mako

@@ -120,19 +120,19 @@
 
 <script type="text/html" id="internal-row-template">
   <div class="container-fluid">
-    <div class="row-fluid" data-bind="visible: $index() > 0 && $root.isEditing() && ! $root.isRowBeforeJoin($data) && ! $root.isRowAfterFork($data)" style="margin-bottom: 10px">
-      <div data-bind="css: {'span1': true, 'offset3andhalf': ($root.isEditing() && $parents.length <= 2 && columns().length == 0), 'offset4': (!$root.isEditing() && $parents.length <= 2 && columns().length == 0), 'readonly': ! $root.isEditing()}"></div>
-      <div data-bind="css: {'span10': ($parents.length > 2 || columns().length > 0), 'span4': ($parents.length <= 2 && columns().length == 0), 'offset3andhalf': (!$root.isEditing() && $parents.length <= 2 && columns().length == 0), 'readonly': ! $root.isEditing()}">
+    <div class="row-fluid row-internal" data-bind="visible: $index() > 0 && $root.isEditing() && ! $root.isRowBeforeJoin($data) && ! $root.isRowAfterFork($data)" style="margin-bottom: 10px">
+      <div data-bind="css: {'span1': true, 'offset3': ($root.isEditing() && $parents.length <= 2 && columns().length == 0), 'offset4': ($parents.length <= 2 && columns().length == 0), 'readonly': ! $root.isEditing()}"></div>
+      <div data-bind="css: {'span10': ($parents.length > 2 || columns().length > 0), 'span4': ($parents.length <= 2 && columns().length == 0), 'offset3': (!$root.isEditing() && $parents.length <= 2 && columns().length == 0), 'readonly': ! $root.isEditing()}">
         <div data-bind="visible: $root.isEditing() && ! enableOozieDropOnBefore(), css: {'drop-target drop-target-disabled': true, 'drop-target-dragging': $root.isDragging(), 'is-editing': $root.isEditing}"></div>
         <div style="text-align: left" data-bind="visible: $root.isEditing() && enableOozieDropOnBefore(), css: {'drop-target': true, 'drop-target-dragging': $root.isDragging(), 'is-editing': $root.isEditing}, droppable: {enabled: $root.isEditing, onDrop: function(){ var _w = $root.addDraggedWidget($data); widgetDraggedAdditionalHandler(_w); } }"></div>
       </div>
       <div data-bind="css: {'span1': true, 'readonly': ! $root.isEditing()}"></div>
     </div>
     <div class="row-fluid" data-bind="style: {'width': columns().length < 5 ? '100%' : (columns().length * 25)+'%' }">
-      <div data-bind="css: {'span1': true, 'offset3andhalf': ($root.isEditing() && $parents.length <= 2 && columns().length == 0), 'offset4': (!$root.isEditing() && $parents.length <= 2 && columns().length == 0), 'readonly': ! $root.isEditing()}">
+      <div data-bind="css: {'span1': true, 'offset3': ($root.isEditing() && $parents.length <= 2 && columns().length == 0), 'offset4': (!$root.isEditing() && $parents.length <= 2 && columns().length == 0), 'readonly': ! $root.isEditing()}">
         <div data-bind="visible: $root.isEditing() && enableOozieDropOnSide() && !($data.widgets().length > 0 && ['join-widget', 'decision-widget'].indexOf($data.widgets()[0].widgetType()) > -1), css: {'drop-target drop-target-side': true, 'drop-target-dragging': $root.isDragging(), 'is-editing': $root.isEditing}, droppable: {enabled: $root.isEditing, onDrop: function(){ var _w = $root.addSideDraggedWidget($data, true); widgetDraggedAdditionalHandler(_w); } }"></div>
       </div>
-      <div  data-bind="css: {'span10': ($parents.length > 2 || columns().length > 0), 'span4': ($parents.length <= 2 && columns().length == 0), 'offset3andhalf': (!$root.isEditing() && $parents.length <= 2 && columns().length == 0), 'readonly': ! $root.isEditing()}">
+      <div  data-bind="css: {'span10': ($parents.length > 2 || columns().length > 0), 'span4': ($parents.length <= 2 && columns().length == 0), 'offset3': (!$root.isEditing() && $parents.length <= 2 && columns().length == 0), 'readonly': ! $root.isEditing()}">
         <div data-bind="visible: columns().length == 0, css: {'row-fluid': true, 'row-container':true, 'is-editing': $root.isEditing},
           sortable: { template: 'widget-template', data: widgets, allowDrop: enableOozieDrop, isEnabled: enableOozieDrop,
           options: {'opacity': 0.7, 'placeholder': 'row-highlight', 'greedy': true,

+ 1 - 1
desktop/core/src/desktop/static/desktop/js/ko.common-dashboard.js

@@ -69,7 +69,7 @@ var Row = function (widgets, vm, columns) {
   self.columns = ko.observableArray(columns ? columns : []);
   self.columns.subscribe(function (val) {
     self.columns().forEach(function (col) {
-      col.percWidth((100 - self.columns().length * 0.5) / self.columns().length);
+      col.percWidth((100 - self.columns().length * 2.127659574468085) / self.columns().length);
     });
   });
 

Vissa filer visades inte eftersom för många filer har ändrats