From 5f551af2b34f2c8693d841b955e6c411d8fc4dc5 Mon Sep 17 00:00:00 2001 From: FullGreaM Date: Mon, 27 Apr 2026 01:31:15 +0300 Subject: [PATCH] Add first draft of news ui --- frontend/src/api/user-info.ts | 1 + frontend/src/css/main.css | 15 ++++++- frontend/src/pages/feed/news.ts | 68 ++++++++++++++++++++++++++++- frontend/src/styles.ts | 76 ++++++++++++++++++++++----------- 4 files changed, 132 insertions(+), 28 deletions(-) create mode 100644 frontend/src/api/user-info.ts diff --git a/frontend/src/api/user-info.ts b/frontend/src/api/user-info.ts new file mode 100644 index 0000000..a7ac754 --- /dev/null +++ b/frontend/src/api/user-info.ts @@ -0,0 +1 @@ +export type UserType = "admin" | "user"; \ No newline at end of file diff --git a/frontend/src/css/main.css b/frontend/src/css/main.css index 2d3d522..ea39c74 100644 --- a/frontend/src/css/main.css +++ b/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); @@ -43,4 +45,13 @@ bottom: 0; width: 100vw; height: 100vh; +} + +.round { + border-radius: 100% !important; + /*overflow: hidden;*/ +} + +.news-ui-action { + margin-left: 95%; } \ No newline at end of file diff --git a/frontend/src/pages/feed/news.ts b/frontend/src/pages/feed/news.ts index 9b97788..40d1a01 100644 --- a/frontend/src/pages/feed/news.ts +++ b/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 ``; + } +} +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, ]); } } diff --git a/frontend/src/styles.ts b/frontend/src/styles.ts index 1eac064..6b60483 100644 --- a/frontend/src/styles.ts +++ b/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); } }