Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-08 06:25:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

🚸 Improve UX and QoL

Browse Source
This commit is contained in:
WalkxCode
2022-06-01 19:53:57 +02:00
parent c258003ec5
commit 5758019923
19 changed files with 12109 additions and 17365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

786
.yarn/releases/yarn-3.2.1.cjs vendored
View File

File diff suppressed because one or more lines are too long

5
.yarnrc
View File

@@ -1,5 +0,0 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
yarn-path ".yarn/releases/yarn-1.22.19.cjs"

3
.yarnrc.yml
View File

@@ -1,3 +0,0 @@
nodeLinker: node-modules
yarnPath: .yarn/releases/yarn-3.2.1.cjs

27
data/configs/default.json
View File

@@ -2,11 +2,11 @@
"name": "default",
"services": [
{
"name": "example",
"id": "09c45847-8afc-4c1a-9697-f03192de948a",
"type": "Other",
"icon": "https://c.tenor.com/o656qFKDzeUAAAAC/rick-astley-never-gonna-give-you-up.gif",
"url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
"id": "1ed0e82b-c432-4371-8e1e-876b76d4ce20",
"type": "Plex",
"name": "Plex",
"icon": "https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/plex.png",
"url": "https://plex.com"
}
],
"settings": {
@@ -17,7 +17,22 @@
"enabled": true
},
"Date": {
"enabled": false
"enabled": true
},
"Download Speed": {
"enabled": true
},
"Torrent": {
"enabled": true
},
"Ping Services": {
"enabled": true
},
"Calendar": {
"enabled": true
},
"Weather (beta)": {
"enabled": true
}
}
}

4
src/components/AppShelf/AddAppShelfItem.tsx
View File

@@ -256,14 +256,14 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
color: 'gray',
}}
>
tip: Get your API key{' '}
Tip: Get your API key{' '}
<Anchor
target="_blank"
weight="bold"
style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
href={`${hostname}/settings/general`}
>
here
here.
</Anchor>
</Text>
</>

2
src/components/AppShelf/AppShelfItem.tsx
View File

@@ -91,11 +91,11 @@ export function AppShelfItem(props: any) {
>
<motion.i
whileHover={{
cursor: 'pointer',
scale: 1.1,
}}
>
<Image
styles={{ root: { cursor: 'pointer' } }}
width={80}
height={80}
src={service.icon}

2
src/components/AppShelf/AppShelfMenu.tsx
View File

@@ -66,7 +66,7 @@ export default function AppShelfMenu(props: any) {
autoClose: 5000,
title: (
<Text>
Service <b>{service.name}</b> removed successfully
Service <b>{service.name}</b> removed successfully!
</Text>
),
color: 'green',

6
src/components/Config/SaveConfig.tsx
View File

@@ -60,7 +60,7 @@ export default function SaveConfigComponent(props: any) {
</form>
</Modal>
<Button leftIcon={<Download />} variant="outline" onClick={onClick}>
Download your config
Download config
</Button>
<Button
leftIcon={<Trash />}
@@ -91,10 +91,10 @@ export default function SaveConfigComponent(props: any) {
setConfig({ ...config, name: 'default' });
}}
>
Delete current config
Delete config
</Button>
<Button leftIcon={<Plus />} variant="outline" onClick={() => setOpened(true)}>
Save a copy of your config
Save a copy
</Button>
</Group>
);

2
src/components/Settings/ModuleEnabler.tsx
View File

@@ -12,7 +12,7 @@ export default function ModuleEnabler(props: any) {
key={module.title}
size="md"
checked={config.modules?.[module.title]?.enabled ?? false}
label={`Enable ${module.title} module`}
label={`Enable ${module.title}`}
onChange={(e) => {
setConfig({
...config,

2
src/components/Settings/SettingsMenu.tsx
View File

@@ -92,7 +92,7 @@ function SettingsMenu(props: any) {
color: 'gray',
}}
>
tip: You can upload your config file by dragging and dropping it onto the page
Tip: You can upload your config file by dragging and dropping it onto the page!
</Text>
<Group position="center" direction="row" mr="xs">
<Group spacing={0}>

15
src/components/layout/Footer.tsx
View File

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
import { createStyles, Footer as FooterComponent } from '@mantine/core';
import { showNotification } from '@mantine/notifications';
import { CURRENT_VERSION, REPO_URL } from '../../../data/constants';
import { IconAlertCircle as AlertCircle } from '@tabler/icons';
const useStyles = createStyles((theme) => ({
footer: {
@@ -38,12 +39,22 @@ export function Footer({ links }: FooterCenteredProps) {
// Fetch Data here when component first mounted
fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => {
res.json().then((data) => {
if (data.tag_name !== CURRENT_VERSION) {
if (data.tag_name >= CURRENT_VERSION) {
showNotification({
color: 'yellow',
autoClose: false,
title: 'New version available',
message: `Version ${data.tag_name} is available, update now! 😡`,
icon: <AlertCircle />,
message: `Version ${data.tag_name} is available, update now!`,
});
} else if (data.tag_name <= CURRENT_VERSION) {
showNotification({
color: 'orange',
autoClose: 5000,
title: 'You are using a development version',
icon: <AlertCircle />,
loading: true,
message: 'This version of Homarr is still in development! Bugs are expected 🐛',
});
}
});

2
src/components/layout/Logo.tsx
View File

@@ -13,11 +13,11 @@ export function Logo({ style }: any) {
}}
/>
<NextLink
href="/"
style={{
textDecoration: 'none',
position: 'relative',
}}
href="/"
>
<Text
sx={style}

15
src/components/modules/downloads/DownloadsModule.tsx
View File

@@ -1,13 +1,4 @@
import {
Table,
Text,
Tooltip,
Title,
Group,
Progress,
Skeleton,
ScrollArea,
} from '@mantine/core';
import { Table, Text, Tooltip, Title, Group, Progress, Skeleton, ScrollArea } from '@mantine/core';
import { IconDownload as Download } from '@tabler/icons';
import { useEffect, useState } from 'react';
import axios from 'axios';
@@ -63,9 +54,9 @@ export default function DownloadComponent() {
if (!qBittorrentService && !delugeService) {
return (
<Group direction="column">
<Title>Critical: No qBittorrent/Deluge instance found in services.</Title>
<Title order={3}>No supported download clients found!</Title>
<Group>
<Title order={3}>Add a qBittorrent/Deluge service to view current downloads</Title>
<Text>Add a download service to view your current downloads...</Text>
<AddItemShelfButton />
</Group>
</Group>

6
src/components/modules/downloads/TotalDownloadsModule.tsx
View File

@@ -43,7 +43,7 @@ function humanFileSize(initialBytes: number, si = true, dp = 1) {
}
export const TotalDownloadsModule: IModule = {
title: 'Download speed',
title: 'Download Speed',
description: 'Show the current download speed of supported services',
icon: Download,
component: TotalDownloadsComponent,
@@ -104,9 +104,9 @@ export default function TotalDownloadsComponent() {
if (!qBittorrentService && !delugeService) {
return (
<Group direction="column">
<Title order={3}>Critical: No qBittorrent/Deluge instance found in services.</Title>
<Title order={4}>No supported download clients found!</Title>
<Group noWrap>
<Title order={5}>Add a qBittorrent/Deluge service to view current downloads</Title>
<Text>Add a download service to view your current downloads...</Text>
<AddItemShelfButton />
</Group>
</Group>

2
src/components/modules/search/SearchModule.tsx
View File

@@ -116,7 +116,7 @@ export default function SearchBar(props: any) {
}
>
<Text>
tip: Use the prefixes <b>!yt</b> and <b>!t</b> in front of your query to search on YouTube
Tip: Use the prefixes <b>!yt</b> and <b>!t</b> in front of your query to search on YouTube
or for a Torrent respectively.
</Text>
</Popover>

4
src/pages/_app.tsx
View File

@@ -9,6 +9,7 @@ import { useHotkeys } from '@mantine/hooks';
import Layout from '../components/layout/Layout';
import { ConfigProvider } from '../tools/state';
import { theme } from '../tools/theme';
import { styles } from '../tools/styles';
export default function App(props: AppProps & { colorScheme: ColorScheme }) {
const { Component, pageProps } = props;
@@ -35,6 +36,9 @@ export default function App(props: AppProps & { colorScheme: ColorScheme }) {
...theme,
colorScheme,
}}
styles={{
...styles,
}}
withGlobalStyles
withNormalizeCSS
>

12
src/tools/styles.ts Normal file
View File

@@ -0,0 +1,12 @@
import { MantineProviderProps } from '@mantine/core';
export const styles: MantineProviderProps['styles'] = {
Checkbox: {
input: { cursor: 'pointer' },
label: { cursor: 'pointer' },
},
Switch: {
input: { cursor: 'pointer' },
label: { cursor: 'pointer' },
},
};

5
src/tools/theme.ts
View File

@@ -1,3 +1,6 @@
import { MantineProviderProps } from '@mantine/core';
export const theme: MantineProviderProps['theme'] = {};
export const theme: MantineProviderProps['theme'] = {
primaryColor: 'red',
primaryShade: 6,
};

28574
yarn.lock
View File

File diff suppressed because it is too large Load Diff