extras
/
mue
mirror of https://github.com/mue/mue.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: overview tab 

Co-authored-by: David Ralph <me@davidcralph.co.uk>
This commit is contained in:
alexsparkes 2022-08-16 12:09:57 +01:00
parent 78bf7eca24
commit ff49fa6d48
14 changed files with 182 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
src/components/modals/main/scss/index.scss
View File

@ -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;
}

9
src/components/modals/main/scss/modules/_tab-content.scss
View File

@ -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;

3
src/components/modals/main/scss/settings/modules/tabs/_order.scss
View File

@ -103,6 +103,9 @@
}
.previewItem {
display: flex;
flex-flow: column;
align-items: center;
.quotediv .quote {
max-width: 100%;
}

2
src/components/modals/main/settings/sections/Message.jsx
View File

@ -82,7 +82,7 @@ export default class Message extends PureComponent {
<div className="messagesContainer">
{this.state.messages.map((_url, index) => (
<div className="messageMap">
<div>
<div className="flexGrow">
<div className="icon">
<MdOutlineTextsms />
</div>

12
src/components/modals/main/settings/sections/Overview.jsx
View File

@ -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';

2
src/components/modals/main/settings/sections/Quote.jsx
View File

@ -214,7 +214,7 @@ export default class QuoteSettings extends PureComponent {
/>
<Checkbox
name="quoteShareButton"
text={this.getMessage('modals.main.settings.sections.quote.buttons.tweet')}
text={this.getMessage('widgets.quote.share')}
category="quote"
/>
<Checkbox

7
src/components/modals/main/settings/sections/overview_skeletons/Clock.jsx Normal file
View File

@ -0,0 +1,7 @@
export default function ClockSkeleton() {
return (
<span className="new-clock clock-container clockSkeleton">
10:20
</span>
);
}

9
src/components/modals/main/settings/sections/overview_skeletons/Date.jsx Normal file
View File

@ -0,0 +1,9 @@
export default function DateSkeleton() {
return (
<span className="date">
Thursday January 1st
<br />
Week 1
</span>
);
}

7
src/components/modals/main/settings/sections/overview_skeletons/Greeting.jsx Normal file
View File

@ -0,0 +1,7 @@
export default function GreetingSkeleton() {
return (
<span className="greeting">
Good Morning
</span>
);
}

10
src/components/modals/main/settings/sections/overview_skeletons/Message.jsx Normal file
View File

@ -0,0 +1,10 @@
export default function MessageSkeleton() {
return (
<h2 className="message">
<span>
Message
<br />
</span>
</h2>
);
}

16
src/components/modals/main/settings/sections/overview_skeletons/QuickLinks.jsx Normal file
View File

@ -0,0 +1,16 @@
import { FaDiscord, FaTwitter } from 'react-icons/fa';
import { SiKofi, SiPatreon } from 'react-icons/si';
export default function QuicklinksSkeleton() {
return (
<div className="quickLinksSkeleton">
<div className='circles'>
<div><FaDiscord/></div>
<div><FaTwitter/></div>
<div><SiKofi/></div>
<div><SiPatreon/></div>
</div>
</div>
);
}

18
src/components/modals/main/settings/sections/overview_skeletons/Quote.jsx Normal file
View File

@ -0,0 +1,18 @@
import { MdPerson } from 'react-icons/md';
export default function QuoteSkeleton() {
return (
<div className="quoteSkeleton">
<span className="subtitle">"Cheese good"</span>
<div className="skeletonAuthor">
<div>
<MdPerson />
</div>
<div className="text">
<span className="title">James May</span>
<span className="subtitle">Cheese Man</span>
</div>
</div>
</div>
);
}

4
src/components/modals/main/tabs/backend/Tab.jsx
View File

@ -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 = <Navbar />;
break;
case getMessage('modals.main.settings.sections.order.title'):
icon = <Order />;
break;
case getMessage('modals.main.settings.sections.greeting.title'):
icon = <Greeting />;
break;

5
src/components/modals/main/tabs/backend/Tabs.jsx
View File

@ -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 {
)}
</span>
<button onClick={() => window.location.reload()}>
<MdRefresh />
{variables.language.getMessage(
variables.languagecode,
'modals.main.error_boundary.refresh',
@ -70,7 +71,6 @@ export default class Tabs extends PureComponent {
return (
<div style={{ display: 'flex', width: '100%' }}>
<ul className="sidebar">
{reminderInfo}
{this.props.children.map((tab, index) => (
<Tab
currentTab={this.state.currentTab}
@ -80,6 +80,7 @@ export default class Tabs extends PureComponent {
navbarTab={this.props.navbar || false}
/>
))}
{reminderInfo}
</ul>
<div className="tab-content" style={{ width: '100%' }}>
<ErrorBoundary>