From ff49fa6d488d4f2e90d82e2d711aec7285438a8b Mon Sep 17 00:00:00 2001 From: alexsparkes Date: Tue, 16 Aug 2022 12:09:57 +0100 Subject: [PATCH] fix: overview tab Co-authored-by: David Ralph --- src/components/modals/main/scss/index.scss | 92 +++++++++++++++++++ .../main/scss/modules/_tab-content.scss | 9 ++ .../scss/settings/modules/tabs/_order.scss | 3 + .../modals/main/settings/sections/Message.jsx | 2 +- .../main/settings/sections/Overview.jsx | 12 +-- .../modals/main/settings/sections/Quote.jsx | 2 +- .../sections/overview_skeletons/Clock.jsx | 7 ++ .../sections/overview_skeletons/Date.jsx | 9 ++ .../sections/overview_skeletons/Greeting.jsx | 7 ++ .../sections/overview_skeletons/Message.jsx | 10 ++ .../overview_skeletons/QuickLinks.jsx | 16 ++++ .../sections/overview_skeletons/Quote.jsx | 18 ++++ .../modals/main/tabs/backend/Tab.jsx | 4 - .../modals/main/tabs/backend/Tabs.jsx | 5 +- 14 files changed, 182 insertions(+), 14 deletions(-) create mode 100644 src/components/modals/main/settings/sections/overview_skeletons/Clock.jsx create mode 100644 src/components/modals/main/settings/sections/overview_skeletons/Date.jsx create mode 100644 src/components/modals/main/settings/sections/overview_skeletons/Greeting.jsx create mode 100644 src/components/modals/main/settings/sections/overview_skeletons/Message.jsx create mode 100644 src/components/modals/main/settings/sections/overview_skeletons/QuickLinks.jsx create mode 100644 src/components/modals/main/settings/sections/overview_skeletons/Quote.jsx diff --git a/src/components/modals/main/scss/index.scss b/src/components/modals/main/scss/index.scss index 6c964b94..1663cd87 100644 --- a/src/components/modals/main/scss/index.scss +++ b/src/components/modals/main/scss/index.scss @@ -230,3 +230,95 @@ h5 { align-items: center; } } + +.reminder-info { + display: flex; + flex-flow: column; + position: absolute; + bottom: 0; + padding: 15px; + gap: 15px; + @include themed() { + background-color: t($modal-sidebarActive); + border-radius: t($borderRadius); + } + button { + @include basicIconButton(5px, 5px, modal); + display: flex; + justify-content: center; + gap: 15px; + svg { + margin: 0 !important; + } + } + @extend %tabText; +} + +.quoteSkeleton { + margin-top: 5px; + display: flex; + flex-flow: column; + gap: 5px; + align-items: center; + div { + display: flex; + flex-flow: row; + } + .text { + display: flex; + flex-flow: column; + padding: 5px; + } + .skeletonAuthor { + font-size: smaller; + padding: 5px; + display: flex; + flex-flow: row; + align-items: center; + gap: 25px; + padding: 0 20px 0 5px; + svg { + @include themed() { + background-color: t($modal-sidebar); + padding: 10px; + border-radius: t($borderRadius); + place-items: center; + } + } + @include themed() { + background-color: t($modal-sidebarActive); + border-radius: t($borderRadius); + } + .title { + font-size: medium !important; + } + .subtitle { + font-size: smaller !important; + } + } +} + +.quickLinksSkeleton { + .circles { + display: flex; + flex-flow: row; + gap: 5px; + div { + margin-top: 10px; + padding: 3px; + height: 20px; + width: 20px; + border-radius: 100%; + display: grid; + place-items: center; + @include themed() { + background-color: t($modal-sidebarActive); + } + } + } +} + +.clockSkeleton { + font-size: 30px !important; + font-weight: bold; +} diff --git a/src/components/modals/main/scss/modules/_tab-content.scss b/src/components/modals/main/scss/modules/_tab-content.scss index eb46d8b0..a716afad 100644 --- a/src/components/modals/main/scss/modules/_tab-content.scss +++ b/src/components/modals/main/scss/modules/_tab-content.scss @@ -113,6 +113,9 @@ table { } } +.flexGrow { + flex-grow: 1; +} .messageMap { display: flex; flex-flow: row; @@ -139,6 +142,12 @@ table { .messageText { display: flex; flex-flow: column; + flex-grow: 3; + textarea { + @include themed() { + color: t($color); + } + } } .messageAction { float: right; diff --git a/src/components/modals/main/scss/settings/modules/tabs/_order.scss b/src/components/modals/main/scss/settings/modules/tabs/_order.scss index f79275fe..efc6e28d 100644 --- a/src/components/modals/main/scss/settings/modules/tabs/_order.scss +++ b/src/components/modals/main/scss/settings/modules/tabs/_order.scss @@ -103,6 +103,9 @@ } .previewItem { + display: flex; + flex-flow: column; + align-items: center; .quotediv .quote { max-width: 100%; } diff --git a/src/components/modals/main/settings/sections/Message.jsx b/src/components/modals/main/settings/sections/Message.jsx index 4bafce2a..b8a689fa 100644 --- a/src/components/modals/main/settings/sections/Message.jsx +++ b/src/components/modals/main/settings/sections/Message.jsx @@ -82,7 +82,7 @@ export default class Message extends PureComponent {
{this.state.messages.map((_url, index) => (
-
+
diff --git a/src/components/modals/main/settings/sections/Overview.jsx b/src/components/modals/main/settings/sections/Overview.jsx index a7615099..55227871 100644 --- a/src/components/modals/main/settings/sections/Overview.jsx +++ b/src/components/modals/main/settings/sections/Overview.jsx @@ -4,12 +4,12 @@ import { MdOutlineDragIndicator } from 'react-icons/md'; import { sortableContainer, sortableElement } from 'react-sortable-hoc'; import { toast } from 'react-toastify'; -import Greeting from '../../../../widgets/greeting/Greeting'; -import Clock from '../../../../widgets/time/Clock'; -import Quote from '../../../../widgets/quote/Quote'; -import QuickLinks from '../../../../widgets/quicklinks/QuickLinks'; -import Date from '../../../../widgets/time/Date'; -import Message from '../../../../widgets/message/Message'; +import Greeting from './overview_skeletons/Greeting'; +import Clock from './overview_skeletons/Clock'; +import Quote from './overview_skeletons/Quote'; +import QuickLinks from './overview_skeletons/QuickLinks'; +import Date from './overview_skeletons/Date'; +import Message from './overview_skeletons/Message'; import EventBus from 'modules/helpers/eventbus'; diff --git a/src/components/modals/main/settings/sections/Quote.jsx b/src/components/modals/main/settings/sections/Quote.jsx index 3f6eeb72..400c1f3a 100644 --- a/src/components/modals/main/settings/sections/Quote.jsx +++ b/src/components/modals/main/settings/sections/Quote.jsx @@ -214,7 +214,7 @@ export default class QuoteSettings extends PureComponent { /> + 10:20 + + ); +} diff --git a/src/components/modals/main/settings/sections/overview_skeletons/Date.jsx b/src/components/modals/main/settings/sections/overview_skeletons/Date.jsx new file mode 100644 index 00000000..9c288bcc --- /dev/null +++ b/src/components/modals/main/settings/sections/overview_skeletons/Date.jsx @@ -0,0 +1,9 @@ +export default function DateSkeleton() { + return ( + + Thursday January 1st +
+ Week 1 + + ); +} diff --git a/src/components/modals/main/settings/sections/overview_skeletons/Greeting.jsx b/src/components/modals/main/settings/sections/overview_skeletons/Greeting.jsx new file mode 100644 index 00000000..babf7ce0 --- /dev/null +++ b/src/components/modals/main/settings/sections/overview_skeletons/Greeting.jsx @@ -0,0 +1,7 @@ +export default function GreetingSkeleton() { + return ( + + Good Morning + + ); +} diff --git a/src/components/modals/main/settings/sections/overview_skeletons/Message.jsx b/src/components/modals/main/settings/sections/overview_skeletons/Message.jsx new file mode 100644 index 00000000..122468be --- /dev/null +++ b/src/components/modals/main/settings/sections/overview_skeletons/Message.jsx @@ -0,0 +1,10 @@ +export default function MessageSkeleton() { + return ( +

+ + Message +
+ +

+ ); +} diff --git a/src/components/modals/main/settings/sections/overview_skeletons/QuickLinks.jsx b/src/components/modals/main/settings/sections/overview_skeletons/QuickLinks.jsx new file mode 100644 index 00000000..90877141 --- /dev/null +++ b/src/components/modals/main/settings/sections/overview_skeletons/QuickLinks.jsx @@ -0,0 +1,16 @@ +import { FaDiscord, FaTwitter } from 'react-icons/fa'; +import { SiKofi, SiPatreon } from 'react-icons/si'; + + +export default function QuicklinksSkeleton() { + return ( +
+
+
+
+
+
+
+
+ ); +} diff --git a/src/components/modals/main/settings/sections/overview_skeletons/Quote.jsx b/src/components/modals/main/settings/sections/overview_skeletons/Quote.jsx new file mode 100644 index 00000000..0eae8b79 --- /dev/null +++ b/src/components/modals/main/settings/sections/overview_skeletons/Quote.jsx @@ -0,0 +1,18 @@ +import { MdPerson } from 'react-icons/md'; + +export default function QuoteSkeleton() { + return ( +
+ "Cheese good" +
+
+ +
+
+ James May + Cheese Man +
+
+
+ ); +} diff --git a/src/components/modals/main/tabs/backend/Tab.jsx b/src/components/modals/main/tabs/backend/Tab.jsx index f1dd093b..49d64110 100644 --- a/src/components/modals/main/tabs/backend/Tab.jsx +++ b/src/components/modals/main/tabs/backend/Tab.jsx @@ -14,7 +14,6 @@ import { MdOutlinePhoto as Background, MdSearch, MdCloudQueue as Weather, - MdList as Order, MdFormatPaint as Appearance, MdTranslate as Language, MdOutlineSettings as Advanced, @@ -65,9 +64,6 @@ function Tab({ label, currentTab, onClick, navbarTab }) { case getMessage('modals.main.settings.sections.appearance.navbar.title'): icon = ; break; - case getMessage('modals.main.settings.sections.order.title'): - icon = ; - break; case getMessage('modals.main.settings.sections.greeting.title'): icon = ; break; diff --git a/src/components/modals/main/tabs/backend/Tabs.jsx b/src/components/modals/main/tabs/backend/Tabs.jsx index 58629cc2..0f1af6dc 100644 --- a/src/components/modals/main/tabs/backend/Tabs.jsx +++ b/src/components/modals/main/tabs/backend/Tabs.jsx @@ -1,6 +1,6 @@ import variables from 'modules/variables'; import { PureComponent } from 'react'; -import { MdSettings, MdOutlineShoppingBasket, MdOutlineExtension } from 'react-icons/md'; +import { MdSettings, MdOutlineShoppingBasket, MdOutlineExtension, MdRefresh } from 'react-icons/md'; import Tab from './Tab'; import ErrorBoundary from '../../../ErrorBoundary'; @@ -41,6 +41,7 @@ export default class Tabs extends PureComponent { )}