Revize 6a250c18

Layout and minor color changes

webapp/components/annotation/DocumentAnnotationView.tsx

@@ -26 +26 @@
     if (!annotation) {
         return <p>Probíhá načítání anotace ...</p>;
     }
-    
+
     const onChangeNote = (e: ChangeEvent<HTMLTextAreaElement>) => {
         changeDocumentNote(e.currentTarget.value);
     };
@@ -76 +76 @@
 
     return (
         <div>
-        	<div className="mb-3">
+            <div className="mb-3">
                 <h5>Poznámka</h5>
                 <Input.TextArea
                     defaultValue={annotation.note ?? ''}
                     onBlur={onChangeNote}
                 />
             </div>
+            <hr />
+
             {getCss()}
             <div onClick={detectSelectedElement}>
                 {parse(annotation.documentToRender ?? '')}

webapp/components/navigation/AdminNavBar.tsx

@@ -3 +3 @@
 import { useRouter } from 'next/router';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { LoggedUserContext } from '../../contexts/LoggedUserContext';
-import {
-    faUser,
-    faFileExport,
-    faFileLines,
-    faUsers,
-    faTags,
-    faBookmark,
-} from '@fortawesome/free-solid-svg-icons';
+import { faFileLines, faTags, faUser, faUsers } from '@fortawesome/free-solid-svg-icons';
 import { userController } from '../../controllers';
-import { UserInfo } from '../../api';
+import { COLOR_NAVBAR } from '../../constants';
 
 const AdminNavBar = () => {
     const router = useRouter();
@@ -20 +13 @@
     const { SubMenu } = Menu;
     const [name, setName] = useState<string>('');
 
-    const handleLogout = useCallback(() => {
-        logout();
-        router.push('/login');
+    const handleLogout = useCallback(async () => {
+        await logout();
+        await router.push('/login');
     }, [logout, router]);
 
     async function fetchUsername() {
@@ -35 +28 @@
     }, []);
 
     return (
-        <Menu theme="dark" mode="horizontal">
-            <Menu.Item style={{}} key="1" onClick={() => router.push('/documents/admin')}>
-                <FontAwesomeIcon icon={faFileLines} /> Dokumenty
-            </Menu.Item>
-            <Menu.Item style={{}} key="2" onClick={() => router.push('/users')}>
-                <FontAwesomeIcon icon={faUsers} /> Uživatelé
-            </Menu.Item>
-            <Menu.Item style={{}} key="3" onClick={() => router.push('/tags')}>
-                <FontAwesomeIcon icon={faTags} /> Značky
-            </Menu.Item>
-            <Menu.Item style={{}} key="5" onClick={() => router.push('/export')}>
-                <FontAwesomeIcon icon={faFileExport} /> Export
-            </Menu.Item>
-
-            <SubMenu icon={<FontAwesomeIcon icon={faUser} />} key="account" title={name}>
-                <Menu.Item key="setting:2" onClick={() => handleLogout()}>
-                    Odhlásit se
+        <div className={'navbar-wrapper'}>
+            <Menu theme="dark" mode="horizontal" style={{ flexGrow: 1 }}>
+                <Menu.Item
+                    style={{}}
+                    key="1"
+                    onClick={() => router.push('/documents/admin')}
+                >
+                    <FontAwesomeIcon icon={faFileLines} /> Dokumenty
+                </Menu.Item>
+                <Menu.Item style={{}} key="2" onClick={() => router.push('/users')}>
+                    <FontAwesomeIcon icon={faUsers} /> Uživatelé
+                </Menu.Item>
+                <Menu.Item style={{}} key="3" onClick={() => router.push('/tags')}>
+                    <FontAwesomeIcon icon={faTags} /> Značky
                 </Menu.Item>
-            </SubMenu>
-        </Menu>
+            </Menu>
+            <Menu theme="dark" mode="horizontal" style={{}}>
+                <SubMenu
+                    icon={<FontAwesomeIcon icon={faUser} />}
+                    key="account"
+                    title={name}
+                >
+                    <Menu.Item key="setting:2" onClick={() => handleLogout()}>
+                        Odhlásit se
+                    </Menu.Item>
+                </SubMenu>
+            </Menu>
+        </div>
     );
 };
 

webapp/components/navigation/UserNavBar.tsx

@@ -27 +27 @@
     }, []);
 
     return (
-        <Menu theme="dark" mode="horizontal">
-            <Menu.Item key="1" onClick={() => router.push('/documents/annotator')}>
-                <FontAwesomeIcon icon={faFileLines} /> Dokumenty
-            </Menu.Item>
-
-            <SubMenu key="account" icon={<FontAwesomeIcon icon={faUser} />} title={name}>
-                <Menu.Item key="setting:2" onClick={() => handleLogout()}>
-                    Odhlásit se
+        <div className={'navbar-wrapper'}>
+            <Menu theme="dark" mode="horizontal" style={{ flexGrow: 1 }}>
+                <Menu.Item key="1" onClick={() => router.push('/documents/annotator')}>
+                    <FontAwesomeIcon icon={faFileLines} /> Dokumenty
                 </Menu.Item>
-            </SubMenu>
-        </Menu>
+            </Menu>
+            <Menu theme="dark" mode="horizontal">
+                <SubMenu
+                    key="account"
+                    icon={<FontAwesomeIcon icon={faUser} />}
+                    title={name}
+                >
+                    <Menu.Item key="setting:2" onClick={() => handleLogout()}>
+                        Odhlásit se
+                    </Menu.Item>
+                </SubMenu>
+            </Menu>
+        </div>
     );
 };
 

webapp/constants.ts

@@ -16 +16 @@
 export const COLOR_WARNING = 'darkorange';
 export const COLOR_ERROR = 'indianred';
 
-export const COLOR_HIGHLIGHTED_TAG = '#97BDC4';
-export const COLOR_HIGHLIGHTED_OCCURRENCE = '#D8E1E9';
+export const COLOR_NAVBAR = '#343434';
+
+export const COLOR_HIGHLIGHTED_TAG = '#CBDEE2';
+export const COLOR_HIGHLIGHTED_OCCURRENCE = '#B1CDD3';
 
 export const COLOR_ALL_OCCURRENCES_ACCEPTED = '#B6CEB7';
 export const COLOR_OCCURRENCE_ACCEPTED = '#9DBE9E';

webapp/layouts/AnnotationLayout.tsx

@@ +1 @@
+import 'antd/dist/antd.css';
+import styles from '/styles/MainLayout.module.scss';
+import Navbar from './Navbar';
+
+/**
+ * Creates layout of main screens.
+ * @param props Html structure of a login form.
+ * @returns The login screen.
+ */
+export function AnnotationLayout(props: { children: React.ReactNode }) {
+    return (
+        <div className={styles.layoutWrapper}>
+            <Navbar />
+            <main className={styles.contentAnnotator}>{props.children}</main>
+        </div>
+    );
+}
+
+export default AnnotationLayout;

webapp/layouts/MainLayout.tsx

@@ -1 +1 @@
 import 'antd/dist/antd.css';
 import styles from '/styles/MainLayout.module.scss';
-import { useContext } from 'react';
-import { LoggedUserContext } from '../contexts/LoggedUserContext';
-import AdminNavBar from '../components/navigation/AdminNavBar';
-import UserNavBar from '../components/navigation/UserNavBar';
+import Navbar from './Navbar';
 
 /**
  * Creates layout of main screens.
@@ -11 +8 @@
  * @returns The login screen.
  */
 export function MainLayout(props: { children: React.ReactNode }) {
-    const { role } = useContext(LoggedUserContext);
-    const isAdmin = role === 'ADMINISTRATOR';
-    const isAnnotator = role === 'ANNOTATOR';
-
     return (
         <div className={styles.layoutWrapper}>
-            <div className={styles.header}>
-                {(isAdmin && <AdminNavBar />) || (isAnnotator && <UserNavBar />)}
-            </div>
+            <Navbar />
             <main className={styles.content}>{props.children}</main>
-            <div className={styles.footer} />
         </div>
     );
 }
+
+export default MainLayout;

webapp/layouts/Navbar.tsx

@@ +1 @@
+import styles from '/styles/MainLayout.module.scss';
+import AdminNavBar from '../components/navigation/AdminNavBar';
+import UserNavBar from '../components/navigation/UserNavBar';
+import { useContext } from 'react';
+import { LoggedUserContext } from '../contexts/LoggedUserContext';
+
+export function Navbar() {
+    const { role } = useContext(LoggedUserContext);
+    const isAdmin = role === 'ADMINISTRATOR';
+    const isAnnotator = role === 'ANNOTATOR';
+
+    return (
+        <div className={styles.header}>
+            {(isAdmin && <AdminNavBar />) || (isAnnotator && <UserNavBar />)}
+        </div>
+    );
+}
+
+export default Navbar;

webapp/pages/annotation/[id].tsx

@@ -8 +8 @@
 import TagCategoryProvider from '../../contexts/TagCategoryContext';
 
 import { useRouter } from 'next/router';
+import AnnotationLayout from '../../layouts/AnnotationLayout';
 
 /**
  * Creates an annotation screen.
@@ -35 +36 @@
     return (
         <AnnotationProvider annotationId={annotationId} isFinal={isFinal}>
             <TagCategoryProvider>
-                <MainLayout>
+                <AnnotationLayout>
                     <div className={styles.layoutWrapper}>
                         <div className={styles.tags}>
                             <TagPanel />
@@ -47 +48 @@
                             <AnnotationPanel />
                         </div>
                     </div>
-                </MainLayout>
+                </AnnotationLayout>
             </TagCategoryProvider>
         </AnnotationProvider>
     );

webapp/pages/tags/index.tsx

@@ -462 +462 @@
                 />
             )}
 
-            <Container>
-                <Row>
-                    <Typography.Title level={2}>
-                        <FontAwesomeIcon icon={faTags} /> Značky
-                    </Typography.Title>
-                </Row>
-                <Row>
-                    <Table
-                        columns={columns}
-                        dataSource={shownData}
-                        scroll={{ y: 'calc(100vh - 300px)' }}
-                        size="small"
-                        title={() => (
-                            <Stack direction="horizontal" gap={3}>
-                                <Button type="primary" onClick={openAddCategoryModal}>
-                                    Přidat kategorii
-                                </Button>
-                                <Search
-                                    placeholder="Vyhledání tagu"
-                                    onSearch={searchTag}
-                                    style={{ width: 200 }}
-                                    className="ms-auto"
-                                    allowClear
-                                />
-                            </Stack>
-                        )}
-                    />
-                </Row>
-            </Container>
+            <Row>
+                <Typography.Title level={2}>
+                    <FontAwesomeIcon icon={faTags} /> Značky
+                </Typography.Title>
+            </Row>
+            <Row>
+                <Table
+                    columns={columns}
+                    dataSource={shownData}
+                    scroll={{ y: 'calc(100vh - 300px)' }}
+                    size="small"
+                    title={() => (
+                        <Stack direction="horizontal" gap={3}>
+                            <Button type="primary" onClick={openAddCategoryModal}>
+                                Přidat kategorii
+                            </Button>
+                            <Search
+                                placeholder="Vyhledání tagu"
+                                onSearch={searchTag}
+                                style={{ width: 200 }}
+                                className="ms-auto"
+                                allowClear
+                            />
+                        </Stack>
+                    )}
+                />
+            </Row>
         </MainLayout>
     );
 }

webapp/styles/Annotation.module.scss

@@ -9 +9 @@
     height:100%;
     place-items: stretch;
     place-content: stretch;
-    gap: 3px;
+    gap: 8px;
+
+    background-color: #AA6373;
 }
 
 %annotationContent {
     background-color: white;
-    padding: 10px 0px 10px 10px;
+    padding: 10px;
     overflow-y: scroll;
+    background-color: white;
+
+    -webkit-box-shadow: 5px 5px 5px 5px rgba(138,138,138,0.75);
+    box-shadow: 5px 5px 5px 5px rgba(138,138,138,0.75);
 }
 
 .tags {
@@ -26 +32 @@
 .annotations {
     @extend %annotationContent;
     grid-area: annotations;
-
-
 }
 
 .document {

webapp/styles/MainLayout.module.scss

@@ -4 +4 @@
 
     grid:
         [header-start] 'header' 50px [header-end]
-        [main-start] 'content' [main-end]
-        [footer-start] 'footer' 30px [footer-end];
+        [main-start] 'content' [main-end];
 
     place-items: stretch;
     place-content: stretch;
@@ -13 +12 @@
     width: 100vw;
     height: 100vh;
 
-    gap: 3px;
+    gap: 0;
+    background-color: dimgray;
 }
 
 .header {
     grid-area: header;
-
 }
 
 .content {
     grid-area: content;
     overflow-y: hidden;
+    padding: 20px;
+    background-color: white;
+    margin: 8px;
+    border-radius: 6px;
+
+    -webkit-box-shadow: 5px 5px 5px 5px rgba(138,138,138,0.75);
+    box-shadow: 5px 5px 5px 5px rgba(138,138,138,0.75);
+}
+
+.contentAnnotator {
+    grid-area: content;
+    //@extend .content;
+    margin: 8px;
+
+    padding: 0;
+    overflow-y: hidden;
 }
 
 .footer {

webapp/styles/globals.css

@@ -14 +14 @@
 * {
   box-sizing: border-box;
 }
+
+.navbar-wrapper{
+  width: 100vw;
+  margin: 0;
+  display: flex;
+  justify-content: space-around;
+  padding-left: 10px;
+  padding-right: 10px;
+  background: #001529;
+}