Revize ac59aec1

Created a layout of the annotation screen

Created a layout with empty panels. They will be done in other branches.

webapp/components/annotation/annotationPanel.tsx

@@ +1 @@
+/**
+ * Creates a panel in the annotation screen that contains a list of annotations.
+ * @returns Panel with a list of annotations.
+ */
+function AnnotationPanel() {
+    return (
+        <div>
+            <p>Panel with a list of annotations</p>
+        </div>
+    );
+}
+
+export default AnnotationPanel;

webapp/components/annotation/documentAnnotationView.tsx

@@ +1 @@
+/**
+ * Creates an annotation view of a document.
+ * @returns The annotation view.
+ */
+function DocumentAnnotationView() {
+    return (
+        <div>
+            <p>Main view with a rendered document</p>
+        </div>
+    );
+}
+
+export default DocumentAnnotationView;

webapp/components/annotation/tagPanel.tsx

@@ +1 @@
+/**
+ * Creates a panel in the annotation screen that contains a list of tag.
+ * @returns Panel with a list of tags.
+ */
+function TagPanel() {
+    return (
+        <div>
+            <p>Panel with a list of tags</p>
+        </div>
+    );
+}
+
+export default TagPanel;

webapp/components/navigation/userNavBar.tsx

@@ +1 @@
+/**
+ * Creates a navigation bar of a normal user (annotator).
+ * @returns Navigation bar of a user.
+ */
+function UserNavBar() {
+    return (
+        <div>
+            <p>Navigation bar of a normal user.</p>
+        </div>
+    );
+}
+
+export default UserNavBar;

webapp/layouts/annotationLayout.tsx

@@ +1 @@
+import { Layout } from 'antd';
+import AnnotationPanel from '../components/annotation/annotationPanel';
+import DocumentAnnotationView from '../components/annotation/documentAnnotationView';
+import TagPanel from '../components/annotation/tagPanel';
+import 'antd/dist/antd.css';
+import styles from '/styles/annotation.module.scss';
+import UserNavBar from '../components/navigation/userNavBar';
+
+const { Header, Content, Footer, Sider } = Layout;
+
+/**
+ * Creates a layout of a document annotation screen. It contains a panel with a list of tags and a panel with a list of annotations.
+ * @returns Annotation layout.
+ */
+function AnnotationLayout() {
+    return (
+        <Layout>
+            <Header>
+                <UserNavBar />
+            </Header>
+            <Layout hasSider>
+                <Sider className={styles.leftSidePanel}>
+                    <TagPanel />
+                </Sider>
+                <Content className={styles.mainView}>
+                    <DocumentAnnotationView />
+                </Content>
+                <Sider className={styles.rightSidePanel}>
+                    <AnnotationPanel />
+                </Sider>
+            </Layout>
+            <Footer></Footer>
+        </Layout>
+    );
+}
+
+export default AnnotationLayout;

webapp/pages/annotation.tsx

@@ +1 @@
+import AnnotationLayout from '../layouts/annotationLayout';
+
+/**
+ * Creates an annotation screen.
+ * @returns The annotation screen.
+ */
+function Annotation() {
+    return <AnnotationLayout />;
+}
+
+export default Annotation;

webapp/styles/annotation.module.scss

@@ +1 @@
+%lightBackground {
+    background: white;
+}
+
+%sidePanel {
+    @extend %lightBackground;
+    overflow: auto;
+    height: 100vh;
+    position: sticky;
+    top: 0;
+}
+
+.leftSidePanel {
+    @extend %sidePanel;
+    left: 0;
+}
+
+.rightSidePanel {
+    @extend %sidePanel;
+    right: 0;
+}
+
+.mainView {
+    @extend %lightBackground;
+    margin: 20px;
+}