@silexlabs/silex 3.0.1-alpha.0 → 3.0.1

package/src/css/grapesjs-plugins.scss

@@ -0,0 +1,227 @@
+@use "variables" as *;
+
+// grapesjs-style-bg
+@use "grapick/dist/grapick.min.css";
+
+// grapesjs-style-border
+@mixin square-borders-before {
+  display: block;
+  content: '' !important;
+  border: 2px solid $tertiaryColor;
+  width: 10px;
+  height: 10px;
+  margin: auto;
+}
+.fa-arrows::before {
+  @include square-borders-before;
+  border-color: $secondaryColor;
+}
+.fa-long-arrow-up::before {
+  @include square-borders-before;
+  border-top-color: $secondaryColor;
+}
+.fa-long-arrow-down::before {
+  @include square-borders-before;
+  border-bottom-color: $secondaryColor;
+}
+.fa-long-arrow-left::before {
+  @include square-borders-before;
+  border-left-color: $secondaryColor;
+}
+.fa-long-arrow-right::before {
+  @include square-borders-before;
+  border-right-color: $secondaryColor;
+}
+
+// grapesjs-notifications
+.gjs-editor .gjs-notification {
+  max-height: initial;
+  text-align: left;
+}
+.gjs-editor .gjs-notification,
+.gjs-editor .gjs-notification .gjs-sm-header,
+.gjs-editor .gjs-notification .gjs-notification__item,
+.gjs-editor .gjs-notification .gjs-notification__group > details,
+.gjs-editor .gjs-notification .gjs-notification__group > details > ul,
+.gjs-editor .gjs-notification .gjs-notification__group > details > summary,
+.gjs-editor .gjs-notification .gjs-notification__group {
+  padding: 0;
+  margin: 0;
+}
+.gjs-editor .gjs-notification .gjs-notification__group,
+.gjs-editor .gjs-notification .gjs-notification__item {
+  margin: 10px 0;
+  padding: 10px 0;
+}
+
+.gjs-editor .gjs-notification .gjs-notification__group .gjs-notification__item {
+  margin-left: 10px;
+}
+
+// publication-ui
+@keyframes pub-blink {
+  from {
+    opacity: 0.25;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+#publish-dialog {
+  .notice {
+    margin: 10px 0;
+    background-color: rgba(255, 166, 0, 0.2);
+    border-radius: 5px;
+    padding: 10px;
+  }
+
+  progress {
+    width: 100%;
+    border-radius: 50px;
+    border: none;
+    height: 5px;
+    animation: pub-blink 0.33s infinite alternate;
+    background-color: $tertiaryColor;
+  }
+
+  progress::-webkit-progress-bar {
+    background-color: $tertiaryColor;
+  }
+
+  progress::-moz-progress-bar {
+    background-color: $tertiaryColor;
+  }
+
+  header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    font-size: 0.95rem;
+    transition: 200ms;
+
+    svg {
+      width: 1.4rem;
+      vertical-align: middle;
+      margin-right: 5px;
+    }
+
+    button {
+      border: solid 2px #484848;
+      border-radius: 50px;
+      padding: 4px 9px;
+      background-color: #444;
+      color: $secondaryColor;
+    }
+
+    .connector {
+      color: $quaternaryColor;
+    }
+  }
+
+  main {
+    max-height: none;
+
+    .buttons {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: auto;
+      grid-row-gap: 0.5rem;
+      transition: 200ms;
+    }
+
+    svg {
+      height: 0.9rem;
+      margin-left: 5px;
+    }
+
+    h3 {
+      margin: 0;
+    }
+
+    p {
+      margin-top: 0;
+    }
+
+    details {
+      border-radius: 5px;
+      border: solid #222 2px;
+      background-color: #222;
+      margin: 10px 0;
+      padding: 10px;
+      word-break: break-word;
+      overflow-y: auto;
+      max-height: 200px;
+      position: relative;
+
+      pre {
+        word-break: break-word;
+      }
+
+      summary {
+        font-size: 0.95rem;
+        opacity: 0.7;
+      }
+
+      .logs {
+        font-family: monospace;
+
+        * {
+          margin: 0;
+          padding-top: 3px;
+          padding-bottom: 3px;
+          border-radius: 5px;
+          list-style: '-';
+
+          &:hover {
+            transition: 200ms;
+            background-color: rgba(255, 255, 255, 0.05);
+          }
+        }
+      }
+
+      &:hover {
+        transition: 200ms;
+        border-color: $lighterPrimaryColor;
+        background-color: $darkerPrimaryColor;
+      }
+
+      * {
+        transition: 200ms;
+      }
+    }
+
+    details[open] summary {
+      margin-bottom: 10px;
+    }
+
+    .silex-button {
+      padding: 10px;
+      width: 100%;
+      transition: 200ms;
+
+      &:hover {
+        filter: brightness(1.2);
+      }
+
+      &:active {
+        filter: brightness(0.8);
+      }
+    }
+
+    .silex-button--primary {
+      background-color: $tertiaryColor;
+    }
+  }
+}
+
+// Adapting the layout of the suggestion list
+.gjs-suggest {
+  max-height: 30vh;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  padding-top: 7px;
+  border-bottom: solid $primaryColor 7px;
+}

package/src/css/grapesjs.scss

@@ -1,4 +1,5 @@
 @use "variables" as *;
+@use "grapesjs-plugins";
 
 #gjs {
   flex: 1 1 auto;
@@ -22,6 +23,7 @@
     }
   }
 }
+
 .#{$cv-prefix}canvas,
 .#{$pn-prefix}panel,
 .#{$pn-prefix}commands {
@@ -34,11 +36,167 @@
   left: auto;
 }
 .#{$cv-prefix}canvas {
-  width: calc(85% - $projectBarWidth);
+  width: calc(100% - var(--viewsPanelWidth) - $projectBarWidth);
 }
 .#{$pn-prefix}devices-c {
+  display: flex;
   .#{$prefix}device-label {
     display: none;
   }
 }
+.#{$pn-prefix}views-container {
+}
+
+.gjs-editor {
+  font-family: $fontFamily;
+  font-size: 0.75rem;
+}
+
+// Dialogs
+.gjs-mdl-header {
+  background-color: $primaryColor;
+  color: $secondaryColor;
+  padding: 20px;
+  border-bottom: 1px solid $lighterPrimaryColor;
+  .gjs-mdl-btn-close {
+    top: 15px;
+  }
+}
+
+// Inside the canvas
+.gjs-toolbar {
+  background-color: $tertiaryColor;
+}
+.gjs-resizer-h {
+  border-color: $tertiaryColor;
+}
+.gjs-com-badge, .gjs-com-badge-red, .gjs-badge {
+    background-color: $tertiaryColor;
+}
+.gjs-cv-canvas .gjs-highlighter, .gjs-cv-canvas .gjs-highlighter-sel {
+    outline: 1px solid $tertiaryColor;
+}
+
+// Property panels
+.gjs-pn-buttons {
+  justify-content: unset;
+}
+
+.gjs-pn-views-container, .gjs-pn-views {
+  width: var(--viewsPanelWidth);
+}
+
+.gjs-pn-project-bar-container {
+  width: var(--viewsProjectPanelWidth);
+}
+
+.gjs-pn-options {
+  right: var(--viewsPanelWidth);
+}
+
+// Sticky CSS tags section
+.top-style-section {
+  position: sticky;
+  top: -1px; /* Fixes a visual gap on the top */
+  border-bottom: solid $lighterPrimaryColor 1px;
+  background-color: $primaryColor;
+  box-shadow: 0 0 15px 0 #00000060;
+  z-index: 999;
+}
+.gjs-clm-label-sel {
+  opacity: 0.5;
+}
+.gjs-clm-sels-info {
+  padding: 7px 0;
+  margin: 0;
+  overflow-x: scroll;
+}
+.gjs-clm-sel-rule {
+  word-break: break-all;
+}
+#gjs-clm-tags-field.gjs-field {
+  margin: 0;
+}
+.gjs-clm-tags {
+  padding-top: 7px;
+  padding-bottom: 0;
+}
+#gjs-clm-up {
+  margin-top: 0;
+}
+
+/*
+*/
+// Font awesome 5 fix
+// https://github.com/GrapesJS/grapesjs/issues/644#issuecomment-833215677
+.gjs-editor-cont .fa {
+	font-weight: 400;
+}
+
+.fa-square-o:before {
+	content: "\f0c8";
+}
+
+.fa-trash-o:before {
+	content: "\f1f8";
+}
+
+.fa-map-o:before {
+	content: "\f279";
+}
+
+.fa-youtube-play:before {
+	content: "\f04b";
+}
+
+/* Fix: open close chevrons: FA5 has the tags in different order ?!!? */
+.fa-chevron-right:before {
+	content: "\f054";
+}
+
+.fa-chevron-down:before {
+	content: "\f078";
+}
+
+// Font awesome 6 fix
+.fa-cog:before {
+  font-weight: 900;
+}
 
+.fa-paint-brush:before {
+  font-weight: 900;
+}
+
+.fa-arrows-alt:before {
+	content: "\f065";
+  font-weight: 900;
+}
+
+.fa-caret-down:before {
+  content: "\f0d7";
+  font-weight: 900;
+}
+
+.fa-caret-right:before {
+  content: "\f0da";
+  font-weight: 900;
+}
+
+.fa-trash:before {
+  content: "\f2ed";
+  font-weight: 900;
+}
+
+.fa-list:before {
+  content: "\f03a";
+  font-weight: 900;
+}
+
+.fa-sign-out:before {
+  content: "\f08b";
+  font-weight: 900;
+}
+
+.fa-diamond:before {
+  content: "\f3a5";
+}

package/src/css/index.scss

@@ -1,14 +1,25 @@
 /* Normalize css */
 @use "normalize.css/normalize";
+
+@use "_variables";
+//@use "light";
 @use "grapesjs/src/styles/scss/main";
 
 /* Silex styles imports */
 @use "silex";
 @use "loader";
+@use "footer";
 @use "dialog";
-@use "grapesjs";
+@use "fonts";
 @use "project-bar";
 @use "page-panel";
+@use "website-info";
+@use "grapesjs";
+
+//@use "grapesjs-light";
+
+// Ubuntu Fonts
+@use "@fontsource/ubuntu";
 
 .container-png::before {
   content: " ";

package/src/css/light.scss

@@ -0,0 +1,7 @@
+$primaryColor: #DDD;
+$secondaryColor: #222;
+$tertiaryColor: #B2A3FE;
+$quaternaryColor: #A1D9FF;
+$quaternaryColor: #FF3333;
+$darkerPrimaryColor: #E0E0E0;
+$lighterPrimaryColor: #F0F0F0;

package/src/css/loader.scss

@@ -7,4 +7,6 @@
   color: variables.$secondaryColor;
   justify-content: center;
   align-items: center;
+  background-color: variables.$primaryColor;
+  z-index: variables.$z-loader;
 }

package/src/css/project-bar.scss

@@ -1,14 +1,17 @@
 @use "variables" as *;
 
 // squeeze the stage iframe when panel is open
-iframe.enable-squeeze.gjs-frame {
-  transition: width $transitionSpeedMedium, height $transitionSpeedMedium, left $transitionSpeedMedium;
-}
-iframe.enable-squeeze.silex-squeeze-left {
-  --project-panel-width: max(150px, 15.7%); /* Why 16? Also sass vars do not work here */
-  left: var(--project-panel-width);
-  width: calc(100% - var(--project-panel-width));
+//.silex-squeeze-left .gjs-frame-wrapper {
+//  margin-left: 18%;
+//  width: auto;
+//}
+.silex-squeeze-left .gjs-cv-canvas {
+  left: calc(var(--viewsProjectPanelWidth) + 35px);
+  width: auto;
+  right: var(--viewsPanelWidth);
 }
+
+
 // button bar
 .#{$pn-prefix}project-bar-panel {
   width: $projectBarWidth;
@@ -21,13 +24,17 @@ iframe.enable-squeeze.silex-squeeze-left {
       flex: 1;
     }
     .#{$pn-prefix}btn {
-      margin: 5px 0 0;
+      margin: 5px 0 5px 0px;
       padding: 5px;
       &.#{$pn-prefix}active {
         background-color: $lighterPrimaryColor;
         width: $projectBarWidth;
         box-shadow: none;
-     }
+      }
+    }
+    .#{$pn-prefix}btn.project-bar__dirty {
+      background-color: $quaternaryColor;
+      color: white;
     }
   }
   .logo {
@@ -35,15 +42,30 @@ iframe.enable-squeeze.silex-squeeze-left {
     background-repeat: no-repeat;
     background-position: center center;
     background-color: transparent;
+    background-size: contain;
   }
 }
 
+// Resize options project panel button
+.viewsOptionsProjectPanel__size-btn::before {
+  content: '→';
+}
+.viewsOptionsProjectPanel__size-btn {
+  z-index: $z-views-options-buttons;
+  right: auto;
+  left: 0;
+}
+// For fixed block size after project panel resizing (instead of default value 45%)
+.gjs-block {
+  width: 84px;
+}
+
 // panels
 .#{$pn-prefix}project-bar-container {
   top: $topBarHeight;
   width: $projectPanelWidth;
   min-width: $projectPanelMinWidth;
-  height: calc(100% - $topBarHeight);
+  height: calc(100% - $topBarHeight - $footerHeight);
   background-color: $lighterPrimaryColor;
   &:not(.gjs-hidden) {
     display: flex; // let the child take the whole height
@@ -81,13 +103,7 @@ iframe.enable-squeeze.silex-squeeze-left {
       }
       .project-bar__panel-header-button {
         cursor: pointer;
-        font-size: large;
-        font-weight: 400;
         span {
-          position: relative;
-          left: -6px;
-          top: 6px;
-          font-weight: bolder;
           background-color: #444;
           border-radius: 100%;
           display: inline-block;

package/src/css/silex.scss

@@ -4,6 +4,9 @@
 .silex-workspace {
   @include mixins.silex-ui-full;
   display: flex;
+  body {
+    font-family: $fontFamily;
+  }
   a {
     color: inherit;
   }
@@ -20,20 +23,53 @@
     font-size: 18px;
     font-weight: normal;
   }
+  //Better contrast than grapesjs default for select menu et input
+  select, input {
+    background-color: $darkerPrimaryColor;
+  }
+  .gjs-color-warn, .gjs-sm-sector .gjs-sm-field input, .gjs-clm-tags .gjs-sm-field input, .gjs-sm-sector .gjs-clm-field input, .gjs-clm-tags .gjs-clm-field input, .gjs-sm-sector .gjs-sm-field select, .gjs-clm-tags .gjs-sm-field select, .gjs-sm-sector .gjs-clm-field select, .gjs-clm-tags .gjs-clm-field select {
+    color: $secondaryColor;
+  }
 }
 
 .full-width {
   width: 100%;
 }
 
+// Resize options panel button
+.silex-workspace {
+  .gjs-pn-viewsOptions {
+      z-index: $z-views-options-buttons;
+      right: 0;
+      left: auto;
+
+      .viewsOptions__size-btn::before {
+        content: '←';
+      }
+    }
+}
+
+.silex-hidden {
+  /* do not really hide, because it breaks the code editor init in the site settings + for animation */
+  visibility: hidden;
+  position: absolute;
+  opacity: 0;
+  height: 10px;
+  width: 10px;
+  overflow: hidden;
+}
+
 // full screen settings
 .settings-dialog > div {
   max-width: none;
   width: 100%;
-  max-height: 100vh;
+  height: 100vh;
   overflow: auto;
   form.silex-form {
     padding-bottom: 100px; // leave space for fixed footer
+    textarea {
+      min-height: 250px;
+    }
   }
   .silex-form__element {
     padding: 10px 5px;
@@ -43,6 +79,7 @@
   }
   footer {
     position: fixed;
+    z-index: 10;
     bottom: 0;
     left: 0;
     width: 100%;
@@ -57,6 +94,10 @@
       font-size: x-small;
     }
   }
+  .CodeMirror {
+    min-height: 400px;
+    height: auto;
+  }
 }
 
 button.silex-button,
@@ -75,8 +116,16 @@ input.silex-button[type="submit"] {
   background-color: $lighterPrimaryColor;
   border-color: transparent;
   padding: 5px;
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px $tertiaryColor;
+  }
+  &:hover {
+    background-color: $darkerPrimaryColor;
+  }
 }
 
+.silex-button.disabled,
 .silex-button[disabled] {
   opacity: .8;
   cursor: unset;
@@ -92,6 +141,7 @@ input.silex-button[type="submit"] {
 
 .silex-button--size {
   max-height: 30px;
+  margin: 0 10px;
 }
 
 .silex-button--small {
@@ -107,11 +157,15 @@ input.silex-button[type="submit"] {
   display: block;
 }
 
+.silex-sidebar-dialog,
 .silex-bar {
   display: flex;
   &>* {
     margin: 5px;
   }
+  main {
+    width: 100%;
+  }
 }
 
 ol.silex-list,
@@ -119,15 +173,15 @@ ul.silex-list {
   list-style: none;
   margin: 0;
   padding: 0;
-  background-color: #575757;
+  //background-color: #575757;
   &>li {
     padding: 5px;
-    border-bottom: 1px solid #575757;
-    background-color: #444;
+    border-bottom: 1px solid $lighterPrimaryColor;
+    //background-color: #444;
     margin: 5px;
   }
   fieldset {
-    border-color: #575757;
+    border-color: $lighterPrimaryColor;
   }
   h4 { // badge-like
     display: inline-block;
@@ -152,6 +206,26 @@ ul.silex-list {
   }
 }
 
+ol.silex-list--menu,
+ul.silex-list--menu {
+  &>li {
+    padding: 15px;
+    margin: 0;
+    border: 1px solid transparent;
+    border-bottom-color: $lighterPrimaryColor;
+    text-align: center;
+    cursor: pointer;
+  }
+  &>li:first-child {
+    border-top-color: $lighterPrimaryColor;
+  }
+  .active,
+  &>li:hover {
+    color: $tertiaryColor;
+    background-color: $darkerPrimaryColor;
+  }
+}
+
 form.silex-form {
   display: flex;
   flex-direction: column;

package/src/css/website-info.scss

@@ -0,0 +1,14 @@
+@use "variables" as *;
+
+.gjs-website-meta {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 10px;
+  margin-right: 10px;
+  padding: 0 10px;
+  line-height: 1;
+  min-width: 100px;
+  border: 1px solid $lighterPrimaryColor;
+  background-color: $darkerPrimaryColor;
+}