@colijnit/inphoto 300.1.2 → 300.1.4

package/lib/component/catalog/style/_layout.scss

@@ -3,7 +3,7 @@
 @include cfg.export-module('cco-catalog-layout') {
   .co-catalog {
     .catalog-dialog {
-      z-index: 1;
+      z-index: 100;
       top: 0;
       left: 85px;
       right: 0;

package/lib/component/catalog/style/_theme.scss

@@ -14,10 +14,18 @@
 
           .back-button {
             align-items: center;
+            background: none;
+            box-shadow: none;
+            @include cfg.text();
+            @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color));
           }
 
           .close-button {
             margin-left: auto;
+            background: none;
+            align-items: center;
+            box-shadow: none;
+            @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color));
           }
         }
 

package/lib/component/edit-canvas/style/_layout.scss

@@ -4,17 +4,23 @@
   .co-edit-canvas {
     .edit-canvas-container {
       position: relative;
-      width: 100vw;
+      width: 70vw;
       height: 100vh;
 
       .canvas-container {
         position: relative;
-        width: 100%;
+        width: 70vw;
         height: 100%;
+        display: flex;
+        align-items: center;
+        align-self: center;
+        min-width: 70vw;
+        justify-content: space-around;
+        min-height: 100vh;
 
         canvas {
-          width: 100%;
-          height: 100%;
+          max-width: 70vw;
+          max-height: 100%;
           display: block;
         }
 
@@ -54,6 +60,49 @@
           max-height: 100%;
         }
       }
+
+      // Zoom
+      .canvas-zoom-control {
+        position: absolute;
+        display: none; // should be flex, but hide it for now
+        justify-content: space-around;
+        align-items: center;
+        box-sizing: border-box;
+        padding: 8px;
+        border-radius: var(--co-inphoto-border-radius);
+        bottom: 25px;
+        left: 100px;
+        background: var(--co-inphoto-dialog-background-color);
+
+        .zoom-input-wrapper {
+          .co-input-text {
+            @include cfg.text();
+
+          }
+          .co-input-text:not(.no-style) {
+            input {
+              text-align: center;
+              align-self: center;
+              padding: 0;
+            }
+          }
+        }
+
+        .co-button {
+          @include cfg.action-button(
+                  var(--co-inphoto-button-background),
+                  var(--co-inphoto-button-background),
+                  var(--co-inphoto-button-color),
+                  var(--co-inphoto-icon-size-small),
+                  var(--co-inphoto-button-icon-size),
+                  var(--co-inphoto-button-icon-color),
+                  var(--co-inphoto-button-border),
+                  var(--co-inphoto-button-radius),
+                  0);
+
+          height: 40px;
+        }
+      }
     }
   }
 }

package/lib/component/edit-canvas/style/_theme.scss

@@ -3,6 +3,10 @@
 @include cfg.export-module('co-edit-canvas-theme') {
   .co-edit-canvas {
 
+    .canvas-container {
+      background: var(--co-inphoto-background-white);
+    }
+
   }
 }
 

package/lib/component/header/style/_layout.scss

@@ -0,0 +1,24 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-header-layout') {
+  .co-header {
+
+    .header-container {
+      display: flex;
+      justify-content: space-between;
+      box-sizing: border-box;
+
+      padding: 45px 0 50px;
+
+      .header-icon {
+        width: 50px;
+        height: 50px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        border-radius: 50%;
+        margin-right: 15px;
+      }
+    }
+  }
+}

package/lib/component/header/style/_material-definition.scss

@@ -0,0 +1,3 @@
+:root {
+
+}

package/lib/component/header/style/_theme.scss

@@ -0,0 +1,20 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-header-theme') {
+  .co-header {
+    .header-container {
+      .header-info {
+        .header-text {
+          @include cfg.header-text();
+        }
+
+        .explain-text {
+          @include cfg.text();
+        }
+      }
+    }
+  }
+}
+
+
+

package/lib/component/image-enhancer/style/_layout.scss

@@ -3,18 +3,6 @@
 @include cfg.export-module('co-image-enhancer-layout') {
   .co-image-enhancer {
     .image-enhancer-container {
-      min-height: 0;
-      max-height: 90vh;
-      overflow-y: scroll;
-      scroll-behavior: smooth;
-      scrollbar-width: none;
-      -ms-overflow-style: none;
-      transition: max-height 0.5s;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-
       .tabs {
         align-items: center;
         display: grid;
@@ -37,59 +25,10 @@
       max-height: 55px;
     }
 
-
     .image-enhancer-header {
       display: flex;
       justify-content: space-between;
       gap: 20px;
-
-      .drag-indicator-icon {
-        border-radius: var(--co-inphoto-border-radius);
-        background: var(--co-inphoto-background-white);
-        box-sizing: border-box;
-        padding: 10px;
-        cursor: grab;
-
-        &:active {
-          cursor: grabbing;
-        }
-
-      }
-
-      .collapse-menu {
-        border-radius: var(--co-inphoto-border-radius);
-        background: var(--co-inphoto-background-white);
-        box-sizing: border-box;
-        padding: 10px;
-        cursor: pointer;
-        display: grid;
-
-        .collapse-menu-item {
-          grid-area: 1 / 1;
-          opacity: 0;
-          pointer-events: none;
-          transition: opacity 0.2s ease;
-
-          .collapse-menu-open, .collapse-close-open {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            .collapse-menu-text {
-              @include cfg.text();
-            }
-
-            @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-icon-color));
-          }
-        }
-
-        .collapse-menu-active {
-          opacity: 1;
-          pointer-events: auto;
-        }
-      }
-
     }
-
   }
 }

package/lib/component/image-enhancer/style/_theme.scss

@@ -3,15 +3,21 @@
 @include cfg.export-module('co-image-enhancer-theme') {
   .co-image-enhancer {
     .enhancer-container {
-      background: rgba(255, 255, 255, 0.9);
-      position: fixed;
-      top: 20px;
-      right: 20px;
-      width: 30%;
-      max-width: 30%;
+      background: var(--co-inphoto-dialog-background-color);
+      height: 100vh;
       box-sizing: border-box;
       padding: 20px;
-      border-radius: var(--co-inphoto-border-radius);
+      min-height: 0;
+      max-height: 99vh;
+      overflow-y: scroll;
+      scroll-behavior: smooth;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      transition: max-height 0.5s;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
     }
 
 
@@ -33,6 +39,7 @@
 
         .tab-button {
           background: none;
+          border-radius: 0;
           @include cfg.sub-header-text();
           border-bottom: 2px solid transparent;
           font-weight: bold;

package/lib/component/image-history/style/_layout.scss

@@ -13,7 +13,7 @@
       position: relative;
       display: flex;
       align-items: center;
-      width: 675px;
+      max-width: 675px;
     }
 
     .image-history-tiles {
@@ -70,9 +70,7 @@
 
         .close-dialog-button, .dialog-prev-button, .dialog-next-button {
           position: absolute;
-
           cursor: pointer;
-          background: var(--co-inphoto-loader-background-dark);
           width: 30px;
           height: 30px;
           border-radius: 50%;
@@ -83,8 +81,6 @@
           .co-icon {
             flex: 1
           }
-
-          @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-icon-color-light));
         }
 
         .close-dialog-button {
@@ -114,24 +110,17 @@
             cursor: pointer;
             box-sizing: border-box;
             padding: 8px 15px;
-            background: var(--co-inphoto-loader-background-dark);
-            color: var(--co-inphoto-color-light);
-            border-radius: var(--co-inphoto-border-radius);
-            font-size: var(--co-inphoto-font-size-label);
 
             .label {
               margin-left: 10px;
             }
-
-            @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color-light));
           }
         }
       }
 
-
       .large-image {
-        max-width: 100%;
-        max-height: 100%;
+        max-width: 100vw;
+        max-height: 90vh;
         object-fit: contain;
         border-radius: var(--co-inphoto-border-radius);
       }

package/lib/component/image-history/style/_theme.scss

@@ -13,13 +13,31 @@
     }
 
     .scroll-btn {
-      background: #ffffff;
+      background: var(--co-inphoto-background-white);
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
       @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color));
     }
 
     .larger-image-dialog {
       background: var(--co-inphoto-loader-background-dark);
+
+      .dialog-container {
+        .close-dialog-button, .dialog-prev-button, .dialog-next-button {
+          background: var(--co-inphoto-loader-background-dark);
+          @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-icon-color-light));
+        }
+
+        .dialog-toolbar {
+          .co-button {
+            background: var(--co-inphoto-loader-background-dark);
+            color: var(--co-inphoto-color-light);
+            border-radius: var(--co-inphoto-border-radius);
+            font-size: var(--co-inphoto-font-size-label);
+
+            @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color-light));
+          }
+        }
+      }
     }
   }
 }

package/lib/component/image-history-tile/style/_layout.scss

@@ -28,13 +28,9 @@
         width: 26px;
         height: 26px;
         border-radius: 50%;
-        color: #ffffff;
-        background: rgba(0, 0, 0, 0.55);
         opacity: 0;
         transition: opacity 0.15s ease;
         z-index: 1;
-
-        @include cfg.default-icon(20px, 20px, #fff);
       }
 
       &:hover .tile-action {
@@ -55,13 +51,6 @@
         bottom: 6px;
         right: 6px;
       }
-
-      &--selected {
-        .tile-action-select {
-          opacity: 1;
-          background: #f5a623;
-        }
-      }
     }
   }
 }

package/lib/component/image-history-tile/style/_theme.scss

@@ -4,19 +4,16 @@
 
   .co-image-history-tile {
     .image-history-item {
-      .image-history-hover {
-        background-color: var(--co-inphoto-loader-background-dark);
-
-        .co-button {
-          background: none;
-        }
-
-        .image-history-item-zoom {
-          @include cfg.default-icon(40px, 40px, #fff)
-        }
+      .tile-action {
+        color: var(--co-inphoto-background-white);
+        background: var(--co-inphoto-loader-background-light);
+        @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color-light));
+      }
 
-        .tile-toolbar {
-          @include cfg.default-icon(40px, 40px, #fff);
+      &--selected {
+        .tile-action-select {
+          opacity: 1;
+          background: var(--co-inphoto-accent-color);
         }
       }
     }

package/lib/component/image-process-complete/style/_layout.scss

@@ -2,55 +2,63 @@
 
 @include cfg.export-module('co-image-process-complete-layout') {
   .co-image-process-complete {
+
     .image-process-complete {
-      background-size: contain;
       display: flex;
-      justify-content: space-around;
-      align-items: center;
       width: 100%;
       height: 100%;
       min-height: 100vh;
-      background-repeat: no-repeat;
-      background-position: center;
+
+      .image-process-preview {
+        width: 70vw;
+        height: 100vh;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+      }
     }
 
     .image-process-complete-dialog {
-      position: absolute;
       width: 100%;
-      max-width: 980px;
-      top: 20%;
-      left: calc(50% - 490px);
+      max-width: 30vw;
       box-sizing: border-box;
-      z-index: 10;
+      position: relative;
+      border-radius: var(--co-inphoto-border-radius);
+      padding: 35px 25px;
 
       .image-process-complete-dialog-header {
-        display: flex;
-        align-items: center;
-
         .header-icon {
-          width: 40px;
-          height: 40px;
-          display: flex;
-          justify-content: space-around;
-          align-items: center;
-          border-radius: 50%;
-        }
-
-        .header-button {
-          .co-button {
-            display: flex;
-            box-sizing: border-box;
-            cursor: pointer;
-          }
+          width: 95px;
         }
       }
 
       .image-process-complete-dialog-body {
         display: flex;
-        justify-content: space-between;
-        align-items: center;
+        flex-direction: column;
         gap: 20px;
       }
     }
+
+    .prepare-image-disclaimer {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      margin-top: 20px;
+    }
+
+    .restart-button-container {
+      box-sizing: border-box;
+      padding: 20px 0 0;
+      margin-top: 20px;
+
+
+      .co-button {
+        display: flex;
+        box-sizing: border-box;
+        cursor: pointer;
+      }
+    }
   }
 }

package/lib/component/image-process-complete/style/_material-definition.scss

@@ -1,3 +1,5 @@
 :root {
+  --co-inphoto-process-complete-icon-color: #7274FD;
+  --co-inphoto-process-complete-icon-background: #EDEDF9;
 
 }

package/lib/component/image-process-complete/style/_theme.scss

@@ -2,64 +2,43 @@
 
 @include cfg.export-module('co-image-process-complete-theme') {
   .co-image-process-complete {
-
     .image-process-complete-dialog {
       background: var(--co-inphoto-dialog-background-color);
-      border-radius: var(--co-inphoto-border-radius);
-      padding: 15px 25px 25px;
-
 
       .image-process-complete-dialog-header {
-        margin-bottom: 25px;
-
         .header-icon {
-          background: var(--co-inphoto-header-icon-background);
-          color: var(--co-inphoto-success-color);
-          margin-right: 25px;
-          height: 50px;
-          width: 50px;
-          display: flex;
-          justify-content: space-around;
-          align-items: center;
-          border-radius: 50%;
-          @include cfg.default-icon(var(--co-inphoto-icon-size-large), var(--co-inphoto-icon-size-large), var(--co-inphoto-success-color));
-        }
-
-        .header-info {
-          .header-text {
-            @include cfg.header-text();
-          }
-
-          .explain-text {
-            @include cfg.text();
-          }
+          background: var(--co-inphoto-process-complete-icon-background);
+          color: var(--co-inphoto-process-complete-icon-color);
+          @include cfg.default-icon(var(--co-inphoto-icon-size-large), var(--co-inphoto-icon-size-large), var(--co-inphoto-process-complete-icon-color));
         }
+      }
+    }
 
-        .header-button {
-          margin-left: auto;
-
-          .co-button {
-            @include cfg.action-button(
-                    var(--co-inphoto-button-background),
-                    var(--co-inphoto-button-background),
-                    var(--co-inphoto-button-color),
-                    var(--co-inphoto-button-font-size),
-                    var(--co-inphoto-button-icon-size),
-                    var(--co-inphoto-button-icon-color),
-                    var(--co-inphoto-button-border),
-                    var(--co-inphoto-button-radius),
-                    var(--co-inphoto-button-padding)
-            );
 
-            .label {
-              margin-left: 15px;
-              font-weight: bold;
-            }
-          }
+    .restart-button-container {
+      border-top: 1px solid #eee;
+
+      .co-button {
+        @include cfg.action-button(
+                var(--co-inphoto-button-background),
+                var(--co-inphoto-button-background),
+                var(--co-inphoto-button-color),
+                var(--co-inphoto-button-font-size),
+                var(--co-inphoto-button-icon-size),
+                var(--co-inphoto-button-icon-color),
+                var(--co-inphoto-button-border),
+                var(--co-inphoto-button-radius),
+                var(--co-inphoto-button-padding)
+        );
+
+        .label {
+          margin-left: 15px;
+          font-weight: bold;
         }
       }
     }
   }
+
 }
 
 

package/lib/component/image-tile/components/color-palette-option/style/_layout.scss

@@ -2,8 +2,8 @@
 
 @include cfg.export-module('co-color-palette-option-layout') {
   .color-palette-option {
-    width: 18px;
-    height: 18px;
+    width: 25px;
+    height: 25px;
     cursor: pointer;
     border: 2px solid;
     border-radius: 50%;