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 {
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;
}
background: hsl(0, 0%, 100%);
color: black;
}

27
src/Sass/_esuiteVariables.scss
View File

@ -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;

158
src/Sass/_leftMenu.scss
View File

@ -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;
}
}
}
}
@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 {
.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;
}
}
}
.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;
}
}

1
src/Sass/vars.scss
View File

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

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

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

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

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