Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 23:12:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: separate AddItem

Browse source
This commit is contained in:
Timothy Z. 2024-10-24 12:12:09 +03:00
parent f8cf7f7ae5
commit 38fc6e3c66
8 changed files with 107 additions and 146 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
src/routes/Settings/URLsManager/AddItem/AddItem.less Normal file
View file

@ -0,0 +1,89 @@
// Copyright (C) 2017-2024 Smart code 203358507
@import (reference) '~stremio/common/screen-sizes.less';
.add-item {
display: flex;
padding: 0.5rem 1.5rem;
gap: 1rem;
border-radius: var(--border-radius);
transition: 0.3s all ease-in-out;
background-color: transparent;
border: 2px solid transparent;
justify-content: space-between;
position: relative;
.input {
background-color: var(--overlay-color);
border-radius: var(--border-radius);
color: var(--primary-foreground-color);
padding: 0.5rem 0.75rem;
border: 1px solid transparent;
width: 70%;
&:focus {
border: 1px solid var(--primary-foreground-color);
}
}
.actions {
display: flex;
gap: 0.25rem;
margin-right: 0;
.add, .cancel {
display: flex;
gap: 0.5rem;
padding: 0.25rem;
align-items: center;
justify-content: center;
background-color: transparent;
transition: 0.3s all ease-in-out;
border-radius: var(--border-radius);
width: 3rem;
opacity: 0.6;
.icon {
width: 2rem;
height: 2rem;
color: var(--primary-foreground-color);
}
&:hover {
opacity: 1;
background-color: var(--overlay-color);
}
}
.add {
.icon {
width: 1.8rem;
height: 1.8rem;
}
&:hover {
.icon {
color: var(--secondary-accent-color);
}
}
}
.cancel {
&:hover {
.icon {
color: var(--color-trakt);
}
}
}
}
&:hover {
border: 2px solid transparent;
background-color: var(--overlay-color);
}
}
@media only screen and (max-width: @minimum) {
.add-item {
padding: 0.5rem;
}
}

14
src/routes/Settings/URLsManager/Item/AddItem.tsx → src/routes/Settings/URLsManager/AddItem/AddItem.tsx
View file

@ -1,17 +1,17 @@
// Copyright (C) 2017-2024 Smart code 203358507
import React, { ChangeEvent, useCallback, useState } from 'react';
import Button from 'stremio/common/Button';
import Icon from '@stremio/stremio-icons/react';
import TextInput from 'stremio/common/TextInput';
import styles from './Item.less';
import classNames from 'classnames';
import styles from './AddItem.less';
type Props = {
onCancel: () => void
handleAddUrl: (url: string) => void
onCancel: () => void;
handleAddUrl: (url: string) => void;
};
const AddItem = ({ onCancel, handleAddUrl }: Props) => {
const [inputValue, setInputValue] = useState('');
const handleValueChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
@ -19,11 +19,11 @@ const AddItem = ({ onCancel, handleAddUrl }: Props) => {
}, []);
const onSumbit = useCallback(() => {
handleAddUrl?.(inputValue);
handleAddUrl(inputValue);
}, [inputValue]);
return (
<div className={classNames(styles['item'], styles['add'])}>
<div className={styles['add-item']}>
<TextInput
className={styles['input']}
value={inputValue}

5
src/routes/Settings/URLsManager/AddItem/index.ts Normal file
View file

@ -0,0 +1,5 @@
// Copyright (C) 2017-2024 Smart code 203358507
import AddItem from './AddItem';
export default AddItem;

77
src/routes/Settings/URLsManager/Item/Item.less
View file

@ -99,79 +99,6 @@
}
}
&.add {
padding: 0.5rem 1.5rem;
gap: 1rem;
.input {
background-color: var(--overlay-color);
border-radius: var(--border-radius);
color: var(--primary-foreground-color);
padding: 0.5rem 0.75rem;
border: 1px solid transparent;
width: 70%;
&:focus {
border: 1px solid var(--primary-foreground-color);
}
}
.actions {
display: flex;
gap: 0.25rem;
margin-right: 0;
.add, .cancel {
display: flex;
gap: 0.5rem;
padding: 0.25rem;
align-items: center;
justify-content: center;
background-color: transparent;
transition: 0.3s all ease-in-out;
border-radius: var(--border-radius);
width: 3rem;
opacity: 0.6;
.icon {
width: 2rem;
height: 2rem;
color: var(--primary-foreground-color);
}
&:hover {
opacity: 1;
background-color: var(--overlay-color);
}
}
.add {
.icon {
width: 1.8rem;
height: 1.8rem;
}
&:hover {
.icon {
color: var(--secondary-accent-color);
}
}
}
.cancel {
&:hover {
.icon {
color: var(--color-trakt);
}
}
}
}
&:hover {
border: 2px solid transparent;
background-color: var(--overlay-color);
}
}
&:hover {
background-color: var(--overlay-color);
@ -196,9 +123,5 @@
right: 0.5rem;
}
}
&.add {
padding: 0.5rem;
}
}
}

6
src/routes/Settings/URLsManager/Item/Item.tsx
View file

@ -25,12 +25,12 @@ const Item = ({ url }: Props) => {
const defaultUrl = useMemo(() => url === DEFAULT_STREAMING_SERVER_URL, [url]);
const handleDelete = useCallback(() => {
deleteServerUrl?.(url);
selectServerUrl?.(DEFAULT_STREAMING_SERVER_URL);
deleteServerUrl(url);
selectServerUrl(DEFAULT_STREAMING_SERVER_URL);
}, [url]);
const handleSelect = useCallback(() => {
selectServerUrl?.(url);
selectServerUrl(url);
}, [url]);
return (

6
src/routes/Settings/URLsManager/Item/index.ts
View file

@ -1,9 +1,5 @@
// Copyright (C) 2017-2024 Smart code 203358507
import Item from './Item';
import AddItem from './AddItem';
export {
Item,
AddItem,
};
export default Item;

3
src/routes/Settings/URLsManager/URLsManager.tsx
View file

@ -4,7 +4,8 @@ import React, { useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import styles from './URLsManager.less';
import Button from 'stremio/common/Button';
import { Item, AddItem } from './Item';
import Item from './Item';
import AddItem from './AddItem';
import Icon from '@stremio/stremio-icons/react';
import useStreamingServerUrls from './useStreamingServerUrls';

53
src/routes/Settings/styles.less
View file

@ -12,11 +12,6 @@
multiselect-label: label;
}
:import('~stremio/common/ModalDialog/styles.less') {
configure-server-url-modal-content: modal-dialog-content;
cancel-button-label: label;
}
.settings-container {
width: 100%;
height: 100%;
@ -407,48 +402,6 @@
}
}
.configure-server-url-modal-container {
.configure-server-url-modal-content {
width: 30rem;
.server-url-input {
width: 100%;
padding: 1rem;
color: var(--primary-foreground-color);
border-radius: var(--border-radius);
background-color: var(--overlay-color);
outline: var(--focus-outline-size) solid var(--overlay-color);
outline-offset: calc(-1 * var(--focus-outline-size));
&:hover {
outline-color: var(--primary-foreground-color);
}
&:focus {
outline-color: var(--primary-foreground-color);
}
}
}
.cancel-button {
background-color: transparent;
opacity: 0.3;
&:hover {
outline: var(--focus-outline-size) solid var(--primary-foreground-color) inset;
opacity: 1;
}
&:focus {
outline-color: var(--primary-foreground-color);
}
.cancel-button-label {
color: var(--primary-foreground-color);
}
}
}
@media only screen and (max-width: @xsmall) {
.settings-container {
.settings-content {
@ -494,10 +447,4 @@
}
}
}
.configure-server-url-modal-container {
.configure-server-url-modal-content {
width: auto;
}
}
}