Skip to content
Snippets Groups Projects
Commit d1fbdf41 authored by Matthias Feyll's avatar Matthias Feyll :cookie:
Browse files

(ui): refactor minor styles

parent 6069e4e1
Branches ui-implement-metadata-screen
No related tags found
2 merge requests!1196[renovate] Update module golang.org/x/net to v0.32.0,!1195UI: implement add device functionality
Pipeline #254664 passed
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
} }
& tr:hover > td { & tr:hover > td {
background-color: map-get($theme-colors, "primary::hover"); background-color: map-get($theme-colors, "primary-hover");
cursor: pointer; cursor: pointer;
} }
......
import { faPlus } from '@fortawesome/free-solid-svg-icons'; import { faCircleInfo, faPlus, faServer, faSliders } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { GridLayout } from '@layout/grid.layout/grid.layout'; import { GridLayout } from '@layout/grid.layout/grid.layout';
import { GridBox } from '@shared/components/box/gridBox.view'; import { GridBox } from '@shared/components/box/gridBox.view';
...@@ -20,7 +20,7 @@ const DeviceView = () => { ...@@ -20,7 +20,7 @@ const DeviceView = () => {
<GridLayout> <GridLayout>
<> <>
<div key="device-list"> <div key="device-list">
<GridBox title={t("device.title")}> <GridBox title={t("device.box.list.title")} title_icon={faServer}>
<Row className="mb-3 align-items-center"> <Row className="mb-3 align-items-center">
<Col xs={12} md={6} lg={8}> <Col xs={12} md={6} lg={8}>
<Form.Group controlId='device.search'> <Form.Group controlId='device.search'>
...@@ -28,7 +28,7 @@ const DeviceView = () => { ...@@ -28,7 +28,7 @@ const DeviceView = () => {
</Form.Group> </Form.Group>
</Col> </Col>
<Col xs={12} md={6} lg={4} className='mt-3 mt-md-0 text-md-end'> <Col xs={12} md={6} lg={4} className='mt-3 mt-md-0 text-md-end'>
<Button variant='primary'> <Button variant='primary::button' className='btn-primary-button'>
<FontAwesomeIcon icon={faPlus} className='me-2' /> <FontAwesomeIcon icon={faPlus} className='me-2' />
{t('device.add_device_button')} {t('device.add_device_button')}
</Button> </Button>
...@@ -43,7 +43,7 @@ const DeviceView = () => { ...@@ -43,7 +43,7 @@ const DeviceView = () => {
</div> </div>
<div key="device-metadata"> <div key="device-metadata">
<GridBox title={t("device.title")}> <GridBox title={t("device.box.information.title")} title_icon={faCircleInfo}>
<Row> <Row>
<Col xs={12} > <Col xs={12} >
<DeviceListCollapsable search={searchRef.current?.value || ''} /> <DeviceListCollapsable search={searchRef.current?.value || ''} />
...@@ -53,7 +53,7 @@ const DeviceView = () => { ...@@ -53,7 +53,7 @@ const DeviceView = () => {
</div> </div>
<div key="device-details"> <div key="device-details">
<GridBox title={t('device.tabs.yang_model.title')}> <GridBox title={t('device.box.configuration.title')} title_icon={faSliders}>
<Row> <Row>
<Col xs={12}> <Col xs={12}>
{jsonYang && <JsonViewer json={jsonYang} />} {jsonYang && <JsonViewer json={jsonYang} />}
......
...@@ -11,6 +11,9 @@ ...@@ -11,6 +11,9 @@
}, },
"menu_item": { "menu_item": {
"logout": "Logout" "logout": "Logout"
},
"box": {
"lastUpdate": "Last updated {{seconds}} seconds ago"
} }
}, },
"json_viewer": { "json_viewer": {
...@@ -29,7 +32,17 @@ ...@@ -29,7 +32,17 @@
} }
}, },
"device": { "device": {
"title": "Device list", "box": {
"list": {
"title": "Devices"
},
"information": {
"title": "Information"
},
"configuration": {
"title": "Configuration"
}
},
"table": { "table": {
"header": { "header": {
"name": "Name", "name": "Name",
...@@ -45,15 +58,7 @@ ...@@ -45,15 +58,7 @@
"search": { "search": {
"placeholder": "Search" "placeholder": "Search"
}, },
"add_device_button": "Add device", "add_device_button": "Add device"
"tabs": {
"yang_model": {
"title": "YANG Model"
}
},
"box": {
"lastUpdate": "Last updated {{seconds}} seconds ago"
}
}, },
"protected": { "protected": {
"link": { "link": {
......
import { faGripVertical } from "@fortawesome/free-solid-svg-icons" import { faGripVertical, IconDefinition } from "@fortawesome/free-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import UpdateIndicator from "@layout/grid.layout/update-inidicator.layout/update-indicator.layout" import UpdateIndicator from "@layout/grid.layout/update-inidicator.layout/update-indicator.layout"
import { Category, CategoryType } from "@shared/types/category.type" import { Category, CategoryType } from "@shared/types/category.type"
...@@ -7,12 +7,13 @@ import './gridBox.view.scss' ...@@ -7,12 +7,13 @@ import './gridBox.view.scss'
interface GridBoxProps { interface GridBoxProps {
title: string, title: string,
title_icon: IconDefinition,
children: React.ReactNode, children: React.ReactNode,
className?: string, className?: string,
} }
export const GridBox: React.FC<GridBoxProps> = ({ children, title, className = "" }) => { export const GridBox: React.FC<GridBoxProps> = ({ children, title, title_icon, className = "" }) => {
return ( return (
<div className="grid-box h-100"> <div className="grid-box h-100">
<Container fluid className={`c-box d-flex flex-column h-100 ${className}`}> <Container fluid className={`c-box d-flex flex-column h-100 ${className}`}>
...@@ -24,7 +25,8 @@ export const GridBox: React.FC<GridBoxProps> = ({ children, title, className = " ...@@ -24,7 +25,8 @@ export const GridBox: React.FC<GridBoxProps> = ({ children, title, className = "
<FontAwesomeIcon icon={faGripVertical} className="drag-handle" /> <FontAwesomeIcon icon={faGripVertical} className="drag-handle" />
<Row className="mb-0"> <Row className="mb-0">
<Col xs={12}> <Col xs={12}>
<h4 className='c-box-title'>{title}</h4>
<h4 className='c-box-title'><FontAwesomeIcon icon={title_icon} size="1x" className="me-2 text-primary" />{title}</h4>
</Col> </Col>
</Row> </Row>
</div> </div>
......
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
} }
&:hover > td { &:hover > td {
background-color: map-get($theme-colors, "primary::hover") !important; background-color: map-get($theme-colors, "primary-hover") !important;
} }
&:hover .icons { &:hover .icons {
......
...@@ -29,7 +29,7 @@ export const JsonViewer = ({ json, options = { searchEnabled: true, editable: tr ...@@ -29,7 +29,7 @@ export const JsonViewer = ({ json, options = { searchEnabled: true, editable: tr
path += parentKey + (parentKey === "" ? "" : "/") path += parentKey + (parentKey === "" ? "" : "/")
if (Object.entries(innerJson).length === 0) { if (Object.entries(innerJson).length === 0) {
return <Skeleton count={3}></Skeleton> return <tr><td><Skeleton count={3}></Skeleton></td></tr>
} }
return Object.entries(innerJson).map(([key, child]): JSX.Element => { return Object.entries(innerJson).map(([key, child]): JSX.Element => {
......
...@@ -20,8 +20,6 @@ ...@@ -20,8 +20,6 @@
} }
.react-grid-item { .react-grid-item {
transition: none !important;
&.resizing { &.resizing {
z-index: 1; z-index: 1;
will-change: transform; will-change: transform;
...@@ -29,14 +27,11 @@ ...@@ -29,14 +27,11 @@
} }
.react-grid-item { .react-grid-item {
height: 100px;
/* Hide resize handle by default */
.custom-resize-handle { .custom-resize-handle {
opacity: 0; opacity: 0;
transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;
} }
/* Show resize handle on container hover */
&:hover .custom-resize-handle { &:hover .custom-resize-handle {
opacity: 1; opacity: 1;
} }
...@@ -65,14 +60,6 @@ ...@@ -65,14 +60,6 @@
} }
} }
.react-grid-item {
&.react-draggable-dragging {
.drag-handle {
cursor: grabbing;
}
}
}
.react-grid-item.react-grid-placeholder { .react-grid-item.react-grid-placeholder {
background: lighten(map-get($theme-colors, primary), 10%) !important; background: lighten(map-get($theme-colors, primary), 10%) !important;
opacity: 0.2; opacity: 0.2;
...@@ -86,21 +73,6 @@ ...@@ -86,21 +73,6 @@
user-select: none; user-select: none;
} }
.react-grid-item {
height: 100px;
/* Hide resize handle by default */
.react-resizable-handle-se {
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
/* Show resize handle on container hover */
&:hover .react-resizable-handle-se {
opacity: 1;
}
}
/* Style the resize handle */
.react-resizable-handle-se { .react-resizable-handle-se {
position: absolute; position: absolute;
right: 0; right: 0;
......
...@@ -39,7 +39,7 @@ nav { ...@@ -39,7 +39,7 @@ nav {
&.active { &.active {
color: map-get($theme-colors, "primary"); color: map-get($theme-colors, "primary");
background-color: map-get($theme-colors, "primary::hover"); background-color: map-get($theme-colors, "primary-button");
} }
} }
......
$theme-colors: ( $theme-colors: (
"primary": #b350e0, "primary": #b350e0,
"primary::hover": #ddaff3af, "primary-hover": #ddaff3af,
"primary-button": #ddaff3af,
"bg-primary": #ededed, "bg-primary": #ededed,
"danger": #ff0000, "danger": #ff0000,
"warning": #dbd116, "warning": #dbd116,
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment