From c95d7b469c326a7f5807cf72caff6ee0d619804f Mon Sep 17 00:00:00 2001 From: Colin Dawson Date: Sat, 31 Jan 2026 23:27:01 +0000 Subject: [PATCH] Lots of UI tweaks --- src/Sass/_ckEditor.scss | 136 +++++++++---------- src/Sass/_esuiteVariables.scss | 27 ++-- src/Sass/_leftMenu.scss | 158 +++++++++++++--------- src/Sass/horizionalTabs.scss | 47 ++++--- src/Sass/vars.scss | 1 - src/components/common/HorizionalTabs.tsx | 29 ++-- src/components/common/TabHeader.tsx | 2 +- src/modules/frame/components/LeftMenu.tsx | 4 +- 8 files changed, 219 insertions(+), 185 deletions(-) diff --git a/src/Sass/_ckEditor.scss b/src/Sass/_ckEditor.scss index e21081d..8691b0e 100644 --- a/src/Sass/_ckEditor.scss +++ b/src/Sass/_ckEditor.scss @@ -1,80 +1,79 @@ -@import './_esuiteVariables.scss'; +@import "./_esuiteVariables.scss"; .form-editor { - min-width: calc(100vw - ($leftMenuWidth + ($frameWorkAreaPadding * 2) + $spacePadding)); - max-width: calc(100vw - ($leftMenuWidth + ($frameWorkAreaPadding * 2) + $spacePadding)); + width: 100%; } .mailTemplate-editor { - min-width: calc(100vw - ($leftMenuWidth + $gridGap + $mailtemplateNameListWidth + ($frameWorkAreaPadding * 2) + $spacePadding)); - max-width: calc(100vw - ($leftMenuWidth + $gridGap + $mailtemplateNameListWidth + ($frameWorkAreaPadding * 2) + $spacePadding)); + width: calc(100% - ($gridGap + $mailtemplateNameListWidth)); } - @media print { - body { - margin: 0 !important; - } + body { + margin: 0 !important; + } } .ck-main-container { - // --ckeditor5-preview-height: 700px; - font-family: 'Lato'; - width: fit-content; - margin-left: auto; - margin-right: auto; + // --ckeditor5-preview-height: 700px; + font-family: "Lato"; + width: fit-content; + margin-left: auto; + margin-right: auto; - .ck { - .ck-dropdown__panel { - .ck-list{ - max-height: 30vh; - overflow-y: auto; - } - } - } + .ck { + .ck-dropdown__panel { + .ck-list { + max-height: 30vh; + overflow-y: auto; + } + } + } } .ck-content { - font-family: 'Lato'; - line-height: 1.6; - word-break: break-word; + font-family: "Lato"; + line-height: 1.6; + word-break: break-word; - .table table { - overflow: auto; - } + .table table { + overflow: auto; + } } .editor-container__editor-wrapper { - display: flex; - width: fit-content; + display: flex; + width: fit-content; } .editor-container_document-editor { - border: 1px solid var(--ck-color-base-border); + border: 1px solid var(--ck-color-base-border); } .editor-container_document-editor .editor-container__toolbar { - display: flex; - position: relative; - box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.078); + display: flex; + position: relative; + box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.078); } .editor-container_document-editor .editor-container__toolbar > .ck.ck-toolbar { - flex-grow: 1; - width: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - border-top: 0; - border-left: 0; - border-right: 0; + flex-grow: 1; + width: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border-top: 0; + border-left: 0; + border-right: 0; } -.editor-container_document-editor .editor-container__menu-bar > .ck.ck-menu-bar { - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - border-top: 0; - border-left: 0; - border-right: 0; +.editor-container_document-editor + .editor-container__menu-bar + > .ck.ck-menu-bar { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border-top: 0; + border-left: 0; + border-right: 0; } // .editor-container_document-editor .editor-container__editor-wrapper { @@ -90,29 +89,30 @@ // height: 100%; // } -.editor-container_document-editor .editor-container__editor .ck.ck-editor__editable { - box-sizing: border-box; - //min-width: calc(100vw - ($leftMenuWidth + ($frameWorkAreaPadding * 2))); - //max-width: calc(100vw - ($leftMenuWidth + ($frameWorkAreaPadding * 2))); +.editor-container_document-editor + .editor-container__editor + .ck.ck-editor__editable { + box-sizing: border-box; + //min-width: calc(100vw - ($leftMenuWidth + ($frameWorkAreaPadding * 2))); + //max-width: calc(100vw - ($leftMenuWidth + ($frameWorkAreaPadding * 2))); - min-width: 100%; - max-width: 100%; + min-width: 100%; + max-width: 100%; - // min-width: calc(210mm + 2px); - // max-width: calc(210mm + 2px); - height: fit-content; - // padding: 20mm 12mm; - border: 1px hsl(0, 0%, 82.7%) solid; - //background: hsl(0, 0%, 100%); - //color: black; - box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.078); - flex: 1 1 auto; - // margin-left: 72px; - // margin-right: 72px; + // min-width: calc(210mm + 2px); + // max-width: calc(210mm + 2px); + height: fit-content; + // padding: 20mm 12mm; + border: 1px hsl(0, 0%, 82.7%) solid; + //background: hsl(0, 0%, 100%); + //color: black; + box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.078); + flex: 1 1 auto; + // margin-left: 72px; + // margin-right: 72px; } - .ck-toolbar { - background: hsl(0, 0%, 100%); - color: black; -} \ No newline at end of file + background: hsl(0, 0%, 100%); + color: black; +} diff --git a/src/Sass/_esuiteVariables.scss b/src/Sass/_esuiteVariables.scss index 7ab64ec..9553559 100644 --- a/src/Sass/_esuiteVariables.scss +++ b/src/Sass/_esuiteVariables.scss @@ -1,21 +1,21 @@ // Overrides for Bootstrap variables light mode -$blue: #6262fb !default; -$indigo: #6610f2 !default; -$purple: #6f42c1 !default; -$pink: #de6c74 !default; -$red: #b00020 !default; -$orange: #fd7e14 !default; -$yellow: #ee9700 !default; -$green: #004733 !default; -$teal: #00bb9c !default; -$cyan: #0dcaf0 !default; +$blue: #6262fb !default; +$indigo: #6610f2 !default; +$purple: #6f42c1 !default; +$pink: #de6c74 !default; +$red: #b00020 !default; +$orange: #fd7e14 !default; +$yellow: #ee9700 !default; +$green: #004733 !default; +$teal: #00bb9c !default; +$cyan: #0dcaf0 !default; -$mode--light-bg: #f8fafb; -$mode--dark-bg: #262626; +$mode--light-bg: #f8fafb; +$mode--dark-bg: #262626; $gridGap: 20px; -$spacePadding: 17px; +$spacePadding: 17px; //Frame $frameWorkAreaPadding: 16px; @@ -24,7 +24,6 @@ $frameWorkAreaPadding: 16px; $mailtemplateNameListWidth: 245px; //Left Menu -$leftMenuWidth: 70px; $leftMenu-background: #2c2c2e; $leftMenu-color: #ddd; $leftMenu-HoverColour: $blue; diff --git a/src/Sass/_leftMenu.scss b/src/Sass/_leftMenu.scss index 311f04d..3917d1d 100644 --- a/src/Sass/_leftMenu.scss +++ b/src/Sass/_leftMenu.scss @@ -2,98 +2,122 @@ @import "../Sass/nav.scss"; .leftMenuSelected { - color: $leftMenu-selected-color !important; + color: $leftMenu-selected-color !important; } .leftMenuSubMenuOpen { - color: $leftMenu-submenu-open !important; + color: $leftMenu-submenu-open !important; +} + +.leftMenuContainer { + position: relative; + height: 100%; } .leftMenu { - height: 100%; - width: $leftMenuWidth; - background-color: $leftMenu-background; - color: $leftMenu-color; - padding-top: 5px; + height: 100%; + width: fit-content; + min-width: 70px; + max-width: 200px; + background-color: $leftMenu-background; + color: $leftMenu-color; + padding: 5px 8px; } -.LeftMenuItem{ - width: 100%; - height: 72px; - padding-top: 10px; - padding-bottom: 10px; +.LeftMenuItem { + width: 100%; + height: 72px; + padding-top: 10px; + padding-bottom: 10px; - a { - color: $leftMenu-color; - text-decoration-line: none; + a { + color: $leftMenu-color; + text-decoration-line: none; - &:hover { - color: $leftMenu-HoverColour; - } + &:hover { + color: $leftMenu-HoverColour; } + } } .leftMenuItemIcon { - margin: 0; - position: absolute; - left:50%; - transform: translatex(-50%); + margin: 0; + position: absolute; + left: 50%; + transform: translatex(-50%); - height: 50%; - display: inline-block; - vertical-align: top; - position: relative; - width: 50%; - text-align: center; - line-height: 100%; + height: 50%; + display: inline-block; + vertical-align: top; + position: relative; + width: 50%; + text-align: center; + line-height: 100%; } -.leftMenuItemLabel{ - width: 100%; - text-align: center; +.leftMenuItemLabel { + width: 100%; + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding: 0 8px; } .leftMenuSubMenu { - cursor: pointer; + cursor: pointer; - &:hover { - color: $leftMenu-HoverColour; - } + &:hover { + color: $leftMenu-HoverColour; + } } .subbar { - background-color: $leftMenu-background; - height: 100%; - left: $leftMenuWidth; - position: fixed; - top: $headerHeight; - width: 235px; - z-index: 1000; - border-left: 1px inset #999; + background-color: $leftMenu-background; + height: 100%; + left: 100%; + position: absolute; + top: 0; + width: 235px; + z-index: 1000; + border-left: 1px inset #999; + transform-origin: left; + animation: slideOut 0.3s ease-in-out; - .header { - color: $leftMenu-color; - font-size: 21px; - transform: translate(18px, 10px); - margin-bottom: 1rem; + .header { + color: $leftMenu-color; + font-size: 21px; + transform: translate(18px, 10px); + margin-bottom: 1rem; + } + + a { + color: $leftMenu-color; + display: block; + font-family: "Ubuntu-Light", sans-serif; + height: 40px; + padding-top: 9px; + margin: 0px 18px; + text-decoration-line: none; + + &:hover { + color: $leftMenu-HoverColour; + text-decoration: none; } - a { - color: $leftMenu-color; - display: block; - font-family: "Ubuntu-Light", sans-serif; - height: 40px; - padding-top: 9px; - margin: 0px 18px; - text-decoration-line: none; - - &:hover { - color: $leftMenu-HoverColour; - text-decoration: none; - } - - &:not(:last-child) { - border-bottom: 1px solid #bbb; - } + &:not(:last-child) { + border-bottom: 1px solid #bbb; } -} \ No newline at end of file + } +} + +@keyframes slideOut { + from { + transform: scaleX(0); + opacity: 0; + } + to { + transform: scaleX(1); + opacity: 1; + } +} diff --git a/src/Sass/horizionalTabs.scss b/src/Sass/horizionalTabs.scss index 192bb04..16d991b 100644 --- a/src/Sass/horizionalTabs.scss +++ b/src/Sass/horizionalTabs.scss @@ -1,19 +1,34 @@ .horizionalTabs { - .tab-list { - border-bottom: 1px solid #ccc; - padding-left: 0; - } - - .tab-list-item { - display: inline-block; - list-style: none; + .tab-list { + padding-left: 0; + display: flex; + align-items: bottom; + + &::after { + content: ""; + flex: 1; margin-bottom: -1px; - padding: 0.5rem 0.75rem; + border-bottom: 1px solid; + background-color: inherit; } - - .tab-list-active { - background-color: white; - border: solid #ccc; - border-width: 1px 1px 0 1px; - } - } \ No newline at end of file + } + + .tab-list-item { + display: inline-block; + list-style: none; + margin-bottom: -1px; + padding: 0.5rem 0.75rem; + } + + .tab-list-active { + border: solid; + border-width: 1px 1px 0 1px; + background-color: inherit; + } + + .tab-list-inactive { + border: solid; + border-width: 0 0 1px 0; + background-color: inherit; + } +} diff --git a/src/Sass/vars.scss b/src/Sass/vars.scss index 2c33c2f..bbaca12 100644 --- a/src/Sass/vars.scss +++ b/src/Sass/vars.scss @@ -2,7 +2,6 @@ $frameWorkAreaPadding: 16px; //Left Menu -$leftMenuWidth: 70px; $leftMenu-background: #2c2c2e; $leftMenu-color: #ddd; $leftMenu-HoverColour: $blue; diff --git a/src/components/common/HorizionalTabs.tsx b/src/components/common/HorizionalTabs.tsx index c2fa079..7ae4296 100644 --- a/src/components/common/HorizionalTabs.tsx +++ b/src/components/common/HorizionalTabs.tsx @@ -36,22 +36,19 @@ const HorizontalTabs: React.FC = ({ return (
-
-
    - {children.map((child) => { - const { label } = child.props; - return ( - - ); - })} -
-
- +
    + {children.map((child) => { + const { label } = child.props; + return ( + + ); + })} +
{activeTabChildren}
); diff --git a/src/components/common/TabHeader.tsx b/src/components/common/TabHeader.tsx index 4a212a3..d389168 100644 --- a/src/components/common/TabHeader.tsx +++ b/src/components/common/TabHeader.tsx @@ -15,7 +15,7 @@ export default function TabHeader({ const className = isActive ? "tab-list-item tab-list-active" - : "tab-list-item"; + : "tab-list-item tab-list-inactive"; return (
  • diff --git a/src/modules/frame/components/LeftMenu.tsx b/src/modules/frame/components/LeftMenu.tsx index d5e75b1..e3870dd 100644 --- a/src/modules/frame/components/LeftMenu.tsx +++ b/src/modules/frame/components/LeftMenu.tsx @@ -62,7 +62,7 @@ const LeftMenu: React.FC = () => { const viewSupport = viewAuditLog || viewBlockedIPAddresses || viewErrorLogs; return ( - <> +
    @@ -124,7 +124,7 @@ const LeftMenu: React.FC = () => {
    {openMenuItem &&
    {openMenuItem.children}
    } - +
    ); };