Эх сурвалжийг харах

HUE-1133 [pig] Unsaved ribbon

- Add unsaved message when refreshing or leaving the page
Abraham Elmahrek 12 жил өмнө
parent
commit
0fcf37a

+ 0 - 55
apps/oozie/static/css/workflow.css

@@ -90,61 +90,6 @@ ul {
   margin-left: 166px!important;
 }
 
-.ribbon-wrapper {
-  width: 85px;
-  height: 88px;
-  overflow: hidden;
-  position: fixed;
-  top: 74px;
-  right: -3px;
-  right: 20px\9; /* IE8 */
-  width: 125px\9; /* IE8 */
-  z-index: 1001;
-}
-
-.ribbon {
-  font: bold 15px sans-serif;
-  text-align: center;
-  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-  -webkit-transform: rotate(45deg);
-  -moz-transform:    rotate(45deg);
-  -ms-transform:     rotate(45deg);
-  -o-transform:      rotate(45deg);
-  position: relative;
-  padding: 7px 0;
-  left: -5px;
-  top: 15px;
-  width: 120px;
-  background-color: #da4f49;
-  *background-color: #bd362f;
-  background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
-  background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
-  background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
-  background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
-  background-repeat: repeat-x;
-  color: #ffffff;
-  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
-  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
-}
-
-.ribbon:before, .ribbon:after {
-  content: "";
-  border-top:   3px solid #c09853;
-  border-left:  3px solid transparent;
-  border-right: 3px solid transparent;
-  position:absolute;
-  bottom: -3px;
-}
-
-.ribbon:before {
-  left: 0;
-}
-.ribbon:after {
-  right: 0;
-}
-
 .control-group.error .CodeMirror {
   border: 1px solid #B94A48;
 }

+ 24 - 1
apps/pig/src/pig/templates/app.mako

@@ -160,6 +160,10 @@ ${ commonheader(None, "pig", user, "100px") | n,unicode }
     </div>
 
     <div class="span10">
+      <div class="ribbon-wrapper" data-bind="visible: isDirty">
+        <div class="ribbon">${ _('Unsaved') }</div>
+      </div>
+
       <div id="edit" class="section">
         <div class="alert alert-info"><h3>${ _('Edit') } '<span data-bind="text: currentScript().name"></span>'</h3></div>
         <form id="queryForm">
@@ -607,7 +611,10 @@ ${ commonheader(None, "pig", user, "100px") | n,unicode }
     });
 
     codeMirror.on("change", function () {
-      viewModel.currentScript().script(codeMirror.getValue());
+      if (viewModel.currentScript().script() != codeMirror.getValue()) {
+        viewModel.currentScript().script(codeMirror.getValue());
+        viewModel.isDirty(true);
+      }
     });
 
     showMainSection("editor");
@@ -908,6 +915,22 @@ ${ commonheader(None, "pig", user, "100px") | n,unicode }
 
   });
 
+  window.onbeforeunload = function (e) {
+    if (viewModel.isDirty()) {
+      var message = "${ _('You have unsaved changes in this pig script.') }";
+
+      if (!e) e = window.event;
+      e.cancelBubble = true;
+      e.returnValue = message;
+
+      if (e.stopPropagation) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+      return message;
+    }
+  };
+
   var _bottomAlertFade = -1;
   function showAlert(msg, extraClass) {
     var klass = "alert ";

+ 2 - 2
apps/pig/static/css/pig.css

@@ -66,5 +66,5 @@
 }
 
 .widget-content {
-    padding: 10px;
-  }
+  padding: 10px;
+}

+ 11 - 8
apps/pig/static/js/pig.ko.js

@@ -126,6 +126,7 @@ var PigViewModel = function (props) {
   self.completedScripts = ko.observableArray([]);
 
   self.isDashboardLoaded = false;
+  self.isDirty = ko.observable(false);
 
   var _defaultScript = {
     id: -1,
@@ -208,6 +209,7 @@ var PigViewModel = function (props) {
 
   self.saveScript = function () {
     callSave(self.currentScript());
+    viewModel.isDirty(false);
   };
 
   self.runScript = function () {
@@ -216,6 +218,7 @@ var PigViewModel = function (props) {
 
   self.copyScript = function () {
     callCopy(self.currentScript());
+    viewModel.isDirty(true);
   };
 
   self.confirmDeleteScript = function () {
@@ -427,14 +430,14 @@ var PigViewModel = function (props) {
       self.currentScript(new PigScript(_defaultScript));
       $(document).trigger("loadEditor");
     }
-    $.post(self.DELETE_URL,
-        {
-          ids: ids.join(",")
-        },
-        function (data) {
-          self.updateScripts();
-          $("#deleteModal").modal("hide");
-        }, "json");
+    $.post(self.DELETE_URL, {
+      ids: ids.join(",")
+    },
+    function (data) {
+      self.updateScripts();
+      $("#deleteModal").modal("hide");
+      viewModel.isDirty(false);
+    }, "json");
   }
 
   self.viewSubmittedScript = function (workflow) {

+ 55 - 0
desktop/core/static/css/hue2.css

@@ -490,6 +490,61 @@ ul.errorlist li {
     border-radius: 4px;
 }
 
+.ribbon-wrapper {
+  width: 85px;
+  height: 88px;
+  overflow: hidden;
+  position: fixed;
+  top: 74px;
+  right: -3px;
+  right: 20px\9; /* IE8 */
+  width: 125px\9; /* IE8 */
+  z-index: 1001;
+}
+
+.ribbon {
+  font: bold 15px sans-serif;
+  text-align: center;
+  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
+  -webkit-transform: rotate(45deg);
+  -moz-transform:    rotate(45deg);
+  -ms-transform:     rotate(45deg);
+  -o-transform:      rotate(45deg);
+  position: relative;
+  padding: 7px 0;
+  left: -5px;
+  top: 15px;
+  width: 120px;
+  background-color: #da4f49;
+  *background-color: #bd362f;
+  background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
+  background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
+  background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
+  background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
+  background-repeat: repeat-x;
+  color: #ffffff;
+  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
+  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
+  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
+}
+
+.ribbon:before, .ribbon:after {
+  content: "";
+  border-top:   3px solid #c09853;
+  border-left:  3px solid transparent;
+  border-right: 3px solid transparent;
+  position:absolute;
+  bottom: -3px;
+}
+
+.ribbon:before {
+  left: 0;
+}
+.ribbon:after {
+  right: 0;
+}
+
 
 /*********************************************************
  * From: http://datatables.net/blog/Twitter_Bootstrap