fix(tile-manager): header & resize indicators improvements

Author: SisIvanova

src/components/resize-container/themes/resize-container.base.scss

@@ -8,24 +8,6 @@
     visibility: var(--resize-visibility);
     position: absolute;
     z-index: 1;
-
-    igc-icon {
-        $icon-size: rem(9px);
-
-        --size: #{$icon-size} !important;
-        --ig-icon-size: #{$icon-size};
-        --igx-icon-size: #{$icon-size};
-    }
-
-    // &::after {
-    //     content: '';
-    //     position: absolute;
-    //     inset: 0;
-    //     width: var(--_size);
-    //     height: var(--_size);
-    //     border-radius: 50%;
-    //     z-index: 1;
-    // }
 }
 
 :host {
@@ -45,19 +27,19 @@
 
 [part='trigger-side'] {
     top: calc(50% - var(--_size));
-    right: calc(var(--_size) / 2);
+    right: calc(var(--_size) / 2 * -1);
     cursor: e-resize;
 }
 
 [part='trigger'] {
-    bottom: calc(var(--_size) / 2);
-    right: calc(var(--_size) / 2);
+    bottom: calc(var(--_size) / 2 * -1);
+    right: calc(var(--_size) / 2 * -1);
     cursor: se-resize;
 }
 
 [part='trigger-bottom'] {
     left: calc(50% - var(--_size));
-    bottom: calc(var(--_size) / 2);
+    bottom: calc(var(--_size) / 2 * -1);
     cursor: s-resize;
 }
 

src/components/resize-container/themes/shared/resize-container.common.scss

@@ -1,5 +1,4 @@
 @use 'styles/utilities' as *;
-@use '../../../tile-manager/themes/light/themes' as tile;
 @use '../light/themes' as *;
 
 $theme: $material;
@@ -12,7 +11,7 @@ $theme: $material;
         inset: 0;
         width: 100%;
         height: 100%;
-        border-radius: var-get(tile.$base, 'border-radius');
+        border-radius: var(--_border-radius);
         border: rem(1px) solid var-get($theme, 'resize-indicator');
     }
 }

src/components/tile-manager/themes/shared/tile/tile.bootstrap.scss

@@ -1,9 +1,7 @@
 @use 'styles/utilities' as *;
 
-:host(:not([disable-fullscreen][disable-maximize])) {
-    [part='header'] {
-        padding-block: sizable(rem(8px), rem(9px), rem(9px));
-    }
+:host {
+    --pad-block: #{sizable(rem(8px), rem(9px), rem(9px))};
 }
 
 ::slotted([slot='title']) {

src/components/tile-manager/themes/shared/tile/tile.common.scss

@@ -15,11 +15,12 @@ $theme: $material;
 
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
+    --_border-radius: #{var-get($theme, 'border-radius')};
 }
 
 [part~='base'] {
     background: var-get($theme, 'tile-background');
-    border-radius: var-get($theme, 'border-radius');
+    border-radius: var(--_border-radius);
     box-shadow: var-get($theme, 'resting-elevation');
 
     &::after {
@@ -64,8 +65,8 @@ $theme: $material;
 
 [part='header'] {
     background: var-get($theme, 'header-background');
-    border-top-left-radius: var-get($theme, 'border-radius');
-    border-top-right-radius: var-get($theme, 'border-radius');
+    border-top-left-radius: var(--_border-radius);
+    border-top-right-radius: var(--_border-radius);
 }
 
 [part='title'] {
@@ -82,12 +83,16 @@ igc-resize {
 
 igc-resize[part~='side-adorner']::part(trigger-side) {
     background-color: transparent;
+    right: 0;
 }
 
 igc-resize[part~='corner-adorner']::part(trigger) {
     background-color: transparent;
+    right: 0;
+    bottom: 0;
 }
 
 igc-resize[part~='bottom-adorner']::part(trigger-bottom) {
     background-color: transparent;
+    bottom: 0;
 }

src/components/tile-manager/themes/shared/tile/tile.fluent.scss

@@ -1,7 +1,5 @@
 @use 'styles/utilities' as *;
 
-:host(:not([disable-fullscreen][disable-maximize])) {
-    [part='header'] {
-        padding-block: sizable(rem(8px), rem(12px), rem(12px));
-    }
+:host {
+    --pad-block: #{sizable(rem(8px), rem(12px), rem(12px))};
 }

src/components/tile-manager/themes/shared/tile/tile.indigo.scss

@@ -1,7 +1,8 @@
 @use 'styles/utilities' as *;
-@use '../../light/themes' as *;
 
-$theme: $indigo;
+:host {
+    --pad-block: #{sizable(rem(8px), rem(14px), rem(14px))};
+}
 
 [part='content-container'] {
     ::slotted(*) {
@@ -10,9 +11,3 @@ $theme: $indigo;
         margin: 0;
     }
 }
-
-:host(:not([disable-fullscreen][disable-maximize])) {
-    [part='header'] {
-        padding-block: sizable(rem(8px), rem(14px), rem(14px));
-    }
-}

src/components/tile-manager/themes/tile.base.scss

@@ -81,13 +81,8 @@
     align-items: center;
     gap: sizable(rem(12px), rem(16px), rem(16px));
     width: 100%;
-}
-
-:host(:not([disable-fullscreen][disable-maximize])) {
-    [part='actions'] {
-        padding-block: var(--pad-block);
-        padding-inline: var(--pad-inline);
-    }
+    padding-block: var(--pad-block);
+    padding-inline: var(--pad-inline);
 }
 
 :host([disable-fullscreen][disable-maximize]) {
@@ -97,19 +92,22 @@
 }
 
 [part='title'] {
-    @include ellipsis();
-
-    width: 100%;
-    min-width: 4ch;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex: 1 0 0%;
+    overflow: hidden;
+    min-width: 2ch;
 }
 
 ::slotted([slot='title']) {
     @include type-style('h6');
+    @include ellipsis();
 
+    width: 100%;
+    min-width: 2ch;
     margin-bottom: 0;
-    padding-block: var(--pad-block);
-    padding-inline: var(--pad-inline);
-    display: inline;
+    display: block;
 }
 
 [part='actions'] {
@@ -118,9 +116,3 @@
     margin-inline-start: auto;
     flex-shrink: 0;
 }
-
-// should be fixed
-// ::slotted([slot='actions']) {
-//     padding-block: var(--pad-block);
-//     padding-inline: var(--pad-inline);
-// }