mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-06-12 03:28:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch '7.0' of https://github.com/mue/mue into 7.0

Browse Source
This commit is contained in:
David Ralph
2022-08-31 22:05:19 +01:00
parent 7880489034 dc8abfe436
commit 8fd5b47545
12 changed files with 88 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/modals/main/scss/settings/modules/tabs/_about.scss
View File

@@ -16,7 +16,7 @@
display: flex;
gap: 15px;
a {
@include basicIconButton(11px, 1.5rem, modal);
@include basicIconButton(11px, 1.2rem, modal);
}
}

4
src/components/modals/main/settings/sections/Time.jsx
View File

@@ -109,7 +109,7 @@ export default class TimeSettings extends PureComponent {
type="color"
name="hourColour"
className="minuteColour"
onChange={(event) => this.updateColour('hour', event)}
onChange={(event) => this.updateColour('hourColour', event)}
value={this.state.hourColour}
></input>
<label htmlFor={'hourColour'} className="customBackgroundHex">
@@ -131,7 +131,7 @@ export default class TimeSettings extends PureComponent {
type="color"
name="minuteColour"
className="minuteColour"
onChange={(event) => this.updateColour('minute', event)}
onChange={(event) => this.updateColour('minuteColour', event)}
value={this.state.minuteColour}
></input>
<label htmlFor={'minuteColour'} className="customBackgroundHex">

2
src/components/widgets/background/Maximise.jsx
View File

@@ -71,7 +71,7 @@ export default class Maximise extends PureComponent {
<Tooltip
title={variables.getMessage('modals.main.settings.sections.background.buttons.view')}
>
<button>
<button style={{ fontSize: this.props.fontSize }}>
<MdCropFree onClick={this.maximise} className="topicons" />
</button>
</Tooltip>

27
src/components/widgets/navbar/Navbar.jsx
View File

@@ -23,8 +23,9 @@ export default class Navbar extends PureComponent {
}
setZoom() {
const zoomNavbar = Number((localStorage.getItem('zoomNavbar') || 100) / 100);
this.navbarContainer.current.style.fontSize = `${zoomNavbar}em`;
this.setState({
zoomFontSize: Number(((localStorage.getItem('zoomNavbar') || 100) / 100) * 1.2) + "rem"
})
}
componentDidMount() {
@@ -60,27 +61,19 @@ export default class Navbar extends PureComponent {
const backgroundEnabled = localStorage.getItem('background') === 'true';
const navbar = (
<div className="navbar-container" ref={this.navbarContainer}>
<div className={this.state.classList}>
{localStorage.getItem('view') === 'true' && backgroundEnabled ? <Maximise /> : null}
{localStorage.getItem('notesEnabled') === 'true' ? <Notes /> : null}
{localStorage.getItem('todo') === 'true' ? <Todo /> : null}
<div className="navbar-container" >
<div className={this.state.classList} >
{localStorage.getItem('view') === 'true' && backgroundEnabled ? <Maximise fontSize={this.state.zoomFontSize} /> : null}
{localStorage.getItem('notesEnabled') === 'true' ? <Notes fontSize={this.state.zoomFontSize} /> : null}
{localStorage.getItem('todo') === 'true' ? <Todo fontSize={this.state.zoomFontSize} /> : null}
{this.refreshEnabled !== 'false' ? (
<Tooltip title={variables.getMessage('widgets.navbar.tooltips.refresh')}>
<button onClick={() => this.refresh()}>
<button onClick={() => this.refresh()} style={{ fontSize: this.state.zoomFontSize }}>
<MdRefresh className="refreshicon topicons" />
</button>
</Tooltip>
) : null}
{/*<InfoTooltip
title="You can now sync your settings"
subtitle={'All settings, such as theme can now be synced across clients'}
linkURL={'https://www.youtube.com/watch?v=dQw4w9WgXcQ'}
linkText={'Learn more'}
>
</InfoTooltip>*/}
<Tooltip
title={variables.getMessage('modals.main.navbar.settings', {
type: variables.getMessage(
@@ -88,7 +81,7 @@ export default class Navbar extends PureComponent {
),
})}
>
<button onClick={() => this.props.openModal('mainModal')}>
<button onClick={() => this.props.openModal('mainModal')} style={{ fontSize: this.state.zoomFontSize }}>
<MdSettings className="settings-icon topicons" />
</button>
</Tooltip>

25
src/components/widgets/navbar/Notes.jsx
View File

@@ -6,6 +6,7 @@ import TextareaAutosize from '@mui/material/TextareaAutosize';
import { toast } from 'react-toastify';
import Tooltip from '../../helpers/tooltip/Tooltip';
import { saveFile } from 'modules/helpers/settings/modals';
import EventBus from 'modules/helpers/eventbus';
class Notes extends PureComponent {
constructor() {
@@ -17,6 +18,25 @@ class Notes extends PureComponent {
};
}
setZoom() {
this.setState({
zoomFontSize: Number(((localStorage.getItem('zoomNavbar') || 100) / 100) * 1.2) + "rem"
})
}
componentDidMount() {
EventBus.on('refresh', (data) => {
if (data === 'navbar' || data === 'background') {
this.forceUpdate();
try {
this.setZoom();
} catch (e) {}
}
});
this.setZoom();
}
setNotes = (e) => {
localStorage.setItem('notes', e.target.value);
this.setState({
@@ -70,8 +90,9 @@ class Notes extends PureComponent {
onFocus={() => this.showNotes()}
onBlur={() => this.hideNotes()}
ref={this.props.notesRef}
style={{ fontSize: this.state.zoomFontSize }}
>
<MdAssignment className="topicons" />
<MdAssignment className="topicons"/>
</button>
{this.state.showNotes && (
<span
@@ -119,7 +140,7 @@ class Notes extends PureComponent {
}
}
export default function NotesWrapper() {
export default function NotesWrapper(props) {
const { x, y, reference, floating, strategy } = useFloating({
placement: 'bottom',
middleware: [shift()],

21
src/components/widgets/navbar/Todo.jsx
View File

@@ -12,6 +12,7 @@ import Tooltip from '../../helpers/tooltip/Tooltip';
import Checkbox from '@mui/material/Checkbox';
import { shift, useFloating } from '@floating-ui/react-dom';
import { sortableContainer, sortableElement } from 'react-sortable-hoc';
import EventBus from 'modules/helpers/eventbus';
const SortableItem = sortableElement(({ value }) => <div>{value}</div>);
const SortableContainer = sortableContainer(({ children }) => <div>{children}</div>);
@@ -32,6 +33,25 @@ class Todo extends PureComponent {
};
}
setZoom() {
this.setState({
zoomFontSize: Number(((localStorage.getItem('zoomNavbar') || 100) / 100) * 1.2) + "rem"
})
}
componentDidMount() {
EventBus.on('refresh', (data) => {
if (data === 'navbar' || data === 'background') {
this.forceUpdate();
try {
this.setZoom();
} catch (e) {}
}
});
this.setZoom();
}
arrayMove(array, oldIndex, newIndex) {
const result = Array.from(array);
const [removed] = result.splice(oldIndex, 1);
@@ -120,6 +140,7 @@ class Todo extends PureComponent {
onFocus={() => this.hideTodo()}
onBlur={() => this.showTodo()}
ref={this.props.todoRef}
style={{ fontSize: this.state.zoomFontSize }}
>
<MdChecklist className="topicons" />
</button>

6
src/components/widgets/navbar/scss/index.scss
View File

@@ -34,16 +34,16 @@
.old {
.tooltip {
button {
@include basicIconButton(12px, 20px, legacy);
@include basicIconButton(12px, 1.2rem, legacy);
}
}
.first {
@include basicIconButton(12px, 20px, legacy);
@include basicIconButton(12px, 1.2rem, legacy);
}
}
.new {
button {
@include basicIconButton(12px, 20px, ui);
@include basicIconButton(12px, 1.2rem, ui);
}
}

2
src/components/widgets/quote/quote.scss
View File

@@ -56,7 +56,7 @@ h1.quoteauthor {
}
.author-license {
font-size: clamp(8px, 2.5vw, 0.25em);
font-size: clamp(8px, 2.5vw, 0.1em);
@include themed() {
color: t($subColor);
}

4
src/components/widgets/search/search.scss
View File

@@ -10,7 +10,7 @@
@extend %basic;
outline: none;
border: none;
font-size: 20px;
font-size: 1.2rem;
padding: 10px 0 10px 20px;
&::placeholder {
@@ -40,7 +40,7 @@
flex-flow: column;
button {
@include basicIconButton(12px, 20px, ui);
@include basicIconButton(12px, 1.2rem, ui);
}
}

10
src/components/widgets/weather/Weather.jsx
View File

@@ -144,7 +144,7 @@ export default class Weather extends PureComponent {
}
render() {
const weatherType = localStorage.getItem('weatherType');
const weatherType = localStorage.getItem('weatherType') || 1;
const enabled = (setting) => {
return (localStorage.getItem(setting) === 'true' && weatherType >= 3) || weatherType === '3';
};
@@ -220,7 +220,7 @@ export default class Weather extends PureComponent {
placement="left"
>
<span>
<WeatherIcon classsName="weatherIcon" name={this.state.icon} />
<WeatherIcon className="weatherIcon" name={this.state.icon} />
{this.state.weather.description}
</span>
</Tooltip>
@@ -233,7 +233,7 @@ export default class Weather extends PureComponent {
placement="left"
>
<span>
<MdDisabledVisible style={{ padding: '3px' }} />
<MdDisabledVisible className="materialWeatherIcon" />
{variables.getMessage('widgets.weather.meters', {
amount: this.state.weather.visibility,
})}
@@ -248,8 +248,8 @@ export default class Weather extends PureComponent {
placement="left"
>
<span>
<WiHumidity style={{ padding: '3px' }} />
{this.state.weather.humdity}
<WiHumidity className="materialWeatherIcon" />
{this.state.weather.humidity}
</span>
</Tooltip>
) : null}

24
src/components/widgets/weather/WeatherIcon.jsx
View File

@@ -17,35 +17,35 @@ export default function WeatherIcon({ name }) {
// name is the openweathermap icon name, see https://openweathermap.org/weather-conditions
switch (name) {
case '01d':
return <WiDaySunny />;
return <WiDaySunny className="weatherIcon"/>;
case '01n':
return <WiNightClear />;
return <WiNightClear className="weatherIcon"/>;
case '02d':
return <WiDayCloudy />;
return <WiDayCloudy className="weatherIcon" />;
case '02n':
return <WiNightCloudy />;
return <WiNightCloudy className="weatherIcon"/>;
case '03d':
case '03n':
return <WiCloud />;
return <WiCloud className="weatherIcon"/>;
case '04d':
case '04n':
return <WiCloudy />;
return <WiCloudy className="weatherIcon"/>;
case '09d':
return <WiDayShowers />;
return <WiDayShowers className="weatherIcon"/>;
case '09n':
return <WiNightShowers />;
return <WiNightShowers className="weatherIcon" />;
case '10d':
case '10n':
return <WiRain />;
return <WiRain className="weatherIcon" />;
case '11d':
case '11n':
return <WiThunderstorm />;
return <WiThunderstorm className="weatherIcon" />;
case '13d':
case '13n':
return <WiSnow />;
return <WiSnow className="weatherIcon" />;
case '50d':
case '50n':
return <WiFog />;
return <WiFog className="weatherIcon" />;
default:
return null;
}

8
src/components/widgets/weather/weather.scss
View File

@@ -31,6 +31,7 @@
}
.extra-info {
width: 100%;
font-size: 18px;
gap: 40px;
@@ -56,6 +57,7 @@
}
.top-weather {
width: 100%;
display: flex;
justify-content: space-between;
gap: 25px;
@@ -99,10 +101,14 @@
}
.weatherIcon {
font-size: 1.4em !important;
font-size: 21px !important;
display: grid;
align-items: center;
}
.materialWeatherIcon {
font-size: 18px !important;
padding: 2px;
}
}
}