Disable Save&Run button when not editable

Author: Marc J. Schmidt

Resources/public/build/app.js

@@ -164,6 +164,10 @@ export default class MainController {
     run() {
         var data = this.scope.model;
 
+        if (!this.scope.editable) {
+            return;
+        }
+
         this.scope.loading = true;
 
         if (!this.fiddleId) {

Resources/public/build/app.map

@@ -1279,6 +1279,11 @@ a, a:link {
   border-bottom: 1px dotted #e8e8e8;
   padding: 3px 2px; }
 
+.no-tables {
+  color: gray;
+  text-align: center;
+  padding: 50px 0; }
+
 button {
   background-color: #c3dceb;
   border: 0px;
@@ -1291,6 +1296,14 @@ button {
 button:hover {
   background-color: #b9cfde; }
 
+button.disabled,
+button.disabled:hover,
+button.disabled:active {
+  background-color: #c9e2f1;
+  color: #aab3c2;
+  cursor: default;
+  outline: 0; }
+
 td > div {
   margin: 5px;
   border: 1px solid #E0E0E0; }

Resources/public/controller/MainController.js

@@ -134,6 +134,12 @@ a, a:link {
     padding: 3px 2px;
 }
 
+.no-tables {
+    color: gray;
+    text-align: center;
+    padding: 50px 0;
+}
+
 button {
     background-color: #c3dceb;
     border: 0px;
@@ -144,11 +150,19 @@ button {
     border-radius: 0;
 }
 
-
 button:hover {
     background-color: #b9cfde;
 }
 
+button.disabled,
+button.disabled:hover,
+button.disabled:active {
+    background-color: #c9e2f1;
+    color: #aab3c2;
+    cursor: default;
+    outline: 0;
+}
+
 td > div {
     margin: 5px;
     border: 1px solid #E0E0E0;

Resources/public/css/layout.css

@@ -69,7 +69,7 @@
         <div class="app-actions">
             <button ng-click="mainController.newFiddle()">New</button>
             <button ng-click="mainController.forkFiddle()">Fork</button>
-            <button ng-click="mainController.run()">Save & Run</button>
+            <button ng-click="mainController.run()" ng-class="{'disabled': !editable}">Save & Run</button>
         </div>
         <div class="app-title">
             <input placeholder="Enter a Title ..." ng-model="model.title" type="text"/>
@@ -100,7 +100,7 @@
                         </table>
                     </tab>
                 </tabset>
-                <div ng-if="!fiddle.databaseInformation || !fiddle.databaseInformation.length">
+                <div ng-if="!fiddle.databaseInformation || !fiddle.databaseInformation.length" class="no-tables">
                     No Tables found.
                 </div>
             </div>