From c0a703015d02ffb81bf0856263ee8b2659869e3a Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 9 May 2024 16:03:44 +0200 Subject: [PATCH 01/11] Update themes.css --- src/themes.css | 308 ++++++++++++++++++++++++------------------------- 1 file changed, 153 insertions(+), 155 deletions(-) diff --git a/src/themes.css b/src/themes.css index 6cceff9e..9c412a21 100644 --- a/src/themes.css +++ b/src/themes.css @@ -44,14 +44,6 @@ --button-desktop-text-color-hover: red; --close-button-background-image: url("/public/assets/buttons/cross-red.png"); - /* mobile buttons */ - --button-font-size-mobile: 10pt; - --button-font-weight-mobile: 700; - --button-text-color-mobile: #800; - --button-background-image-mobile: url("/public/assets/buttons/button-fade.png"); - --button-background-color-mobile: #f0e0d6; - --button-border-mobile: 1px solid #c0a69d; - /* horizontal rule */ --hr-border: none; --hr-border-top: 1px solid #d9bfb7; @@ -87,6 +79,17 @@ /* media */ --media-thumbnail-background-color: rgba(0, 0, 0, 0.05); + /* mobile buttons */ + --button-font-size-mobile: 10pt; + --button-font-weight-mobile: 700; + --button-text-color-mobile: #800; + --button-background-image-mobile: url("/public/assets/buttons/button-fade.png"); + --button-background-color-mobile: #f0e0d6; + --button-border-mobile: 1px solid #c0a69d; + + /* post capcodes */ + --post-capcode-mod-text-color: purple; + /* post desktop */ --post-hide-button-background-image: url("/public/assets/buttons/post-expand-minus-red.png"); --post-unhide-button-background-image: url("/public/assets/buttons/post-expand-plus-red.png"); @@ -116,9 +119,6 @@ --post-mobile-file-info-text-color: #707070; --post-mobile-content-font-size: 11pt; - /* post capcodes */ - --post-capcode-mod-text-color: purple; - /* post form */ --post-form-toggle-font-size: 22px; --post-form-toggle-font-weight: 700; @@ -134,10 +134,6 @@ --post-form-field-input-outline: none; --post-form-field-input-focus-border: 1px solid #ea8; - /* reply modal */ - --reply-modal-field-input-border: 1px solid #aaa; - --reply-modal-field-input-border-focus: 1px solid #ea8; - /* quotelink */ --post-quotelink-text-color: navy; --post-quotelink-text-color-hover: red; @@ -149,6 +145,10 @@ --reply-desktop-background-color: #f0e0d6; --reply-desktop-border: 1px solid #d9bfb7; + /* reply modal */ + --reply-modal-field-input-border: 1px solid #aaa; + --reply-modal-field-input-border-focus: 1px solid #ea8; + /* stats */ --stats-font-size: 11px; } @@ -196,6 +196,14 @@ --challenge-modal-title-font-size: 10pt; --challenge-modal-title-font-weight: 700; + /* desktop buttons */ + --button-desktop-text-color: #34345c; + --button-desktop-text-color-hover: #d00; + --close-button-background-image: url("/public/assets/buttons/cross-blue.png"); + + /* footer */ + --footer-item-background-color-desktop: #eef2ff; + /* homepage */ --homepage-infobox-text-color: #000; --homepage-infobox-bar-text-color: #000; @@ -212,22 +220,6 @@ --homepage-box-link-text-decoration: none; --homepage-box-link-text-decoration-hover: underline; - /* desktop buttons */ - --button-desktop-text-color: #34345c; - --button-desktop-text-color-hover: #d00; - --close-button-background-image: url("/public/assets/buttons/cross-blue.png"); - - /* mobile buttons */ - --button-font-size-mobile: 10pt; - --button-font-weight-mobile: 700; - --button-text-color-mobile: #34345c; - --button-background-image-mobile: url("/public/assets/buttons/button-fade-blue.png"); - --button-background-color-mobile: #d6daf0; - --button-border-mobile: 1px solid #b7c5d9; - - /* footer */ - --footer-item-background-color-desktop: #eef2ff; - /* horizontal rule */ --hr-border: none; --hr-border-top: 1px solid #b7c5d9; @@ -243,6 +235,17 @@ /* media */ --media-thumbnail-background-color: rgba(0, 0, 0, 0.05); + /* mobile buttons */ + --button-font-size-mobile: 10pt; + --button-font-weight-mobile: 700; + --button-text-color-mobile: #34345c; + --button-background-image-mobile: url("/public/assets/buttons/button-fade-blue.png"); + --button-background-color-mobile: #d6daf0; + --button-border-mobile: 1px solid #b7c5d9; + + /* post capcodes */ + --post-capcode-mod-text-color: purple; + /* post desktop */ --post-hide-button-background-image: url("/public/assets/buttons/post-expand-minus-blue.png"); --post-unhide-button-background-image: url("/public/assets/buttons/post-expand-plus-blue.png"); @@ -255,6 +258,21 @@ --post-greentext-color: #789922; --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-blue.png"); + /* post form */ + --post-form-toggle-font-size: 22px; + --post-form-toggle-font-weight: 700; + --post-form-field-title-background-color: #98e; + --post-form-field-title-color: #000; + --post-form-field-border: 1px solid #000; + --post-form-field-title-font-weight: 700; + --post-form-field-title-padding: 0 5px; + --post-form-field-title-font-size: 10pt; + --post-form-field-input-border: 1px solid #aaa; + --post-form-field-font-family: arial, helvetica, sans-serif; + --post-form-field-input-appearance: none; + --post-form-field-input-outline: none; + --post-form-field-input-focus-border: 1px solid #98e; + /* post mobile */ --post-mobile-background-color: #d6daf0; --post-mobile-info-border-bottom: 1px solid #b7c5d9; @@ -271,28 +289,6 @@ --post-mobile-abbr-font-size: 10pt; --post-mobile-content-font-size: 11pt; - /* post capcodes */ - --post-capcode-mod-text-color: purple; - - /* post form */ - --post-form-toggle-font-size: 22px; - --post-form-toggle-font-weight: 700; - --post-form-field-title-background-color: #98e; - --post-form-field-title-color: #000; - --post-form-field-border: 1px solid #000; - --post-form-field-title-font-weight: 700; - --post-form-field-title-padding: 0 5px; - --post-form-field-title-font-size: 10pt; - --post-form-field-input-border: 1px solid #aaa; - --post-form-field-font-family: arial, helvetica, sans-serif; - --post-form-field-input-appearance: none; - --post-form-field-input-outline: none; - --post-form-field-input-focus-border: 1px solid #98e; - - /* reply modal */ - --reply-modal-field-input-border: 1px solid #aaa; - --reply-modal-field-input-border-focus: 1px solid #98e; - /* quotelink */ --post-quotelink-text-color: #d00; --post-quotelink-text-color-hover: #d00; @@ -304,6 +300,10 @@ --reply-desktop-background-color: #d6daf0; --reply-desktop-border: 1px solid #b7c5d9; + /* reply modal */ + --reply-modal-field-input-border: 1px solid #aaa; + --reply-modal-field-input-border-focus: 1px solid #98e; + /* stats */ --stats-font-size: 11px; } @@ -353,14 +353,6 @@ --button-text-decoration: underline; --close-button-background-image: url("/public/assets/buttons/cross-red.png"); - /* mobile buttons */ - --button-font-size-mobile: 11pt; - --button-font-weight-mobile: 700; - --button-text-color-mobile: #800; - --button-background-image-mobile: url("/public/assets/buttons/button-fade.png"); - --button-background-color-mobile: #f0e0d6; - --button-border-mobile: 1px solid #c0a69d; - /* footer */ --footer-item-background-color-desktop: #fed; @@ -375,6 +367,17 @@ /* media */ --media-thumbnail-background-color: rgba(0, 0, 0, 0.05); + /* mobile buttons */ + --button-font-size-mobile: 11pt; + --button-font-weight-mobile: 700; + --button-text-color-mobile: #800; + --button-background-image-mobile: url("/public/assets/buttons/button-fade.png"); + --button-background-color-mobile: #f0e0d6; + --button-border-mobile: 1px solid #c0a69d; + + /* post capcodes */ + --post-capcode-mod-text-color: purple; + /* post desktop */ --post-hide-button-background-image: url("/public/assets/buttons/post-expand-minus-red.png"); --post-unhide-button-background-image: url("/public/assets/buttons/post-expand-plus-red.png"); @@ -387,6 +390,15 @@ --post-greentext-color: #789922; --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-red.png"); + /* post form */ + --post-form-toggle-font-size: 22px; + --post-form-toggle-font-weight: 700; + --post-form-field-title-background-color: #ea8; + --post-form-field-title-color: #800; + --post-form-field-border: none; + --post-form-field-title-font-weight: 700; + --post-form-field-title-font-size: 16px; + /* post mobile */ --post-mobile-background-color: #f5e9e1; --post-mobile-info-border-bottom: 1px solid #d9bfb7; @@ -403,18 +415,6 @@ --post-mobile-abbr-font-size: 12pt; --post-mobile-content-font-size: 13pt; - /* post capcodes */ - --post-capcode-mod-text-color: purple; - - /* post form */ - --post-form-toggle-font-size: 22px; - --post-form-toggle-font-weight: 700; - --post-form-field-title-background-color: #ea8; - --post-form-field-title-color: #800; - --post-form-field-border: none; - --post-form-field-title-font-weight: 700; - --post-form-field-title-font-size: 16px; - /* quotelink */ --post-quotelink-text-color: navy; --post-quotelink-text-color-hover: red; @@ -458,6 +458,12 @@ --body-font-family: times new roman, serif; --body-font-size: 16px; + /* catalog post */ + --catalog-post-menu-btn-color: navy; + --catalog-post-menu-btn-hover-color: red; + --catalog-post-menu-btn-opacity: 0.5; + --catalog-post-menu-btn-hover-opacity: 1; + /* challenge modal */ --challenge-modal-background-color: #d6daf0; --challenge-modal-border: 1px solid #b7c5d9; @@ -467,6 +473,15 @@ --challenge-modal-title-font-size: 12pt; --challenge-modal-title-font-weight: 700; + /* desktop buttons */ + --button-desktop-text-color: #34345c; + --button-text-decoration: underline; + --button-desktop-text-color-hover: #d00; + --close-button-background-image: url("/public/assets/buttons/cross-blue.png"); + + /* footer */ + --footer-item-background-color-desktop: #eef2ff; + /* homepage */ --homepage-infobox-text-color: #000; --homepage-infobox-bar-text-color: #000; @@ -477,17 +492,8 @@ --homepage-box-bar-background-color: #98e; --homepage-box-bar-text-color-hover: #fff; - /* catalog post */ - --catalog-post-menu-btn-color: navy; - --catalog-post-menu-btn-hover-color: red; - --catalog-post-menu-btn-opacity: 0.5; - --catalog-post-menu-btn-hover-opacity: 1; - - /* desktop buttons */ - --button-desktop-text-color: #34345c; - --button-text-decoration: underline; - --button-desktop-text-color-hover: #d00; - --close-button-background-image: url("/public/assets/buttons/cross-blue.png"); + /* media */ + --media-thumbnail-background-color: rgba(0, 0, 0, 0.05); /* mobile buttons */ --button-font-size-mobile: 11pt; @@ -497,9 +503,6 @@ --button-background-color-mobile: #d6daf0; --button-border-mobile: 1px solid #b7c5d9; - /* footer */ - --footer-item-background-color-desktop: #eef2ff; - /* links */ --post-link-text-color: #34345c; --post-link-text-decoration: underline; @@ -508,8 +511,8 @@ --post-content-link-text-decoration: none; --post-content-link-text-decoration-hover: none; - /* media */ - --media-thumbnail-background-color: rgba(0, 0, 0, 0.05); + /* post capcodes */ + --post-capcode-mod-text-color: purple; /* post desktop */ --post-hide-button-background-image: url("/public/assets/buttons/post-expand-minus-blue.png"); @@ -522,6 +525,15 @@ --post-menu-button-color-hover: #d00; --post-greentext-color: #789922; --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-blue.png"); + + /* post form */ + --post-form-toggle-font-size: 22px; + --post-form-toggle-font-weight: 700; + --post-form-field-title-background-color: #98e; + --post-form-field-title-color: #000; + --post-form-field-border: none; + --post-form-field-title-font-weight: 700; + --post-form-field-title-font-size: 16px; /* post mobile */ --post-mobile-background-color: #d6daf0; @@ -539,18 +551,6 @@ --post-mobile-abbr-font-size: 12pt; --post-mobile-content-font-size: 13pt; - /* post capcodes */ - --post-capcode-mod-text-color: purple; - - /* post form */ - --post-form-toggle-font-size: 22px; - --post-form-toggle-font-weight: 700; - --post-form-field-title-background-color: #98e; - --post-form-field-title-color: #000; - --post-form-field-border: none; - --post-form-field-title-font-weight: 700; - --post-form-field-title-font-size: 16px; - /* quotelink */ --post-quotelink-text-color: #d00; --post-quotelink-text-color-hover: #d00; @@ -574,16 +574,6 @@ --body-font-family: arial, helvetica, sans-serif; --body-font-size: 13px; - /* homepage */ - --homepage-infobox-text-color: #c5c8c6; - --homepage-infobox-bar-text-color: #c5c8c6; - --homepage-infobox-bar-background-color: rgb(33, 35, 38); - --homepage-box-background-color: #282a2e; - --homepage-box-bar-background-color: rgb(33, 35, 38); - --homepage-box-border-color: rgb(45, 47, 51); - --homepage-box-bar-text-color: #c5c8c6; - --homepage-box-bar-text-color-hover: #c5c8c6; - /* board nav */ --boardnav-font-size: 9pt; --boardnav-separator-color: #c5c8c6; @@ -624,13 +614,15 @@ /* filter for inputs */ --filter80: brightness(85%); - /* mobile buttons */ - --button-font-size-mobile: 10pt; - --button-font-weight-mobile: 700; - --button-text-color-mobile: #707070; - --button-background-image-mobile: url("/public/assets/buttons/button-fade-dark.png"); - --button-background-color-mobile: #1b1c1e; - --button-border-mobile: 1px solid #282a2e; + /* homepage */ + --homepage-infobox-text-color: #c5c8c6; + --homepage-infobox-bar-text-color: #c5c8c6; + --homepage-infobox-bar-background-color: rgb(33, 35, 38); + --homepage-box-background-color: #282a2e; + --homepage-box-bar-background-color: rgb(33, 35, 38); + --homepage-box-border-color: rgb(45, 47, 51); + --homepage-box-bar-text-color: #c5c8c6; + --homepage-box-bar-text-color-hover: #c5c8c6; /* horizontal rule */ --hr-border: none; @@ -648,6 +640,17 @@ /* media */ --media-thumbnail-background-color: rgba(255, 255, 255, 0.01); + /* mobile buttons */ + --button-font-size-mobile: 10pt; + --button-font-weight-mobile: 700; + --button-text-color-mobile: #707070; + --button-background-image-mobile: url("/public/assets/buttons/button-fade-dark.png"); + --button-background-color-mobile: #1b1c1e; + --button-border-mobile: 1px solid #282a2e; + + /* post capcodes */ + --post-capcode-mod-text-color: #81a2be; + /* post desktop */ --post-hide-button-background-image: url("/public/assets/buttons/post-expand-minus-dark.png"); --post-unhide-button-background-image: url("/public/assets/buttons/post-expand-plus-dark.png"); @@ -660,6 +663,23 @@ --post-greentext-color: #b5bd68; --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-dark.png"); + /* post form */ + --post-form-toggle-font-size: 22px; + --post-form-toggle-font-weight: 700; + --post-form-field-title-background-color: #282a2e; + --post-form-field-title-color: #c5c8c6; + --post-form-field-border: 1px solid #000; + --post-form-field-title-font-weight: 700; + --post-form-field-title-padding: 0 5px; + --post-form-field-title-font-size: 10pt; + --post-form-field-input-border: 1px solid #000; + --post-form-field-input-focus-border: 1px solid #515151; + --post-form-field-input-background-color: #282a2e; + --post-form-field-input-color: #c5c8c6; + --post-form-field-font-family: arial, helvetica, sans-serif; + --post-form-field-input-appearance: none; + --post-form-field-input-outline: none; + /* post mobile */ --post-mobile-background-color: #282A2E; --post-mobile-info-border-top: 1px solid #2D2F33; @@ -679,9 +699,6 @@ --post-mobile-abbr-font-size: 10pt; --post-mobile-content-font-size: 11pt; - /* post capcodes */ - --post-capcode-mod-text-color: #81a2be; - /* quotelink */ --post-quotelink-text-color: #5f89ac; --post-quotelink-text-color-hover: #81a2be; @@ -693,29 +710,10 @@ --reply-desktop-background-color: #282a2e; --reply-desktop-border: 1px solid #282a2e; - /* post form */ - --post-form-toggle-font-size: 22px; - --post-form-toggle-font-weight: 700; - --post-form-field-title-background-color: #282a2e; - --post-form-field-title-color: #c5c8c6; - --post-form-field-border: 1px solid #000; - --post-form-field-title-font-weight: 700; - --post-form-field-title-padding: 0 5px; - --post-form-field-title-font-size: 10pt; - --post-form-field-input-border: 1px solid #000; - --post-form-field-input-focus-border: 1px solid #515151; - --post-form-field-input-background-color: #282a2e; - --post-form-field-input-color: #c5c8c6; - --post-form-field-font-family: arial, helvetica, sans-serif; - --post-form-field-input-appearance: none; - --post-form-field-input-outline: none; - /* reply modal */ --reply-modal-field-input-border: 1px solid #515151; - --reply-modal-field-input-border-focus: 1px solid #757575; - - /* reply modal */ --reply-modal-field-border-focus: 1px solid #757575; + --reply-modal-field-input-border-focus: 1px solid #757575; /* select */ --select-border: 1px solid #575a60; @@ -772,13 +770,6 @@ --button-desktop-text-color-hover: #f30; --close-button-background-image: url("/public/assets/buttons/cross-photon.png"); - /* mobile buttons */ - --button-font-size-mobile: 10pt; - --button-font-weight-mobile: 700; - --button-text-color-mobile: #333; - --button-background-image-mobile: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%, rgba(224, 224, 224, 1) 100%); - --button-border-mobile: 1px solid #ccc; - /* horizontal rule */ --hr-border: none; --hr-border-top: 1px solid #ddd; @@ -795,6 +786,16 @@ /* media */ --media-thumbnail-background-color: rgba(0, 0, 0, 0.05); + /* mobile buttons */ + --button-font-size-mobile: 10pt; + --button-font-weight-mobile: 700; + --button-text-color-mobile: #333; + --button-background-image-mobile: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%, rgba(224, 224, 224, 1) 100%); + --button-border-mobile: 1px solid #ccc; + + /* post capcodes */ + --post-capcode-mod-text-color: #f60; + /* post desktop */ --post-hide-button-background-image: url("/public/assets/buttons/post-expand-minus-photon.png"); --post-unhide-button-background-image: url("/public/assets/buttons/post-expand-plus-photon.png"); @@ -826,9 +827,6 @@ --post-mobile-abbr-font-size: 10pt; --post-mobile-content-font-size: 11pt; - /* post capcodes */ - --post-capcode-mod-text-color: #f60; - /* post form */ --post-form-toggle-font-size: 22px; --post-form-toggle-font-weight: 700; @@ -844,10 +842,6 @@ --post-form-field-input-outline: none; --post-form-field-input-focus-border: 1px solid #ea8; - /* reply modal */ - --reply-modal-field-input-border: 1px solid #aaa; - --reply-modal-field-input-border-focus: 1px solid #ea8; - /* quotelink */ --post-quotelink-text-color: #f60; --post-quotelink-text-color-hover: #f30; @@ -859,6 +853,10 @@ --reply-desktop-background-color: #ddd; --reply-desktop-border: 1px solid #ccc; + /* reply modal */ + --reply-modal-field-input-border: 1px solid #aaa; + --reply-modal-field-input-border-focus: 1px solid #ea8; + /* stats */ --stats-font-size: 11px; } From 59365df71a8cc5c5317d47d080855075af102c38 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 9 May 2024 16:04:24 +0200 Subject: [PATCH 02/11] refactor: settings route, link, component --- src/app.tsx | 11 ++- src/components/board-nav/board-nav.tsx | 9 ++- src/components/settings-modal/index.ts | 1 + .../settings-modal/settings-modal.module.css | 50 ++++++++++++ .../settings-modal/settings-modal.tsx | 18 +++++ src/hooks/use-reply-modal.ts | 2 +- src/views/board/board.tsx | 5 +- src/views/catalog/catalog.tsx | 5 +- src/views/post-page/post-page.tsx | 13 +++- src/views/settings/index.ts | 1 - src/views/settings/settings.module.css | 23 ------ src/views/settings/settings.tsx | 76 ------------------- 12 files changed, 101 insertions(+), 113 deletions(-) create mode 100644 src/components/settings-modal/index.ts create mode 100644 src/components/settings-modal/settings-modal.module.css create mode 100644 src/components/settings-modal/settings-modal.tsx delete mode 100644 src/views/settings/index.ts delete mode 100644 src/views/settings/settings.module.css delete mode 100644 src/views/settings/settings.tsx diff --git a/src/app.tsx b/src/app.tsx index 41ebdb41..b28f0b92 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -9,7 +9,6 @@ import Home from './views/home'; import NotFound from './views/not-found'; import PendingPost from './views/pending-post'; import PostPage from './views/post-page'; -import Settings from './views/settings'; import BoardBanner from './components/board-banner'; import { DesktopBoardButtons, MobileBoardButtons } from './components/board-buttons'; import BoardNav from './components/board-nav'; @@ -70,17 +69,23 @@ const App = () => { } /> }> } /> + } /> } /> + } /> } /> + } /> + } /> + } /> + } /> + } /> } /> + } /> - } /> - } /> diff --git a/src/components/board-nav/board-nav.tsx b/src/components/board-nav/board-nav.tsx index 21b75a69..08c0f252 100644 --- a/src/components/board-nav/board-nav.tsx +++ b/src/components/board-nav/board-nav.tsx @@ -12,7 +12,9 @@ interface BoardNavProps { const BoardNavDesktop = ({ subplebbitAddresses }: BoardNavProps) => { const { t } = useTranslation(); - const isInCatalogView = isCatalogView(useLocation().pathname, useParams()); + const location = useLocation(); + const params = useParams(); + const isInCatalogView = isCatalogView(location.pathname, params); return (
@@ -30,7 +32,8 @@ const BoardNavDesktop = ({ subplebbitAddresses }: BoardNavProps) => { ] - [{t('settings')}] [{t('home')}] + [{t('settings')}] [{t('home')} + ]
); @@ -68,7 +71,7 @@ const BoardNavMobile = ({ subplebbitAddresses, subplebbitAddress }: BoardNavProp {boardSelect}
- {t('settings')} + {t('settings')} {t('home')}
diff --git a/src/components/settings-modal/index.ts b/src/components/settings-modal/index.ts new file mode 100644 index 00000000..aef1be49 --- /dev/null +++ b/src/components/settings-modal/index.ts @@ -0,0 +1 @@ +export { default } from './settings-modal'; diff --git a/src/components/settings-modal/settings-modal.module.css b/src/components/settings-modal/settings-modal.module.css new file mode 100644 index 00000000..97815432 --- /dev/null +++ b/src/components/settings-modal/settings-modal.module.css @@ -0,0 +1,50 @@ +.settingsModal { + top: 60px; + width: 400px; + height: auto; + max-height: 80%; + left: calc(50% - 25px); + overflow-y: auto; + margin-left: -178px; + position: absolute; + padding: 2px 5px 5px; + font-size: 14px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); +} + +.header { + font-size: 16px; + font-weight: 700; + margin-bottom: 5px; + margin-top: 5px; + padding-bottom: 5px; + text-align: center; + line-height: 14px; +} + +.version { + font-size: 11px; + position: absolute; + display: block; + margin-left: 5px; +} + +.closeButton { + right: 5px; + width: 18px; + height: 18px; + display: block; + background-size: 100%; + cursor: pointer; + position: absolute; + top: 5px; + image-rendering: pixelated; +} + +@media (max-width: 640px) { + .settingsModal { + width: 350px !important; + max-height: 60% !important; + left: calc(50% - 2px) !important; + } +} \ No newline at end of file diff --git a/src/components/settings-modal/settings-modal.tsx b/src/components/settings-modal/settings-modal.tsx new file mode 100644 index 00000000..6694996a --- /dev/null +++ b/src/components/settings-modal/settings-modal.tsx @@ -0,0 +1,18 @@ +import styles from './settings-modal.module.css'; +import { useNavigate } from 'react-router-dom'; + +const SettingsModal = () => { + const navigate = useNavigate(); + + return ( +
+
+ v0.2.0 + Settings + navigate(-1)} /> +
+
+ ); +}; + +export default SettingsModal; diff --git a/src/hooks/use-reply-modal.ts b/src/hooks/use-reply-modal.ts index 11fc3045..acb4a8df 100644 --- a/src/hooks/use-reply-modal.ts +++ b/src/hooks/use-reply-modal.ts @@ -27,7 +27,7 @@ const useReplyModal = () => { setShowReplyModal(true); } }, - [activeCid, closeModal, isMobile], + [activeCid, isMobile], ); return { activeCid, closeModal, openReplyModal, scrollY, showReplyModal }; diff --git a/src/views/board/board.tsx b/src/views/board/board.tsx index 8477d7a3..3571bf8e 100644 --- a/src/views/board/board.tsx +++ b/src/views/board/board.tsx @@ -1,5 +1,5 @@ import { useEffect, useMemo, useRef } from 'react'; -import { useParams } from 'react-router-dom'; +import { useLocation, useParams } from 'react-router-dom'; import { useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks'; import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso'; import { useTranslation } from 'react-i18next'; @@ -9,6 +9,7 @@ import useReplyModal from '../../hooks/use-reply-modal'; import LoadingEllipsis from '../../components/loading-ellipsis'; import Post from '../../components/post'; import ReplyModal from '../../components/reply-modal'; +import SettingsModal from '../../components/settings-modal'; import SubplebbitDescription from '../../components/subplebbit-description'; import SubplebbitRules from '../../components/subplebbit-rules'; @@ -16,6 +17,7 @@ const lastVirtuosoStates: { [key: string]: StateSnapshot } = {}; const Board = () => { const { t } = useTranslation(); + const location = useLocation(); const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>(); const subplebbitAddresses = useMemo(() => [subplebbitAddress], [subplebbitAddress]) as string[]; const sortType = 'active'; @@ -62,6 +64,7 @@ const Board = () => { return (
+ {location.pathname === `/p/${subplebbitAddress}/settings` && } {showReplyModal && activeCid && } {feed.length > 0 && ( <> diff --git a/src/views/catalog/catalog.tsx b/src/views/catalog/catalog.tsx index 9c4b8c58..1d60d82e 100644 --- a/src/views/catalog/catalog.tsx +++ b/src/views/catalog/catalog.tsx @@ -1,5 +1,5 @@ import { useEffect, useMemo, useRef } from 'react'; -import { useParams } from 'react-router-dom'; +import { useLocation, useParams } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { Subplebbit, useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks'; import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso'; @@ -7,6 +7,7 @@ import useFeedStateString from '../../hooks/use-feed-state-string'; import useWindowWidth from '../../hooks/use-window-width'; import CatalogRow from '../../components/catalog-row'; import LoadingEllipsis from '../../components/loading-ellipsis'; +import SettingsModal from '../../components/settings-modal'; import styles from './catalog.module.css'; import _ from 'lodash'; @@ -69,6 +70,7 @@ const columnWidth = 180; const Catalog = () => { const { t } = useTranslation(); + const location = useLocation(); const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>(); const subplebbitAddresses = useMemo(() => [subplebbitAddress], [subplebbitAddress]) as string[]; @@ -122,6 +124,7 @@ const Catalog = () => { return (
+ {location.pathname === `/p/${subplebbitAddress}/catalog/settings` && }
{ const { t } = useTranslation(); const params = useParams(); + const location = useLocation(); const { commentCid, subplebbitAddress } = params; + const showSettings = + location.pathname === `/p/${subplebbitAddress}/c/${commentCid}/settings` || + location.pathname === `/p/${subplebbitAddress}/description/settings` || + location.pathname === `/p/${subplebbitAddress}/rules/settings`; + const isInDescriptionView = isDescriptionView(location.pathname, params); + const isInRulesView = isRulesView(location.pathname, params); const subplebbit = useSubplebbit({ subplebbitAddress }); const { createdAt, description, rules, shortAddress, suggested, title } = subplebbit; - const location = useLocation(); - const isInDescriptionView = isDescriptionView(location.pathname, params); - const isInRulesView = isRulesView(location.pathname, params); - const { activeCid, closeModal, openReplyModal, showReplyModal, scrollY } = useReplyModal(); const post = useComment({ commentCid }); @@ -34,6 +38,7 @@ const PostPage = () => { return (
+ {showSettings && } {showReplyModal && activeCid && } {isInDescriptionView ? ( { - const [theme, setTheme] = useTheme(); - - return ( - - ); -}; - -// prettier-ignore -const availableLanguages = ['ar', 'bn', 'cs', 'da', 'de', 'el', 'en', 'es', 'fa', 'fi', 'fil', 'fr', 'he', 'hi', 'hu', 'id', 'it', 'ja', 'ko', 'mr', 'nl', 'no', 'pl', 'pt', 'ro', 'ru', 'sq', 'sv', 'te', 'th', 'tr', 'uk', 'ur', 'vi', 'zh']; - -const LanguageSettings = () => { - const { i18n } = useTranslation(); - const { changeLanguage, language } = i18n; - - const onSelectLanguage = (e: React.ChangeEvent) => { - changeLanguage(e.target.value); - }; - - return ( -
- -
- ); -}; - -const Settings = () => { - return ( -
-
- - v{packageJson.version} - - {isElectron && ( - - node stats - - )} - {commitRef && ( - - {commitRef.slice(0, 7)} - - )} -
-
- Home -
- - -
- ); -}; - -export default Settings; From 561b027f234360369cd4b338f7429dbe94a9a38f Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 9 May 2024 18:29:55 +0200 Subject: [PATCH 03/11] style(settings modal): add themes styling, overlay --- .../settings-modal/settings-modal.module.css | 33 +++++++- .../settings-modal/settings-modal.tsx | 79 +++++++++++++++++-- src/themes.css | 30 +++++++ 3 files changed, 133 insertions(+), 9 deletions(-) diff --git a/src/components/settings-modal/settings-modal.module.css b/src/components/settings-modal/settings-modal.module.css index 97815432..8d189221 100644 --- a/src/components/settings-modal/settings-modal.module.css +++ b/src/components/settings-modal/settings-modal.module.css @@ -1,3 +1,13 @@ +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.5); + z-index: 900; +} + .settingsModal { top: 60px; width: 400px; @@ -6,10 +16,16 @@ left: calc(50% - 25px); overflow-y: auto; margin-left: -178px; - position: absolute; + position: fixed; + z-index: 1000; padding: 2px 5px 5px; font-size: 14px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); + background-color: var(--settings-modal-background-color); +} + +.settingsModal select { + filter: var(--filter80); } .header { @@ -20,6 +36,11 @@ padding-bottom: 5px; text-align: center; line-height: 14px; + border-bottom: var(--settings-modal-header-border-bottom); +} + +.title { + text-transform: capitalize; } .version { @@ -29,6 +50,15 @@ margin-left: 5px; } +.version a { + color: inherit; + text-decoration: none; +} + +.version a:hover { + text-decoration: underline; +} + .closeButton { right: 5px; width: 18px; @@ -39,6 +69,7 @@ position: absolute; top: 5px; image-rendering: pixelated; + background-image: var(--settings-modal-close-button-background-image); } @media (max-width: 640px) { diff --git a/src/components/settings-modal/settings-modal.tsx b/src/components/settings-modal/settings-modal.tsx index 6694996a..f63f1c4b 100644 --- a/src/components/settings-modal/settings-modal.tsx +++ b/src/components/settings-modal/settings-modal.tsx @@ -1,18 +1,81 @@ import styles from './settings-modal.module.css'; import { useNavigate } from 'react-router-dom'; +import useTheme from '../../hooks/use-theme'; +import { useTranslation } from 'react-i18next'; +import packageJson from '../../../package.json'; +const commitRef = process.env.REACT_APP_COMMIT_REF; -const SettingsModal = () => { - const navigate = useNavigate(); +// TODO: remove theme and languages selectors for debugging +const ThemeSettings = () => { + const [theme, setTheme] = useTheme(); return ( -
-
- v0.2.0 - Settings - navigate(-1)} /> -
+ + ); +}; + +// prettier-ignore +const availableLanguages = ['ar', 'bn', 'cs', 'da', 'de', 'el', 'en', 'es', 'fa', 'fi', 'fil', 'fr', 'he', 'hi', 'hu', 'id', 'it', 'ja', 'ko', 'mr', 'nl', 'no', 'pl', 'pt', 'ro', 'ru', 'sq', 'sv', 'te', 'th', 'tr', 'uk', 'ur', 'vi', 'zh']; + +const LanguageSettings = () => { + const { i18n } = useTranslation(); + const { changeLanguage, language } = i18n; + + const onSelectLanguage = (e: React.ChangeEvent) => { + changeLanguage(e.target.value); + }; + + return ( +
+
); }; +const SettingsModal = () => { + const { t } = useTranslation(); + const navigate = useNavigate(); + + const closeModal = () => { + navigate(-1); + }; + + return ( + <> +
+
+
+ + + v{packageJson.version} + + {commitRef && ( + + #{commitRef.slice(0, 7)} + + )} + + {t('settings')} + +
+ + +
+ + ); +}; + export default SettingsModal; diff --git a/src/themes.css b/src/themes.css index 9c412a21..2ce2ac2d 100644 --- a/src/themes.css +++ b/src/themes.css @@ -149,6 +149,11 @@ --reply-modal-field-input-border: 1px solid #aaa; --reply-modal-field-input-border-focus: 1px solid #ea8; + /* settings modal */ + --settings-modal-background-color: #f0e0d6; + --settings-modal-header-border-bottom: 1px solid #d9bfb7; + --settings-modal-close-button-background-image: url("/public/assets/buttons/cross-red.png"); + /* stats */ --stats-font-size: 11px; } @@ -304,6 +309,11 @@ --reply-modal-field-input-border: 1px solid #aaa; --reply-modal-field-input-border-focus: 1px solid #98e; + /* settings modal */ + --settings-modal-background-color: #d6daf0; + --settings-modal-header-border-bottom: 1px solid #b7c5d9; + --settings-modal-close-button-background-image: url("/public/assets/buttons/cross-blue.png"); + /* stats */ --stats-font-size: 11px; } @@ -426,6 +436,11 @@ --reply-desktop-background-color: #f0e0d6; --reply-desktop-border: 1px solid #d9bfb7; + /* settings modal */ + --settings-modal-background-color: #f0e0d6; + --settings-modal-header-border-bottom: 1px solid rgba(0,0,0,.2); + --settings-modal-close-button-background-image: url("/public/assets/buttons/cross-red.png"); + /* stats */ --stats-font-size: 10pt; } @@ -562,6 +577,11 @@ --reply-desktop-background-color: #d6daf0; --reply-desktop-border: 1px solid #b7c5d9; + /* settings modal */ + --settings-modal-background-color: #d6daf0; + --settings-modal-header-border-bottom: 1px solid rgba(0,0,0,.2); + --settings-modal-close-button-background-image: url("/public/assets/buttons/cross-blue.png"); + /* stats */ --stats-font-size: 10pt; } @@ -720,6 +740,11 @@ --select-background-color: #282a2e; --select-color: #c5c8c6; + /* settings modal */ + --settings-modal-background-color: #282a2e; + --settings-modal-header-border-bottom: 1px solid #111; + --settings-modal-close-button-background-image: url("/public/assets/buttons/cross-dark.png"); + /* stats */ --stats-font-size: 11px; } @@ -857,6 +882,11 @@ --reply-modal-field-input-border: 1px solid #aaa; --reply-modal-field-input-border-focus: 1px solid #ea8; + /* settings modal */ + --settings-modal-background-color: #ddd; + --settings-modal-header-border-bottom: 1px solid rgba(0, 0, 0, 0.20); + --settings-modal-close-button-background-image: url("/public/assets/buttons/cross-photon.png"); + /* stats */ --stats-font-size: 11px; } From f26bcfeced156178388c6c2a29fc5626492ba9c4 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 9 May 2024 22:25:06 +0200 Subject: [PATCH 04/11] style(reply modal): add c/shortParentCid to textarea --- .../reply-modal/reply-modal.module.css | 18 ++++++++++++------ src/components/reply-modal/reply-modal.tsx | 4 +--- src/themes.css | 2 ++ 3 files changed, 15 insertions(+), 9 deletions(-) diff --git a/src/components/reply-modal/reply-modal.module.css b/src/components/reply-modal/reply-modal.module.css index 1d05b91d..e0cd4bbe 100644 --- a/src/components/reply-modal/reply-modal.module.css +++ b/src/components/reply-modal/reply-modal.module.css @@ -56,8 +56,13 @@ border: var(--reply-modal-field-input-border-focus, revert); } +.content { + position: relative; +} + .content textarea { vertical-align: top; + padding-top: 2em; } .footer button { @@ -66,12 +71,13 @@ cursor: pointer; } -.parentCid input[type="text"] { - margin-bottom: -1px !important; -} - -.parentCid input[type="text"]:focus { - border: var(--reply-modal-field-input-border, revert) !important; +.parentCid { + color: var(--post-form-field-input-color); + position: absolute; + top: 4px; + left: 5px; + text-decoration: underline; + pointer-events: none; } @media (max-width: 640px) { diff --git a/src/components/reply-modal/reply-modal.tsx b/src/components/reply-modal/reply-modal.tsx index fae5fedb..e7748f2d 100644 --- a/src/components/reply-modal/reply-modal.tsx +++ b/src/components/reply-modal/reply-modal.tsx @@ -88,10 +88,8 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
setContent.link(e.target.value)} />
-
- -
+ {`c/${parentCid && Plebbit.getShortCid(parentCid)}`}