@worktile/theia 15.0.2 → 15.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worktile/theia",
-  "version": "15.0.2",
+  "version": "15.0.3",
   "description": "theia editor",
   "author": "YanDong <nanianqiumo@foxmail.com>",
   "homepage": "https://github.com/atinc/theia#readme",

package/plugins/code/code.component.scss

@@ -3,35 +3,36 @@
 @use '../../styles/mixins.scss' as mixins;
 
 .the-code-container {
-    .resize-code-container{
-        display: block;
-        font-size: 14px;
+    .resize-code-container {
         position: relative;
-        counter-reset: codeblock-lm;
-        border: 1px solid variables.$gray-200;
-        border-radius: variables.$border-radius;;
+        display: block;
         color: variables.$gray-600;
+        font-size: 14px;
         background: rgba(243, 243, 243, 0.8);
-        &:hover{
+        border: 1px solid variables.$gray-200;
+        border-radius: variables.$border-radius;
+        counter-reset: codeblock-lm;
+        &:hover {
             border-color: variables.$primary;
         }
     }
-    .resize-code-container.readonly, .resize-code-container.focus{
+    .resize-code-container.readonly,
+    .resize-code-container.focus {
         border-color: variables.$gray-200;
-      &:hover{
-          border-color: variables.$gray-200;
-      }
+        &:hover {
+            border-color: variables.$gray-200;
+        }
     }
 
     .resize-code-container.active {
         border-color: variables.$primary;
-        &:hover{
+        &:hover {
             border-color: variables.$primary;
         }
     }
     .CodeMirror {
-        height: 100% !important;
         z-index: 0;
+        height: 100% !important;
         color: variables.$gray-600;
         background: transparent;
         border: none;
@@ -51,33 +52,34 @@
         }
     }
     .ng-codemirror-wrapper {
-        display: block;
         position: relative;
-        overflow-y: auto;
+        display: block;
         height: 100%;
+        overflow-y: auto;
     }
 
-    .code-resize-icon.thy-resizable-handle-bottom{
-        cursor: row-resize;
-        height: 8px;
-        width: 45px;
+    .code-resize-icon.thy-resizable-handle-bottom {
+        position: absolute;
+        bottom: -5px;
         left: 50%;
-        transform: translateX(-50%);
+        width: 45px;
+        height: 8px;
         background: variables.$gray-300;
-        bottom: -5px;
         border-radius: 5px;
-        position: absolute;
-        &::before, &:after{
-            content: '';
+        transform: translateX(-50%);
+        cursor: row-resize;
+        &::before,
+        &:after {
             position: absolute;
+            top: 2px;
+            left: 50%;
             width: 34px;
             height: 1px;
             background: variables.$white;
-            left: 50%;
             transform: translateX(-50%);
-            top: 2px;
+            content: '';
         }
-        &:after{
+        &:after {
             top: 5px;
         }
     }

package/plugins/image/image.component.scss

@@ -5,8 +5,8 @@
 
     .image-container {
         .image-content {
-            display: inline-block;
             position: relative;
+            display: inline-block;
             cursor: zoom-in;
         }
 
@@ -16,10 +16,10 @@
 
         .main-image {
             position: relative;
-            object-fit: fill;
             width: auto;
             max-width: 100%;
             margin: 0 auto;
+            object-fit: fill;
             user-select: none;
         }
         .image-collapsed {
@@ -27,32 +27,32 @@
         }
         .image-profile {
             position: absolute;
-            display: block;
+            top: -1px;
+            right: -1px;
             bottom: -1px;
             left: -1px;
-            right: -1px;
-            top: -1px;
+            display: block;
             .image-pointer {
                 position: absolute;
+                z-index: 2;
                 width: 12px;
                 height: 12px;
-                border-radius: 50%;
                 background-color: variables.$white;
-                box-shadow: 0 0 4px 0 rgba(variables.$black, 0.13);
                 border: 1px solid variables.$gray-300;
-                z-index: 2;
+                border-radius: 50%;
+                box-shadow: 0 0 4px 0 rgba(variables.$black, 0.13);
                 &::before {
                     position: absolute;
-                    left: 50%;
                     top: 50%;
+                    left: 50%;
                     display: inline-block;
-                    content: '';
-                    height: 8px;
                     width: 8px;
-                    margin-left: -4px;
+                    height: 8px;
                     margin-top: -4px;
-                    border-radius: 50%;
+                    margin-left: -4px;
                     background-color: variables.$primary;
+                    border-radius: 50%;
+                    content: '';
                 }
             }
             .left {
@@ -98,10 +98,10 @@
 
         .uploading {
             position: absolute;
+            top: 0;
+            right: 0;
             bottom: 0;
             left: 0;
-            right: 0;
-            top: 0;
             display: block;
             background-color: rgba(variables.$white, 0.65);
 
@@ -111,14 +111,14 @@
                 right: 4px;
                 width: 102px;
                 height: 24px;
+                color: grey;
+                font-weight: 500;
                 line-height: 24px;
+                text-align: center;
+                background: variables.$white;
                 border: 0.5px solid rgba(variables.$black, 0.05);
                 border-radius: 3px;
                 box-shadow: 0 1px 1px 0 rgba(variables.$black, 0.05), 0 1px 4px 0 rgba(variables.$black, 0.1);
-                background: variables.$white;
-                color: grey;
-                font-weight: 500;
-                text-align: center;
                 transition: 0.3s ease;
             }
             .uploading-percentage {
@@ -127,18 +127,18 @@
                 left: 50%;
                 display: flex;
                 flex-direction: row;
-                justify-content: space-between;
-                align-items: center;
                 flex-wrap: nowrap;
+                align-items: center;
+                justify-content: space-between;
                 height: 18px;
-                margin-left: -60px;
                 margin-top: -9px;
+                margin-left: -60px;
                 .progress {
                     display: inline-block;
                     width: 120px;
                     height: 8px;
-                    margin-right: 8px;
                     margin-top: 1px;
+                    margin-right: 8px;
                 }
                 .thy-icon {
                     color: #d8d8d8;
@@ -147,12 +147,12 @@
         }
 
         .layer {
-            display: none;
             position: absolute;
+            top: 0;
+            right: 0;
             bottom: 0;
             left: 0;
-            right: 0;
-            top: 0;
+            display: none;
 
             .preview {
                 position: absolute;
@@ -161,16 +161,16 @@
                 width: auto;
                 height: 24px;
                 padding: 0 3px;
+                color: grey;
+                font-weight: 500;
                 line-height: 24px;
+                text-align: center;
+                background: variables.$white;
                 border: 0.5px solid rgba(variables.$black, 0.05);
                 border-radius: 3px;
                 box-shadow: 0 1px 1px 0 rgba(variables.$black, 0.05), 0 1px 4px 0 rgba(variables.$black, 0.1);
-                background: variables.$white;
-                color: grey;
-                font-weight: 500;
-                text-align: center;
-                transition: 0.3s ease;
                 cursor: pointer;
+                transition: 0.3s ease;
             }
             &.readonly {
                 z-index: -1;
@@ -183,8 +183,8 @@
             justify-content: center;
             width: 100%;
             height: 280px;
-            background: rgb(244, 245, 247);
             color: variables.$gray-500;
+            background: rgb(244, 245, 247);
         }
     }
 

package/plugins/inline-code/inline-code.component.scss

@@ -1,15 +1,15 @@
 @use 'ngx-tethys/styles/variables.scss';
 
-.slate-element-inline-code{
-        margin: 0 4px;
-        padding: 2px 3px;
-        border: 1px solid variables.$gray-300;
-        border-radius: 2px;
-        font-family: monospace;
-        font-size: inherit;
-        background-color: rgba(243, 243, 243, 0.8);
-        line-height: 1;
-        word-wrap: break-word;
-        text-indent: 0;
-        color: variables.$gray-700;
-}
+.slate-element-inline-code {
+    margin: 0 4px;
+    padding: 2px 3px;
+    color: variables.$gray-700;
+    font-size: inherit;
+    font-family: monospace;
+    line-height: 1;
+    text-indent: 0;
+    word-wrap: break-word;
+    background-color: rgba(243, 243, 243, 0.8);
+    border: 1px solid variables.$gray-300;
+    border-radius: 2px;
+}

package/plugins/link/link.component.scss

@@ -38,8 +38,8 @@
 .the-link-edit {
     .the-link-edit-container {
         display: block;
-        padding: 1.25rem;
         width: 360px;
+        padding: 1.25rem;
     }
     .col-form-control {
         max-width: 100% !important;

package/plugins/quick-insert/components/quick-insert.component.scss

@@ -6,10 +6,10 @@
 
     .quick-insert-icon {
         position: absolute;
-        left: -25px;
         top: 3px;
-        font-size: 18px !important;
+        left: -25px;
         color: variables.$gray-400 !important;
+        font-size: 18px !important;
         cursor: pointer;
 
         &:hover {

package/plugins/table/components/mixins.scss

@@ -2,15 +2,14 @@
 
 $expand-size: 12px;
 
-
-@mixin cellInset{
-    display: block;
+@mixin cellInset {
     position: absolute;
-    content: '';
     top: -1px;
-    left: -1px;
     right: -1px;
     bottom: -1px;
+    left: -1px;
+    display: block;
+    content: '';
 }
 
 @mixin controlSelected {
@@ -25,30 +24,30 @@ $expand-size: 12px;
 
 @mixin tableLeftShadow {
     &::before {
-        bottom: 0;
+        position: absolute;
         top: $expand-size * 2 + 10px;
+        bottom: 0;
         left: 0;
-        content: ' ';
-        position: absolute;
-        pointer-events: none;
-        width: 8px;
         z-index: 2;
+        width: 8px;
         background: -webkit-gradient(linear, right, left, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.1)));
         background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
+        content: ' ';
+        pointer-events: none;
     }
 }
 
-@mixin tableRightShadow{
+@mixin tableRightShadow {
     &::after {
-        bottom: 0;
-        right: 0;
-        top: $expand-size * 2 + 10px;
-        content: ' ';
         position: absolute;
-        pointer-events: none;
-        width: 8px;
+        top: $expand-size * 2 + 10px;
+        right: 0;
+        bottom: 0;
         z-index: 2;
+        width: 8px;
         background: -webkit-gradient(linear, left, right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
         background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
+        content: ' ';
+        pointer-events: none;
     }
 }

package/plugins/table/components/table.component.d.ts

@@ -36,6 +36,8 @@ export declare class TheTableComponent extends TheBaseElementComponent<TableElem
     isStickyTop: boolean;
     scrollContainerTop: number;
     previousScrollContainer: string;
+    isRightShadow: boolean;
+    isLeftShadow: boolean;
     get columns(): TheTableColumn[];
     get nativeElement(): HTMLElement;
     get tbodyNativeElement(): HTMLElement;
@@ -45,6 +47,9 @@ export declare class TheTableComponent extends TheBaseElementComponent<TableElem
     columnControlsWrapper: ElementRef<HTMLElement>;
     cornerControl: ElementRef<HTMLElement>;
     rowControlsInner: ElementRef<HTMLElement>;
+    tableRowControlsWrapper: ElementRef<HTMLElement>;
+    headerRowLeftShadow: ElementRef<HTMLElement>;
+    headerRowRightShadow: ElementRef<HTMLElement>;
     rowControlsButtonWrapper: QueryList<ElementRef<HTMLElement>>;
     handleMousedown(event: MouseEvent): void;
     onContextChange(): void;
@@ -57,6 +62,11 @@ export declare class TheTableComponent extends TheBaseElementComponent<TableElem
      */
     getHeaderRow(): boolean;
     ngAfterViewInit(): void;
+    setHeaderRowShadow: () => void;
+    calcHeaderRowShadow: () => {
+        height: any;
+        top: number;
+    };
     subscribeScrollContainerScroll(): void;
     setHeaderCellStyle(): void;
     removeHeaderCellStyle(cells: TableCellElement[]): void;