alchemy_cms 7.0.8 → 7.1.0.pre.b2

data/app/assets/stylesheets/alchemy/upload.scss

@@ -1,11 +1,6 @@
 .upload-button {
   display: inline-block;
 
-  #toolbar &,
-  #overlay_toolbar & {
-    vertical-align: top;
-  }
-
   label {
     cursor: pointer;
   }
@@ -25,114 +20,170 @@
   position: relative;
 
   &:after {
-    content: '';
+    align-items: center;
+    background-color: rgba($dark-gray, 0.6);
+    color: rgba(255, 255, 255, 0.6);
+    content: $ri-upload-cloud-line;
+    display: flex;
+    font-family: "remixicon";
+    font-size: 80px;
+    justify-content: center;
+    height: 100%;
+    left: 0;
+    pointer-events: none;
     position: absolute;
+    width: 100%;
     top: 0;
-    left: 0;
     z-index: 20;
-    width: 100%;
-    height: 100%;
-    background-color: rgba($dark-gray, 0.6);
-    background-image: url('data:image/svg+xml;utf8,%3Csvg%20style%3D%22enable-background%3Anew%200%200%2064%2046.9%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20version%3D%221.1%22%20y%3D%220px%22%20x%3D%220px%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2064%2046.9%22%3E%3Cpath%20fill%3D%22%23ededed%22%20d%3D%22m21.3%2024.5c0-0.3%200.1-0.6%200.3-0.8l11.8-11.7c0.2-0.2%200.5-0.3%200.8-0.3s0.6%200.1%200.8%200.3l11.7%2011.7c0.2%200.3%200.3%200.5%200.3%200.8s-0.1%200.6-0.3%200.8-0.5%200.3-0.8%200.3h-7.5v11.7c0%200.3-0.1%200.5-0.3%200.8-0.2%200.2-0.5%200.3-0.8%200.3h-6.4c-0.3%200-0.5-0.1-0.8-0.3s-0.3-0.5-0.3-0.8v-11.7h-7.5c-0.3%200-0.5-0.1-0.8-0.3s-0.2-0.5-0.2-0.8m-21.3%209.6c0%203.5%201.3%206.6%203.8%209%202.5%202.5%205.5%203.8%209%203.8h36.3c4.1%200%207.6-1.5%2010.6-4.4%202.8-2.9%204.3-6.4%204.3-10.5%200-2.9-0.8-5.6-2.3-8-1.6-2.4-3.6-4.3-6.3-5.5%200-0.7%200.1-1.1%200.1-1.4%200-4.7-1.7-8.7-5-12.1-3.3-3.3-7.4-5-12.1-5-3.5%200-6.6%201-9.5%202.9s-5%204.5-6.3%207.7c-1.6-1.4-3.4-2.1-5.5-2.1-2.4%200-4.4%200.8-6%202.5-1.7%201.7-2.5%203.7-2.5%206%200%201.7%200.5%203.2%201.4%204.6-2.9%200.7-5.3%202.2-7.1%204.5-2%202.4-2.9%205.1-2.9%208%22%2F%3E%3C%2Fsvg%3E');
-    background-position: center;
-    background-size: 64px 47px;
-    background-repeat: no-repeat;
-    pointer-events: none;
   }
 }
 
-.overall-upload {
-  position: fixed;
+alchemy-upload-progress {
+  --border-radius: var(--border-radius_medium);
+  --pogress_value-width: calc(232px - var(--spacing-2));
+
+  background-color: var(--file-upload_background-color);
   bottom: -100%;
+  display: grid;
+  font-size: var(--font-size_medium);
+  gap: var(--spacing-4);
+  grid-template-columns: calc(100% - var(--pogress_value-width)) calc(
+      var(--pogress_value-width) - var(--spacing-2)
+    );
+  height: auto;
   left: 0;
-  z-index: 150;
+  opacity: 0;
+  padding: var(--spacing-4);
+  position: fixed;
+  transition: $transition-duration ease-in-out;
   width: 100%;
-  height: auto;
-  padding: 8px;
-  overflow: hidden;
-  background-color: rgba($dark-gray, 0.6);
-  transition: all $transition-duration ease-in-out;
+  z-index: 150;
 
   &.visible {
     bottom: 0;
+    opacity: 1;
   }
 
-  .progress {
-    width: 0%;
-    height: 24px;
-    line-height: 24px;
-    color: $text-color;
-    background-color: $success_background_color;
-    text-indent: 2*$default-padding;
-    overflow: visible;
-    white-space: nowrap;
-    border-radius: $default-border-radius;
-  }
-}
-
-.upload-progress-container {
-  overflow-x: hidden;
-  overflow-y: auto;
-  max-height: 236px;
-
-  .progress-wrapper {
-    padding: 2*$default-padding;
-    background-color: $medium-gray;
-    position: relative;
-    margin-top: 8px;
-    border-radius: $default-border-radius;
-  }
-
-  .progress-name,
-  .progress-bar-status {
-    margin-bottom: 4px;
+  .overall-progress-value {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
   }
 
-  .progress-name {
-    text-shadow: 0 1px 2px #ffffff;
+  .value-text {
+    color: var(--font-color_default);
+    font-size: var(--font-size_large);
+    font-weight: var(--font-weigth_bold);
+    min-width: 100px;
   }
 
-  .progress-bar-status {
-    font-size: $small-font-size;
+  .single-uploads {
+    --padding: var(--spacing-2);
+    --progress-border-radius: var(--border-radius_medium)
+      var(--border-radius_medium) 0 0;
+    --progress-height: var(--spacing-1);
+
+    display: grid;
+    gap: var(--spacing-2);
+    grid-template-columns: repeat(var(--progress-columns, 3), minmax(0, 1fr));
+
+    alchemy-file-upload {
+      align-items: center;
+      background-color: var(--file-upload_single-upload-background-color);
+      border-radius: 0 0 var(--border-radius) var(--border-radius);
+      display: flex;
+      gap: var(--spacing-2);
+      margin-top: var(--progress-height);
+      padding: var(--padding);
+      position: relative;
+
+      img {
+        height: 60px;
+        object-fit: contain;
+        width: 60px;
+      }
+
+      .description {
+        align-self: start;
+        max-width: 100%;
+        overflow: hidden;
+      }
+
+      span {
+        display: block;
+      }
+
+      .file-name {
+        @extend %text-overflow;
+      }
+
+      .loaded-size,
+      .error-message {
+        font-size: var(--font-size_small);
+      }
+
+      .error-message {
+        color: var(--font-color_failed);
+      }
+
+      button {
+        margin-left: auto; // right align button
+        &:hover,
+        &:active {
+          background-color: $default-border-color;
+        }
+      }
+
+      &:not(.in-progress) button {
+        display: none;
+      }
+    }
+
+    sl-progress-bar {
+      --height: var(--progress-height);
+      left: 0;
+      position: absolute;
+      top: calc(-1 * var(--progress-height) / 2);
+      width: 100%;
+    }
   }
 
-  .progress-bar-container {
-    background-color: #f9f9f9;
-    border-radius: $default-border-radius;
-    height: 16px;
-    overflow: hidden;
-    width: 100%;
+  sl-progress-bar {
+    --indicator-color: var(--file-upload_progress-indicator-color);
+    --sl-border-radius-pill: var(--border-radius);
+    --track-color: var(--file-upload_progress-track-color);
+    &::part(base) {
+      top: calc(50% - var(--height) / 2);
+    }
   }
+}
 
-  .progress-bar-in-progress {
-    background-color: $info_background_color;
-    height: 16px;
-    width: 0;
-  }
+.successful {
+  --file-upload_progress-indicator-color: var(
+    --file-upload_progress-indicator-color-successful
+  );
+}
 
-  .progress-bar-complete {
-    background-color: $success_background_color;
-    height: 16px;
-    width: 0;
-  }
+.failed {
+  --file-upload_progress-indicator-color: var(
+    --file-upload_progress-indicator-color-failed
+  );
+}
 
-  .progress-bar-error {
-    background-color: $error_background_color;
-    height: 16px;
-    width: 0;
-  }
+.canceled {
+  --file-upload_progress-indicator-color: var(
+    --file-upload_progress-indicator-color-canceled
+  );
+}
 
-  .progress-bar-canceled {
-    background-color: #c9c9c9;
-    height: 16px;
-    width: 0;
-  }
+.invalid {
+  --file-upload_progress-indicator-color: var(
+    --file-upload_progress-indicator-color-invalid
+  );
+}
 
-  .progress-cancel {
-    position: absolute;
-    top: 8px;
-    right: 4px;
-    width: 16px;
-    height: 16px;
-  }
+.upload-finished {
+  --file-upload_progress-indicator-color: var(
+    --file-upload_progress-indicator-color-upload-finished
+  );
 }

data/app/assets/stylesheets/tinymce/skins/content/alchemy/content.min.scss

@@ -0,0 +1,69 @@
+/**
+* Copyright (c) Tiny Technologies, Inc. All rights reserved.
+* Licensed under the LGPL or a commercial license.
+* For LGPL see License.txt in the project root for license information.
+* For commercial licenses see https://www.tiny.cloud/
+*/
+
+@import "alchemy/variables";
+
+html {
+  font-size: 13px;
+}
+
+body {
+  font-family: $default-font-family;
+  line-height: 1.4;
+  margin: 1em;
+  color: $text-color;
+}
+
+a {
+  color: $dark-blue;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+table td,
+table th {
+  border: 1px solid $default-border-color;
+  padding: 0.4rem;
+}
+
+figure {
+  display: table;
+  margin: 1rem auto;
+}
+
+figure figcaption {
+  color: $dark-gray;
+  display: block;
+  margin-top: 0.25rem;
+  text-align: center;
+}
+
+hr {
+  border-color: $default-border-color;
+  border-style: solid;
+  border-width: 1px 0 0 0;
+}
+
+code {
+  background-color: $light-gray;
+  border-radius: $default-border-radius;
+  padding: 0.1rem 0.2rem;
+}
+
+.mce-content-body:not([dir="rtl"]) blockquote {
+  border-left: 2px solid $default-border-color;
+  margin-left: 1.5rem;
+  padding-left: 1rem;
+}
+
+.mce-content-body[dir="rtl"] blockquote {
+  border-right: 2px solid $default-border-color;
+  margin-right: 1.5rem;
+  padding-right: 1rem;
+}

data/app/assets/stylesheets/tinymce/skins/skintool.json

@@ -0,0 +1,38 @@
+{
+  "backgroundColor": "#ffffff",
+  "skinName": "alchemy",
+  "contentCss": "body {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n  line-height: 1.4;\n  margin: 1rem;\n}\n\ntable {\n  border-collapse: collapse;\n}\n\ntable th,\ntable td {\n  border: 1px solid #ccc;\n  padding: .4rem;\n}\n\nfigure {\n  display: table;\n  margin: 1rem auto;\n}\n\nfigure figcaption {\n  color: #999;\n  display: block;\n  margin-top: .25rem;\n  text-align: center;\n}\n\nhr {\n  border-color: #ccc;\n  border-style: solid;\n  border-width: 1px 0 0 0;\n}\n\ncode {\n  background-color: #e8e8e8;\n  border-radius: 3px;\n  padding: .1rem .2rem;\n}\n\n.mce-content-body:not([dir=rtl]) {\n  blockquote {\n    border-left: 2px solid #ccc;\n    margin-left: 1.5rem;\n    padding-left: 1rem;\n  }\n}\n\n// RTL\n.mce-content-body[dir=rtl] {\n  blockquote {\n    border-right: 2px solid #ccc;\n    margin-right: 1.5rem;\n    padding-right: 1rem;\n  }\n}\n",
+  "initConfig": "tinymce.init({\n  plugins: [\n    \"a11ychecker advcode casechange formatpainter\",\n    \"linkchecker autolink lists checklist\",\n    \"media mediaembed pageembed permanentpen\",\n    \"powerpaste table advtable tinymcespellchecker\"\n  ],\n  toolbar: \"formatselect | fontselect | bold italic strikethrough forecolor backcolor formatpainter | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | link insertfile image | removeformat | code | addcomment | checklist | casechange\",\n  height: 360\n});",
+  "lessVariablesMap": {
+    "@background-color": "#fff",
+    "@toolbar-background-color": "#efefef",
+    "@menubar-background-color": "#efefef",
+    "@border-color": "rgba(175, 175, 175, 0.5)",
+    "@color-black": "#000",
+    "@color-white": "#fff",
+    "@color-tint": "rgba(45, 90, 141, 1)",
+    "@color-error": "rgba(239, 211, 211, 1)",
+    "@color-success": "rgba(226, 239, 211, 1)",
+    "@base-value": "13px",
+    "@control-border-radius": "3px",
+    "@panel-border-radius": "3px",
+    "@tinymce-border-radius": "3px",
+    "@font-weight-normal": "normal",
+    "@font-weight-bold": "bold",
+    "@toolbar-button-icon-color": "rgba(51, 59, 81, 0.75)",
+    "@toolbar-button-text-color": "rgba(51, 59, 81, 0.75)",
+    "@toolbar-button-hover-background-color": "rgba(175, 175, 175, 0.25)",
+    "@toolbar-button-hover-icon-color": "rgba(51, 59, 81, 0.8)",
+    "@toolbar-button-hover-text-color": "rgba(51, 59, 81, 0.8)",
+    "@toolbar-button-focus-background-color": "rgba(175, 175, 175, 0.25)",
+    "@toolbar-button-focus-icon-color": "@toolbar-button-hover-icon-color",
+    "@toolbar-button-focus-text-color": "@toolbar-button-hover-icon-color",
+    "@toolbar-button-active-background-color": "rgba(175, 175, 175, 0.5)",
+    "@toolbar-button-enabled-background-color": "rgba(175, 175, 175, 0.5)",
+    "@toolbar-button-active-icon-color": "@toolbar-button-hover-icon-color",
+    "@toolbar-button-active-text-color": "@toolbar-button-hover-icon-color",
+    "@toolbar-button-enabled-icon-color": "@toolbar-button-hover-icon-color",
+    "@toolbar-button-enabled-text-color": "@toolbar-button-hover-icon-color"
+  },
+  "lessVariables": "@background-color: #fff;\n@toolbar-background-color: #efefef;\n@menubar-background-color: #efefef;\n@border-color: rgba(175, 175, 175, 0.5);\n@color-black: #000;\n@color-white: #fff;\n@color-tint: rgba(45, 90, 141, 1);\n@color-error: rgba(239, 211, 211, 1);\n@color-success: rgba(226, 239, 211, 1);\n@base-value: 13px;\n@control-border-radius: 3px;\n@panel-border-radius: 3px;\n@tinymce-border-radius: 3px;\n@font-stack: \"Open Sans\", \"Lucida Grande\", \"Lucida Sans Unicode\",\n  \"Lucida Sans\", Verdana, Tahoma, sans-serif;\n@font-weight-normal: normal;\n@font-weight-bold: bold;\n@toolbar-button-icon-color: rgba(51, 59, 81, 0.75);\n@toolbar-button-text-color: rgba(51, 59, 81, 0.75);\n@toolbar-button-hover-background-color: rgba(175, 175, 175, 0.25);\n@toolbar-button-hover-icon-color: rgba(51, 59, 81, 0.8);\n@toolbar-button-hover-text-color: rgba(51, 59, 81, 0.8);\n@toolbar-button-focus-background-color: rgba(175, 175, 175, 0.25);\n@toolbar-button-focus-icon-color: @toolbar-button-hover-icon-color;\n@toolbar-button-focus-text-color: @toolbar-button-hover-icon-color;\n@toolbar-button-active-background-color: rgba(175, 175, 175, 0.5);\n@toolbar-button-enabled-background-color: rgba(175, 175, 175, 0.5);\n@toolbar-button-active-icon-color: @toolbar-button-hover-icon-color;\n@toolbar-button-active-text-color: @toolbar-button-hover-icon-color;\n@toolbar-button-enabled-icon-color: @toolbar-button-hover-icon-color;\n@toolbar-button-enabled-text-color: @toolbar-button-hover-icon-color;\n"
+}