Always show share button + warn about potential errors

Author: Powell-v2

web/blocks.html

@@ -43,13 +43,13 @@
             <a id="newButton" class="cw-button red">
               <i class="mdi mdi-18px mdi-plus"></i>&nbsp; New
             </a>
-            <a id="saveButton" class="cw-button blue" style="display: none;">
+            <a id="saveButton" class="cw-button blue" style="display: none">
               <i class="mdi mdi-18px mdi-cloud-upload"></i>&nbsp; Save
             </a>
             <a id="saveAsButton" class="cw-button blue">
               <i class="mdi mdi-18px mdi-dots-horizontal"></i>&nbsp; Save As
             </a>
-            <a id="deleteButton" class="cw-button red" style="display: none;">
+            <a id="deleteButton" class="cw-button red" style="display: none">
               <i class="mdi mdi-18px mdi-delete"></i>&nbsp; Delete
             </a>
           </div>
@@ -59,10 +59,10 @@
         <div
           class="dropbox ui-layout-center"
           id="blocklyDiv"
-          style="height: 84%; width: 100%;"
+          style="height: 84%; width: 100%"
         ></div>
 
-        <div id="result" style="display: none;" class="ui-layout-east">
+        <div id="result" style="display: none" class="ui-layout-east">
           <div
             id="obsolete-code-alert"
             class="obsolete-code-alert-fadeout"
@@ -72,19 +72,19 @@
             class="dropbox"
             width="500"
             height="500"
-            style="display: none;"
+            style="display: none"
           ></iframe>
 
           <pre
             id="message"
             class="dropbox"
-            style="width: 100%; min-height: 100px; padding: 5px; display: none;"
+            style="width: 100%; min-height: 100px; padding: 5px; display: none"
           ></pre>
 
           <span
             ><a
               type="button"
-              style="margin-top: 5px;"
+              style="margin-top: 5px"
               id="editButton"
               target="_blank"
               class="cw-button blue"
@@ -95,7 +95,7 @@
           <pre
             id="genCode"
             class="dropbox cm-s-default CodeMirror"
-            style="width: 100%; height: 100%; padding: 10px;"
+            style="width: 100%; height: 100%; padding: 10px"
           ></pre>
         </div>
       </div>
@@ -105,13 +105,13 @@
             id="navButton"
             class="cw-button blue"
             onclick="window.mainLayout.toggle('west')"
-            style="display: none;"
+            style="display: none"
             ><i class="mdi mdi-18px mdi-menu"></i
           ></a>
           <a id="signin" class="cw-button blue"
             ><i class="mdi mdi-18px mdi-login"></i>&nbsp; Sign In</a
           >
-          <a id="signout" class="cw-button blue" style="display: none;"
+          <a id="signout" class="cw-button blue" style="display: none"
             ><i class="mdi mdi-18px mdi-logout"></i>&nbsp; Sign Out</a
           >
           <a id="docButton" class="cw-button blue"
@@ -130,11 +130,11 @@
           <a
             id="shareFolderButton"
             class="cw-button yellow"
-            style="display: none;"
+            style="display: none"
             ><i class="mdi mdi-18px mdi-folder-outline"></i>&nbsp; Share
             Folder</a
           >
-          <a id="shareButton" class="cw-button yellow" style="display: none;"
+          <a id="shareButton" class="cw-button yellow"
             ><i class="mdi mdi-18px mdi-share"></i>&nbsp; Share</a
           >
           <a id="btnStop" class="cw-button red"
@@ -233,7 +233,7 @@
       src="mirrored/cdn.jsdelivr.net/npm/promise-polyfill@7.1.0/dist/promise.min.js"
     ></script>
 
-    <xml id="toolbox" style="display: none;">
+    <xml id="toolbox" style="display: none">
       <category name="Programs">
         <block type="cwDrawingOf"></block>
         <block type="cwActivityOf"></block>

web/css/codeworld.css

@@ -259,6 +259,10 @@ body {
 }
 
 .cw-button {
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  justify-content: left;
   border-radius: 4px;
   cursor: pointer;
   text-align: left;
@@ -268,13 +272,18 @@ body {
   margin: 3px 3px 0px 3px;
   padding: 6px 6px 6px 6px;
   text-decoration: none;
-  display: inline-block;
   font-weight: bold;
   color: var(--cw-button-color);
   white-space: nowrap;
   overflow: hidden;
 }
 
+.cw-button.cw-button--disabled {
+  color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(0, 0, 0, 0.3) !important;
+  pointer-events: none;
+}
+
 #toolbar .cw-button {
   margin-bottom: 3px;
   margin-top: 0px;

web/env.html

@@ -51,20 +51,16 @@
             <a id="newButton" class="cw-button red">
               <i class="mdi mdi-18px mdi-plus"></i>&nbsp; New
             </a>
-            <a id="saveButton" class="cw-button blue" style="display: none;">
+            <a id="saveButton" class="cw-button blue" style="display: none">
               <i class="mdi mdi-18px mdi-cloud-upload"></i>&nbsp; Save
             </a>
             <a id="saveAsButton" class="cw-button blue">
               <i class="mdi mdi-18px mdi-dots-horizontal"></i>&nbsp; Save As
             </a>
-            <a id="deleteButton" class="cw-button red" style="display: none;">
+            <a id="deleteButton" class="cw-button red" style="display: none">
               <i class="mdi mdi-18px mdi-delete"></i>&nbsp; Delete
             </a>
-            <a
-              id="downloadButton"
-              class="cw-button blue"
-              style="display: none;"
-            >
+            <a id="downloadButton" class="cw-button blue" style="display: none">
               <i class="mdi mdi-18px mdi-download"></i>&nbsp; Download
             </a>
           </div>
@@ -75,7 +71,7 @@
           <textarea id="editor" placeholder="Type your code here..."></textarea>
         </form>
 
-        <div id="result" style="display: none;" class="ui-layout-east">
+        <div id="result" style="display: none" class="ui-layout-east">
           <div class="runner-box">
             <div id="obsolete-code-alert" class="obsolete-code-alert-fadeout">
               Changes detected. Press 'Run' button to compile your current code.
@@ -95,13 +91,13 @@
             id="navButton"
             class="cw-button blue"
             onclick="window.mainLayout.toggle('west')"
-            style="display: none;"
+            style="display: none"
             ><i class="mdi mdi-18px mdi-menu"></i
           ></a>
           <a id="signin" class="cw-button blue"
             ><i class="mdi mdi-18px mdi-login"></i>&nbsp; Sign In</a
           >
-          <a id="signout" class="cw-button blue" style="display: none;"
+          <a id="signout" class="cw-button blue" style="display: none"
             ><i class="mdi mdi-18px mdi-logout"></i>&nbsp; Sign Out</a
           >
           <a id="docButton" class="cw-button blue"
@@ -127,32 +123,32 @@
           <a
             id="shareFolderButton"
             class="cw-button yellow"
-            style="display: none;"
+            style="display: none"
             ><i class="mdi mdi-18px mdi-folder-outline"></i>&nbsp; Share
             Folder</a
           >
           <span
             ><i
               class="mdi mdi-24px mdi-record"
-              style="display: none;"
+              style="display: none"
               id="recordIcon"
             >
               <!--Recording Icon--></i
             ></span
           >
-          <a id="startRecButton" style="display: none;" class="cw-button red"
+          <a id="startRecButton" style="display: none" class="cw-button red"
             ><i class="mdi mdi-18px mdi-record"></i>&nbsp; Start Recording</a
           >
-          <a id="stopRecButton" style="display: none;" class="cw-button yellow"
+          <a id="stopRecButton" style="display: none" class="cw-button yellow"
             ><i class="mdi mdi-18px mdi-stop"></i>&nbsp; Stop Recording</a
           >
-          <a id="shareButton" class="cw-button yellow" style="display: none;"
+          <a id="shareButton" class="cw-button yellow cw-button--disabled"
             ><i class="mdi mdi-18px mdi-share"></i>&nbsp; Share</a
           >
           <a
             id="inspectButton"
             class="inspect-button cw-button cyan"
-            style="display: none;"
+            style="display: none"
             ><i class="mdi mdi-18px mdi-magnify"></i>&nbsp; Inspect</a
           >
           <a id="stopButton" class="cw-button red"

web/js/codeworld.js

@@ -491,6 +491,14 @@ function initCodeworld() {
     }
     window.reparseTimeoutId = setTimeout(parseSymbolsFromCurrentCode, 1500);
 
+    const shareButton = document.getElementById('shareButton');
+
+    if (doc.getValue()) {
+      shareButton.classList.remove('cw-button--disabled');
+    } else {
+      shareButton.classList.add('cw-button--disabled');
+    }
+
     updateDocumentTitle(isEditorClean);
     updateProjectChangeMark(isEditorClean);