e-suite/webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Lots of UI tweaks

Browse Source
This commit is contained in:
Colin Dawson 2026-01-31 23:27:01 +00:00
parent 7ad4f58801
commit c95d7b469c
8 changed files with 219 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
src/Sass/_ckEditor.scss
View File

@ -1,80 +1,79 @@
@import './_esuiteVariables.scss'; @import "./_esuiteVariables.scss";
.form-editor { .form-editor {
min-width: calc(100vw - ($leftMenuWidth + ($frameWorkAreaPadding * 2) + $spacePadding)); width: 100%;
max-width: calc(100vw - ($leftMenuWidth + ($frameWorkAreaPadding * 2) + $spacePadding));
} }
.mailTemplate-editor { .mailTemplate-editor {
min-width: calc(100vw - ($leftMenuWidth + $gridGap + $mailtemplateNameListWidth + ($frameWorkAreaPadding * 2) + $spacePadding)); width: calc(100% - ($gridGap + $mailtemplateNameListWidth));
max-width: calc(100vw - ($leftMenuWidth + $gridGap + $mailtemplateNameListWidth + ($frameWorkAreaPadding * 2) + $spacePadding));
} }
@media print { @media print {
body { body {
margin: 0 !important; margin: 0 !important;
} }
} }
.ck-main-container { .ck-main-container {
// --ckeditor5-preview-height: 700px; // --ckeditor5-preview-height: 700px;
font-family: 'Lato'; font-family: "Lato";
width: fit-content; width: fit-content;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
.ck { .ck {
.ck-dropdown__panel { .ck-dropdown__panel {
.ck-list{ .ck-list {
max-height: 30vh; max-height: 30vh;
overflow-y: auto; overflow-y: auto;
} }
} }
} }
} }
.ck-content { .ck-content {
font-family: 'Lato'; font-family: "Lato";
line-height: 1.6; line-height: 1.6;
word-break: break-word; word-break: break-word;
.table table { .table table {
overflow: auto; overflow: auto;
} }
} }
.editor-container__editor-wrapper { .editor-container__editor-wrapper {
display: flex; display: flex;
width: fit-content; width: fit-content;
} }
.editor-container_document-editor { .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 { .editor-container_document-editor .editor-container__toolbar {
display: flex; display: flex;
position: relative; position: relative;
box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.078); box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.078);
} }
.editor-container_document-editor .editor-container__toolbar > .ck.ck-toolbar { .editor-container_document-editor .editor-container__toolbar > .ck.ck-toolbar {
flex-grow: 1; flex-grow: 1;
width: 0; width: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-top: 0; border-top: 0;
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;
} }
.editor-container_document-editor .editor-container__menu-bar > .ck.ck-menu-bar { .editor-container_document-editor
border-bottom-right-radius: 0; .editor-container__menu-bar
border-bottom-left-radius: 0; > .ck.ck-menu-bar {
border-top: 0; border-bottom-right-radius: 0;
border-left: 0; border-bottom-left-radius: 0;
border-right: 0; border-top: 0;
border-left: 0;
border-right: 0;
} }
// .editor-container_document-editor .editor-container__editor-wrapper { // .editor-container_document-editor .editor-container__editor-wrapper {
@ -90,29 +89,30 @@
// height: 100%; // height: 100%;
// } // }
.editor-container_document-editor .editor-container__editor .ck.ck-editor__editable { .editor-container_document-editor
box-sizing: border-box; .editor-container__editor
//min-width: calc(100vw - ($leftMenuWidth + ($frameWorkAreaPadding * 2))); .ck.ck-editor__editable {
//max-width: calc(100vw - ($leftMenuWidth + ($frameWorkAreaPadding * 2))); box-sizing: border-box;
//min-width: calc(100vw - ($leftMenuWidth + ($frameWorkAreaPadding * 2)));
//max-width: calc(100vw - ($leftMenuWidth + ($frameWorkAreaPadding * 2)));
min-width: 100%; min-width: 100%;
max-width: 100%; max-width: 100%;
// min-width: calc(210mm + 2px); // min-width: calc(210mm + 2px);
// max-width: calc(210mm + 2px); // max-width: calc(210mm + 2px);
height: fit-content; height: fit-content;
// padding: 20mm 12mm; // padding: 20mm 12mm;
border: 1px hsl(0, 0%, 82.7%) solid; border: 1px hsl(0, 0%, 82.7%) solid;
//background: hsl(0, 0%, 100%); //background: hsl(0, 0%, 100%);
//color: black; //color: black;
box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.078); box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.078);
flex: 1 1 auto; flex: 1 1 auto;
// margin-left: 72px; // margin-left: 72px;
// margin-right: 72px; // margin-right: 72px;
} }
.ck-toolbar { .ck-toolbar {
background: hsl(0, 0%, 100%); background: hsl(0, 0%, 100%);
color: black; color: black;
} }

27
src/Sass/_esuiteVariables.scss
View File

@ -1,21 +1,21 @@
// Overrides for Bootstrap variables light mode // Overrides for Bootstrap variables light mode
$blue: #6262fb !default; $blue: #6262fb !default;
$indigo: #6610f2 !default; $indigo: #6610f2 !default;
$purple: #6f42c1 !default; $purple: #6f42c1 !default;
$pink: #de6c74 !default; $pink: #de6c74 !default;
$red: #b00020 !default; $red: #b00020 !default;
$orange: #fd7e14 !default; $orange: #fd7e14 !default;
$yellow: #ee9700 !default; $yellow: #ee9700 !default;
$green: #004733 !default; $green: #004733 !default;
$teal: #00bb9c !default; $teal: #00bb9c !default;
$cyan: #0dcaf0 !default; $cyan: #0dcaf0 !default;
$mode--light-bg: #f8fafb; $mode--light-bg: #f8fafb;
$mode--dark-bg: #262626; $mode--dark-bg: #262626;
$gridGap: 20px; $gridGap: 20px;
$spacePadding: 17px; $spacePadding: 17px;
//Frame //Frame
$frameWorkAreaPadding: 16px; $frameWorkAreaPadding: 16px;
@ -24,7 +24,6 @@ $frameWorkAreaPadding: 16px;
$mailtemplateNameListWidth: 245px; $mailtemplateNameListWidth: 245px;
//Left Menu //Left Menu
$leftMenuWidth: 70px;
$leftMenu-background: #2c2c2e; $leftMenu-background: #2c2c2e;
$leftMenu-color: #ddd; $leftMenu-color: #ddd;
$leftMenu-HoverColour: $blue; $leftMenu-HoverColour: $blue;

158
src/Sass/_leftMenu.scss
View File

@ -2,98 +2,122 @@
@import "../Sass/nav.scss"; @import "../Sass/nav.scss";
.leftMenuSelected { .leftMenuSelected {
color: $leftMenu-selected-color !important; color: $leftMenu-selected-color !important;
} }
.leftMenuSubMenuOpen { .leftMenuSubMenuOpen {
color: $leftMenu-submenu-open !important; color: $leftMenu-submenu-open !important;
}
.leftMenuContainer {
position: relative;
height: 100%;
} }
.leftMenu { .leftMenu {
height: 100%; height: 100%;
width: $leftMenuWidth; width: fit-content;
background-color: $leftMenu-background; min-width: 70px;
color: $leftMenu-color; max-width: 200px;
padding-top: 5px; background-color: $leftMenu-background;
color: $leftMenu-color;
padding: 5px 8px;
} }
.LeftMenuItem{ .LeftMenuItem {
width: 100%; width: 100%;
height: 72px; height: 72px;
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
a { a {
color: $leftMenu-color; color: $leftMenu-color;
text-decoration-line: none; text-decoration-line: none;
&:hover { &:hover {
color: $leftMenu-HoverColour; color: $leftMenu-HoverColour;
}
} }
}
} }
.leftMenuItemIcon { .leftMenuItemIcon {
margin: 0; margin: 0;
position: absolute; position: absolute;
left:50%; left: 50%;
transform: translatex(-50%); transform: translatex(-50%);
height: 50%; height: 50%;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
position: relative; position: relative;
width: 50%; width: 50%;
text-align: center; text-align: center;
line-height: 100%; line-height: 100%;
} }
.leftMenuItemLabel{ .leftMenuItemLabel {
width: 100%; width: 100%;
text-align: center; text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 8px;
} }
.leftMenuSubMenu { .leftMenuSubMenu {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: $leftMenu-HoverColour; color: $leftMenu-HoverColour;
} }
} }
.subbar { .subbar {
background-color: $leftMenu-background; background-color: $leftMenu-background;
height: 100%; height: 100%;
left: $leftMenuWidth; left: 100%;
position: fixed; position: absolute;
top: $headerHeight; top: 0;
width: 235px; width: 235px;
z-index: 1000; z-index: 1000;
border-left: 1px inset #999; border-left: 1px inset #999;
transform-origin: left;
animation: slideOut 0.3s ease-in-out;
.header { .header {
color: $leftMenu-color; color: $leftMenu-color;
font-size: 21px; font-size: 21px;
transform: translate(18px, 10px); transform: translate(18px, 10px);
margin-bottom: 1rem; 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 { &:not(:last-child) {
color: $leftMenu-color; border-bottom: 1px solid #bbb;
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;
}
} }
} }
}
@keyframes slideOut {
from {
transform: scaleX(0);
opacity: 0;
}
to {
transform: scaleX(1);
opacity: 1;
}
}

47
src/Sass/horizionalTabs.scss
View File

@ -1,19 +1,34 @@
.horizionalTabs { .horizionalTabs {
.tab-list { .tab-list {
border-bottom: 1px solid #ccc; padding-left: 0;
padding-left: 0; display: flex;
} align-items: bottom;
.tab-list-item { &::after {
display: inline-block; content: "";
list-style: none; flex: 1;
margin-bottom: -1px; margin-bottom: -1px;
padding: 0.5rem 0.75rem; border-bottom: 1px solid;
background-color: inherit;
} }
}
.tab-list-active {
background-color: white; .tab-list-item {
border: solid #ccc; display: inline-block;
border-width: 1px 1px 0 1px; 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;
}
}

1
src/Sass/vars.scss
View File

@ -2,7 +2,6 @@
$frameWorkAreaPadding: 16px; $frameWorkAreaPadding: 16px;
//Left Menu //Left Menu
$leftMenuWidth: 70px;
$leftMenu-background: #2c2c2e; $leftMenu-background: #2c2c2e;
$leftMenu-color: #ddd; $leftMenu-color: #ddd;
$leftMenu-HoverColour: $blue; $leftMenu-HoverColour: $blue;

29
src/components/common/HorizionalTabs.tsx
View File

@ -36,22 +36,19 @@ const HorizontalTabs: React.FC<HorizontalTabsProps> = ({
return ( return (
<div className="horizionalTabs"> <div className="horizionalTabs">
<div> <ul className="tab-list">
<ul className="tab-list"> {children.map((child) => {
{children.map((child) => { const { label } = child.props;
const { label } = child.props; return (
return ( <TabHeader
<TabHeader key={label}
key={label} label={label}
label={label} isActive={label === activeTab}
isActive={label === activeTab} onClick={onClickTabItem}
onClick={onClickTabItem} />
/> );
); })}
})} </ul>
</ul>
</div>
<div>{activeTabChildren}</div> <div>{activeTabChildren}</div>
</div> </div>
); );

2
src/components/common/TabHeader.tsx
View File

@ -15,7 +15,7 @@ export default function TabHeader({
const className = isActive const className = isActive
? "tab-list-item tab-list-active" ? "tab-list-item tab-list-active"
: "tab-list-item"; : "tab-list-item tab-list-inactive";
return ( return (
<li className={className} onClick={handleClick}> <li className={className} onClick={handleClick}>

4
src/modules/frame/components/LeftMenu.tsx
View File

@ -62,7 +62,7 @@ const LeftMenu: React.FC = () => {
const viewSupport = viewAuditLog || viewBlockedIPAddresses || viewErrorLogs; const viewSupport = viewAuditLog || viewBlockedIPAddresses || viewErrorLogs;
return ( return (
<> <div className="leftMenuContainer">
<div className="leftMenu"> <div className="leftMenu">
<LeftMenuItem to="/" icon={faHome} label={t("Home")} /> <LeftMenuItem to="/" icon={faHome} label={t("Home")} />
@ -124,7 +124,7 @@ const LeftMenu: React.FC = () => {
</div> </div>
{openMenuItem && <div className="subbar">{openMenuItem.children}</div>} {openMenuItem && <div className="subbar">{openMenuItem.children}</div>}
</> </div>
); );
}; };