Deploying to gh-pages from @ da8400c 🚀

node-projects · May 2, 2024 · f470698 · f470698
1 parent f69756e
commit f470698
Show file tree

Hide file tree

Showing 51 changed files with 341 additions and 220 deletions.
diff --git a/assets/dockspawn.css b/assets/dockspawn.css
@@ -4,4 +4,38 @@
 
 .dockspan-tab-handle-text {
   margin-top: 0;
+}
+
+.splitbar-vertical {
+  background-color: #23252a !important;
+}
+
+.panel-titlebar {
+  display: flex;
+  align-items: end;
+}
+
+.dockspan-tab-handle-list-container {
+  background-color: rgb(44, 46, 53) !important;
+}
+
+.dockspan-tab-content {
+  background-color: rgb(44, 46, 53) !important;
+}
+
+.dockspan-tab-host {
+  background-color: rgb(44, 46, 53) !important;
+}
+
+.dockspan-tab-handle-active {
+  background-color: #434651 !important;
+}
+
+.dockspan-tab-handle {
+  display: flex;
+  align-items: center;
+}
+
+.dockspan-tab-handle-close-button::after {
+  top: 0;
 }
diff --git a/index.html b/index.html
@@ -55,8 +55,6 @@
     importShim.addImportMap(importMap);
   </script>
 
-  <link rel="stylesheet" href="./node_modules/metro4-dist/css/metro-all.min.css">
-  <link rel="stylesheet" href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css">
   <link rel="stylesheet" href="./node_modules/dock-spawn-ts/lib/css/dock-manager-context-menu.css">
 
   <!-- Drag/Drop support on touch devices -->
@@ -161,72 +159,68 @@
       }
     }
   </style>
+
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+
+    nav {
+      background: rgb(44, 46, 53);
+      display: flex;
+      height: 38px;
+      padding: 5px;
+      gap: 0;
+      color: #98a1a8;
+    }
+    nav div {
+      display: flex;
+      align-items: center;
+      font-family: monospace;
+    }
+
+    nav button {
+      border: none;
+      background: transparent;
+    }
+
+    /* https://codepen.io/sosuke/pen/Pjoqqp - css filter generator */
+    nav button img {
+      height: 24px;
+      filter: invert(68%) sepia(15%) saturate(133%) hue-rotate(169deg) brightness(91%) contrast(91%);
+    }
+
+    nav button[disabled] img {
+      filter: invert(38%) sepia(1%) saturate(0%) hue-rotate(211deg) brightness(94%) contrast(85%);
+    }
+
+    nav button:not([disabled]) img:hover {
+      filter: invert(100%) sepia(2%) saturate(7432%) hue-rotate(100deg) brightness(112%) contrast(94%);
+    }
+
+    nav button:not([disabled]) img:active {
+      filter: invert(41%) sepia(92%) saturate(1090%) hue-rotate(335deg) brightness(99%) contrast(93%);
+    }
+  </style>
 </head>
 
 <body style="height: 100%;">
-  <nav id="configRibbonHeader" data-role="ribbonmenu" class="ribbon-menu" data-role-ribbonmenu="true"
-    style="width: 100%; background: rgb(245, 246, 247); border-bottom:solid 1px rgb(218, 219, 220);">
-    <div class="content-holder">
-      <div class="section active" style="height: 120px;">
-        <div class="group">
-          <button class="ribbon-button" data-command="new" disabled>
-            <span class="icon">
-              <span class="mif-file-empty fg-cyan"></span>
-            </span>
-            <span class="caption">new</span>
-          </button>
-          <button class="ribbon-button" data-command="newFixedWidth" disabled>
-            <span class="icon">
-              <span class="mif-file-empty fg-cyan"></span>
-            </span>
-            <span class="caption">new fixed</span>
-          </button>
-          <button class="ribbon-button" data-command="save" disabled>
-            <span class="icon">
-              <span class="mif-floppy-disk fg-cyan"></span>
-            </span>
-            <span class="caption">save</span>
-          </button>
-          <span class="title">file</span>
-        </div>
-        <div class="group">
-          <button class="ribbon-button" data-command="paste" disabled>
-            <span class="icon">
-              <span class="mif-paste fg-cyan"></span>
-            </span>
-            <span class="caption">paste</span>
-          </button>
-          <div class="group flex-column">
-            <button class="ribbon-icon-button" data-command="cut" disabled>
-              <span class="icon">
-                <span class="mif-cut fg-cyan"></span>
-              </span>
-              <span class="caption">cut</span>
-            </button>
-            <button class="ribbon-icon-button" data-command="copy" disabled>
-              <span class="icon">
-                <span class="mif-copy fg-cyan"></span>
-              </span>
-              <span class="caption">copy</span>
-            </button>
-          </div>
-          <span class="title">clipboard</span>
-        </div>
-        <div class="group flex-column">
-          <button class="ribbon-icon-button" data-command="undo" disabled title="click and hold to see the undo list">
-            <span class="icon">
-              <span class="mif-undo fg-cyan"></span>
-            </span>
-            <span class="caption">undo</span>
-          </button>
-          <button class="ribbon-icon-button" data-command="redo" disabled title="click and hold to see the redo list">
-            <span class="icon">
-              <span class="mif-redo fg-cyan"></span>
-            </span>
-            <span class="caption">redo</span>
-          </button>
-          <span class="title">edit</span>
-        </div>
+  <nav>
+    <button data-command="new" title="new"><img src="./node_modules/@node-projects/web-component-designer/assets/icons/file.svg"></button>
+    <button data-command="save" title="save" disabled><img src="./node_modules/@node-projects/web-component-designer/assets/icons/save.svg"></button>
+    <div style="margin-left: 30px;">
+      web-component-designer
+    </div>
+    <button style="margin-left: 30px;" data-command="paste" title="paste" disabled><img
+        src="./node_modules/@node-projects/web-component-designer/assets/icons/paste.svg"></button>
+    <button data-command="cut" title="cut" disabled><img src="./node_modules/@node-projects/web-component-designer/assets/icons/cut.svg"></button>
+    <button data-command="copy" title="copy" disabled><img src="./node_modules/@node-projects/web-component-designer/assets/icons/copy.svg"></button>
+    <button data-command="delete" title="delete" disabled><img src="./node_modules/@node-projects/web-component-designer/assets/icons/delete.svg"></button>
+    <button style="margin-left: 10px;" data-command="undo" disabled title="click and hold to see the undo list"><img
+        src="./node_modules/@node-projects/web-component-designer/assets/icons/undo.svg"></button>
+    <button data-command="redo" disabled title="click and hold to see the redo list"><img
+        src="./node_modules/@node-projects/web-component-designer/assets/icons/redo.svg"></button>
+    <!--
         <div class="group flex-column">
           <div class="group" style="display: grid; grid-template-columns: auto auto auto auto auto auto auto;">
             <button class="tool-button" data-command="arrangeLeft" title="align left"
@@ -274,39 +268,11 @@
               disabled></button>
           </div>
           <span class="title">layout</span>
-        </div>
-        <div class="group flex-column">
-          <button class="ribbon-button" id="btnLogoff" data-command="screenshot">
-            <span class="icon">
-              <span class="mif-image fg-cyan"></span>
-            </span>
-          </button>
-          <span class="title">screenshot</span>
-        </div>
-        <div class="group flex-column">
-          <p style="font-size: 11px; font-family: monospace;">
-            ALT + Click -> access elements below<br>
-            CTL + DragElements -> Disable Snapline placement
-          </p>
-          <span class="title">info</span>
-
-        </div>
-        <div style="position: absolute; right: 0;">
-          <div class="group" style="height: 111px; border-left: 1px solid #dadbdc; inline-size: fit-content;">
-            <button class="ribbon-button" id="btnLogoff" data-command="github">
-              <span class="icon">
-                <span class="mif-github fg-cyan"></span>
-              </span>
-              <span>source</span>
-
-            </button>
-            <span class="title">source</span>
-          </div>
-        </div>
-      </div>
-    </div>
+        </div>-->
+    <button style="margin-left: 10px;" data-command="screenshot"><img src="./node_modules/@node-projects/web-component-designer/assets/icons/screenshot.svg"></button>
+    <button style="margin-left: 10px;" data-command="github"><img src="./node_modules/@node-projects/web-component-designer/assets/icons/github.svg"></button>
   </nav>
-  <node-projects-app-shell id="shell" style="height: calc(100% - 121px); width: 100%; position: absolute;">
+  <node-projects-app-shell id="shell" style="height: calc(100% - 38px); width: 100%; position: absolute;">
   </node-projects-app-shell>
   <div id="load"
     style="position: absolute; width: 100%; height: 100%; z-index: 9999999999; top: 0; left: 0; background: white;">

diff --git a/...es/@node-projects/web-component-designer/assets/icons/alignHorizontalCenter.svg b/...es/@node-projects/web-component-designer/assets/icons/alignHorizontalCenter.svg
diff --git a/...ules/@node-projects/web-component-designer/assets/icons/alignHorizontalLeft.svg b/...ules/@node-projects/web-component-designer/assets/icons/alignHorizontalLeft.svg
diff --git a/...les/@node-projects/web-component-designer/assets/icons/alignHorizontalRight.svg b/...les/@node-projects/web-component-designer/assets/icons/alignHorizontalRight.svg
diff --git a/...ules/@node-projects/web-component-designer/assets/icons/alignVerticalBottom.svg b/...ules/@node-projects/web-component-designer/assets/icons/alignVerticalBottom.svg
diff --git a/...ules/@node-projects/web-component-designer/assets/icons/alignVerticalCenter.svg b/...ules/@node-projects/web-component-designer/assets/icons/alignVerticalCenter.svg
diff --git a/...modules/@node-projects/web-component-designer/assets/icons/alignVerticalTop.svg b/...modules/@node-projects/web-component-designer/assets/icons/alignVerticalTop.svg
diff --git a/node_modules/@node-projects/web-component-designer/assets/icons/copy.svg b/node_modules/@node-projects/web-component-designer/assets/icons/copy.svg
diff --git a/node_modules/@node-projects/web-component-designer/assets/icons/cut.svg b/node_modules/@node-projects/web-component-designer/assets/icons/cut.svg
diff --git a/node_modules/@node-projects/web-component-designer/assets/icons/delete.svg b/node_modules/@node-projects/web-component-designer/assets/icons/delete.svg
diff --git a/node_modules/@node-projects/web-component-designer/assets/icons/file.svg b/node_modules/@node-projects/web-component-designer/assets/icons/file.svg
diff --git a/node_modules/@node-projects/web-component-designer/assets/icons/github.svg b/node_modules/@node-projects/web-component-designer/assets/icons/github.svg
diff --git a/...les/@node-projects/web-component-designer/assets/icons/horizontalDistribute.svg b/...les/@node-projects/web-component-designer/assets/icons/horizontalDistribute.svg
diff --git a/node_modules/@node-projects/web-component-designer/assets/icons/moveFirst.svg b/node_modules/@node-projects/web-component-designer/assets/icons/moveFirst.svg
diff --git a/node_modules/@node-projects/web-component-designer/assets/icons/moveLeft.svg b/node_modules/@node-projects/web-component-designer/assets/icons/moveLeft.svg
diff --git a/node_modules/@node-projects/web-component-designer/assets/icons/paste.svg b/node_modules/@node-projects/web-component-designer/assets/icons/paste.svg
diff --git a/node_modules/@node-projects/web-component-designer/assets/icons/redo.svg b/node_modules/@node-projects/web-component-designer/assets/icons/redo.svg
diff --git a/node_modules/@node-projects/web-component-designer/assets/icons/rotateLeft.svg b/node_modules/@node-projects/web-component-designer/assets/icons/rotateLeft.svg
diff --git a/node_modules/@node-projects/web-component-designer/assets/icons/rotateRight.svg b/node_modules/@node-projects/web-component-designer/assets/icons/rotateRight.svg
diff --git a/node_modules/@node-projects/web-component-designer/assets/icons/save.svg b/node_modules/@node-projects/web-component-designer/assets/icons/save.svg
diff --git a/node_modules/@node-projects/web-component-designer/assets/icons/screenshot.svg b/node_modules/@node-projects/web-component-designer/assets/icons/screenshot.svg
diff --git a/node_modules/@node-projects/web-component-designer/assets/icons/undo.svg b/node_modules/@node-projects/web-component-designer/assets/icons/undo.svg
diff --git a/...dules/@node-projects/web-component-designer/assets/icons/verticalDistribute.svg b/...dules/@node-projects/web-component-designer/assets/icons/verticalDistribute.svg
diff --git a/node_modules/@node-projects/web-component-designer/assets/icons/zoomIn.svg b/node_modules/@node-projects/web-component-designer/assets/icons/zoomIn.svg
diff --git a/node_modules/@node-projects/web-component-designer/assets/icons/zoomOut.svg b/node_modules/@node-projects/web-component-designer/assets/icons/zoomOut.svg
diff --git a/node_modules/@node-projects/web-component-designer/assets/icons/ç.svg b/node_modules/@node-projects/web-component-designer/assets/icons/ç.svg
diff --git a/...les/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js b/...les/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js
diff --git a/...s/@node-projects/web-component-designer/dist/elements/services/DefaultServiceBootstrap.js b/...s/@node-projects/web-component-designer/dist/elements/services/DefaultServiceBootstrap.js