Pārlūkot izejas kodu

[core] Updated demi-modal UX

Enrico Berti 10 gadi atpakaļ
vecāks
revīzija
b6b1b39

+ 2 - 1
apps/oozie/src/oozie/templates/editor2/bundle_editor.mako

@@ -143,7 +143,7 @@ ${ layout.menubar(section='bundles', is_editor=True, pullright=buttons) }
 </div>
 
 
-<div id="chooseCoordinatorDemiModal" class="demi-modal hide" data-backdrop="false">
+<div id="chooseCoordinatorDemiModal" class="demi-modal fade" data-backdrop="false">
   <div class="modal-body">
     <a href="javascript: void(0)" data-dismiss="modal" class="pull-right"><i class="fa fa-times"></i></a>
     <div style="float: left; margin-right: 10px;text-align: center">
@@ -165,6 +165,7 @@ ${ layout.menubar(section='bundles', is_editor=True, pullright=buttons) }
       </div>
     </div>
   </div>
+  <div><a class="pointer demi-modal-chevron" data-dismiss="modal"><i class="fa fa-chevron-up"></i></a></div>
 </div>
 
 

+ 2 - 1
apps/oozie/src/oozie/templates/editor2/coordinator_editor.mako

@@ -417,7 +417,7 @@ ${ layout.menubar(section='coordinators', is_editor=True, pullright=buttons) }
   </div>
 </div>
 
-<div id="chooseWorkflowDemiModal" class="demi-modal hide" data-backdrop="false">
+<div id="chooseWorkflowDemiModal" class="demi-modal fade" data-backdrop="false">
   <div class="modal-body">
     <a href="javascript: void(0)" data-dismiss="modal" class="pull-right"><i class="fa fa-times"></i></a>
     <div style="float: left; margin-right: 10px;text-align: center">
@@ -440,6 +440,7 @@ ${ layout.menubar(section='coordinators', is_editor=True, pullright=buttons) }
       </div>
     </div>
   </div>
+  <div><a class="pointer demi-modal-chevron" data-dismiss="modal"><i class="fa fa-chevron-up"></i></a></div>
 </div>
 
 <div id="settingsModal" class="modal hide fade">

+ 1 - 1
apps/search/src/search/static/search/css/search.css

@@ -535,4 +535,4 @@ em {
 
 .datepicker {
   z-index: 1051;
-}
+}

+ 6 - 3
apps/search/src/search/templates/search.mako

@@ -1544,7 +1544,7 @@ ${ dashboard.layout_skeleton() }
 </div>
 
 
-<div id="addFacetDemiModal" class="demi-modal hide" data-backdrop="false">
+<div id="addFacetDemiModal" class="demi-modal fade" data-backdrop="false">
   <div class="modal-body">
     <a href="javascript: void(0)" data-dismiss="modal" data-bind="click: addFacetDemiModalFieldCancel" class="pull-right"><i class="fa fa-times"></i></a>
     <div style="float: left; margin-right: 10px;text-align: center">
@@ -1563,9 +1563,10 @@ ${ dashboard.layout_skeleton() }
       </div>
     </div>
   </div>
+  <div><a class="pointer demi-modal-chevron" data-dismiss="modal" data-bind="click: addFacetDemiModalFieldCancel"><i class="fa fa-chevron-up"></i></a></div>
 </div>
 
-<div id="settingsDemiModal" class="demi-modal hide" data-backdrop="false">
+<div id="settingsDemiModal" class="demi-modal fade" data-backdrop="false">
   <a href="javascript: void(0)" data-dismiss="modal" class="pull-right" style="margin: 10px"><i class="fa fa-times"></i></a>
   <div class="modal-body">
     <div class="row-fluid">
@@ -1600,6 +1601,7 @@ ${ dashboard.layout_skeleton() }
     </div>
 
   </div>
+  <div><a class="pointer demi-modal-chevron" data-dismiss="modal"><i class="fa fa-chevron-up"></i></a></div>
 </div>
 
 
@@ -1643,7 +1645,7 @@ ${ dashboard.layout_skeleton() }
 </script>
 
 
-<div id="timeSettingsDemiModal" class="demi-modal hide" data-backdrop="false">
+<div id="timeSettingsDemiModal" class="demi-modal fade" data-backdrop="false">
   <a href="javascript: void(0)" data-dismiss="modal" class="pull-right" style="margin: 10px"><i class="fa fa-times"></i></a>
   <div class="modal-body">
     <div class="row-fluid">
@@ -1705,6 +1707,7 @@ ${ dashboard.layout_skeleton() }
     </div>
 
   </div>
+  <div><a class="pointer demi-modal-chevron" data-dismiss="modal"><i class="fa fa-chevron-up"></i></a></div>
 </div>
 
 <div id="fieldAnalysis" class="popover mega-popover right">

+ 17 - 4
desktop/core/src/desktop/static/desktop/css/hue3.css

@@ -1633,9 +1633,9 @@ html.modal-open {
   border-bottom-right-radius: 0px;
   border-bottom-left-radius: 0px;
   outline: none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
+  -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.75);
+  -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.75);
+  box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.75);
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding-box;
   background-clip: padding-box;
@@ -1645,10 +1645,13 @@ html.modal-open {
   width: 500px;
   left: 50%;
   margin-left: -250px;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
 }
 
 .demi-modal.fade {
-  top: -25%;
+  top: -500px;
   -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
   -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
   -o-transition: opacity 0.3s linear, top 0.3s ease-out;
@@ -1679,6 +1682,16 @@ html.modal-open {
   padding: 10px;
 }
 
+.demi-modal-chevron {
+  text-align:center;
+  width: 100%;
+  display: table;
+}
+
+.demi-modal-chevron:hover {
+  background-color: #F6F6F6;
+}
+
 .control-group.error .input-prepend .add-on i, .control-group.error .input-append .add-on i {
   color: #fff;
 }