Add first draft of news ui

frontend/src/api/user-info.ts

@@ -0,0 +1 @@
+export type UserType = "admin" | "user";

frontend/src/css/main.css

@@ -21,10 +21,12 @@
     margin-bottom: 1.25%;
 }
 
+.news-ui-general {
+    margin-bottom: 15vh;
+}
+
 .news-ui {
     width: 40%;
-    margin-bottom:
-    calc(15vh);
     margin-left: 30%;
     margin-right: 30%;
     backdrop-filter: blur(3px);
@@ -44,3 +46,12 @@
     width: 100vw;
     height: 100vh;
 }
+
+.round {
+    border-radius: 100% !important;
+    /*overflow: hidden;*/
+}
+
+.news-ui-action {
+    margin-left: 95%;
+}

frontend/src/pages/feed/news.ts

@@ -1,12 +1,76 @@
 import { NewsItem } from "./news-item";
 import { DefaultElement } from "../default-element";
 import { GefestHeader } from "../../modules/Gefest/primitives/header";
+import { UserType } from "../../api/user-info";
+import { GefestElement } from "../../modules/Gefest/element";
+import { GefestI } from "../../modules/Gefest/primitives/i";
+
+export function isNewsUI (element : GefestElement): boolean {
+    return element instanceof NewsUserInterfaceBody ||
+        element instanceof NewsUserInterfaceCard;
+}
+class NewsUserInterfaceBody extends DefaultElement {
+    constructor(userType : UserType) {
+        super([]);
+        this.addClass("card-body");
+        this.addClass("central-navbar");
+    }
+}
+class NewsUserInterfaceCard extends DefaultElement {
+    constructor(userType : UserType) {
+        super([
+            new NewsUserInterfaceBody(userType)
+        ]);
+        this.addClass("card");
+        this.addClass("news-ui");
+
+        this.isHidden = true;
+    }
+}
+// ^^ Card
+class NewsUserInterfaceButton extends DefaultElement {
+    constructor(userType : UserType, card : NewsUserInterfaceCard) {
+        const uiIcon = new GefestI("");
+        uiIcon.addClass({
+            user: "fas fa-wrench",
+            admin: "fas fa-plus",
+        }[userType]);
+
+        super([ uiIcon ]);
+        this.setAttribute("type", "button");
+        this.addClass("news-ui-action");
+        this.addClass("btn");
+        this.addClass("round");
+        this.addClass("border");
+
+        this.onClick = () => {
+            card.isHidden = !card.isHidden;
+            card.update();
+        };
+    }
+
+    protected wrapHTML(content: string): string {
+        const attrString = this.attributesToString();
+        return `<button ${attrString}>${content}</button>`;
+    }
+}
+export class NewsUserInterface extends DefaultElement {
+    constructor(userType : UserType) {
+        const card = new NewsUserInterfaceCard(userType);
+        super([
+            card,
+            new NewsUserInterfaceButton(userType, card),
+        ]);
+        this.addClass("news-ui-general");
+        this.addClass("fixed-bottom");
+    }
+}
 
 export class NewsFeed extends DefaultElement {
     constructor(items: NewsItem[]) {
         super([
-            new GefestHeader("News", 2),
-            ...items
+            new NewsUserInterface("user"),
+            ...items,
         ]);
     }
 }

frontend/src/styles.ts

@@ -1,38 +1,66 @@
 import { GefestStyle } from "./modules/Gefest/style";
 import { GefestElement } from "./modules/Gefest/element";
+import { Navbar } from "./pages/navbar";
+import { isNewsUI, NewsUserInterface } from "./pages/feed/news";
 
 export abstract class SkeletonStyle extends GefestStyle {
     protected abstract navbar(element: GefestElement): void;
-}
-
-export class DarkStyle extends SkeletonStyle {
-    navbar(element: GefestElement): void {
-        element.addClass("dark-navbar");
-    }
-
-    applyStyle(html: string, element?: GefestElement): string {
-        if (!element)
-            element = GefestElement.fromHTML(html);
-        element.addClass("bg-dark");
-        element.addClass("text-light");
-        this.navbar(element);
-        return element.build(true);
-    }
-}
-
-export class LightStyle extends SkeletonStyle {
-    navbar(element: GefestElement): void {
-        //element.addClass("light-navbar");
-    }
-
+    protected abstract newsui(element: GefestElement): void;
+    protected abstract styleHandle(element: GefestElement): void;
     applyStyle(html: string, element?: GefestElement): string {
         if (!element)
             element = GefestElement.fromHTML(html);
         //element.addClass("light-mode");
+        this.styleHandle(element);
+        this.navbar(element);
+        this.newsui(element);
+        return element.build(true);
+    }
+}
+
+export class DarkStyle extends SkeletonStyle {
+    newsui(element: GefestElement): void {
+        if (isNewsUI(element)) {
+            element.removeClass("bg-dark");
+            element.addClass("dark-news-ui");
+        }
+
+        if (element instanceof NewsUserInterface) {
+            element.removeClass("bg-dark");
+        }
+    }
+
+    navbar(element: GefestElement): void {
+        if (element instanceof Navbar) {
+            element.addClass("dark-navbar");
+        }
+    }
+
+    protected styleHandle(element: GefestElement): void {
+        element.addClass("bg-dark");
+        element.addClass("text-light");
+    }
+}
+
+export class LightStyle extends SkeletonStyle {
+    newsui(element: GefestElement): void {
+        if (isNewsUI(element)) {
+            element.removeClass("bg-light");
+            element.addClass("light-news-ui");
+        }
+
+        if (element instanceof NewsUserInterface) {
+            element.removeClass("bg-light");
+        }
+    }
+
+    navbar(element: GefestElement): void {
+        //element.addClass("light-navbar");
+    }
+
+    protected styleHandle(element: GefestElement): void {
         element.addClass("bg-light");
         element.addClass("text-dark");
-        this.navbar(element);
-        return element.build(true);
     }
 }