Lots of UI tweaks
This commit is contained in:
parent
7ad4f58801
commit
c95d7b469c
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
$frameWorkAreaPadding: 16px;
|
||||
|
||||
//Left Menu
|
||||
$leftMenuWidth: 70px;
|
||||
$leftMenu-background: #2c2c2e;
|
||||
$leftMenu-color: #ddd;
|
||||
$leftMenu-HoverColour: $blue;
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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}>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user