Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 03:22:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

conflicts resolved

Browse source
This commit is contained in:
nklhrstv 2020-03-10 17:52:15 +02:00
commit 27eefd9fdb
13 changed files with 364 additions and 206 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/App/styles.less
View file

@ -36,7 +36,7 @@
overflow: hidden; overflow: hidden;
word-break: break-word; word-break: break-word;
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: @color-secondary-light4-80 @color-background-dark3; scrollbar-color: @color-secondaryvariant2-light1 @color-background-dark2;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
@ -44,11 +44,15 @@
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: @color-secondary-light4-80; background-color: @color-secondaryvariant2-light1;
&:hover {
background-color: @color-secondaryvariant2-light2;
}
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background-color: @color-background-dark3; background-color: @color-background-dark2;
} }
svg { svg {

21
src/common/AddonDetailsModal/AddonDetails/AddonDetails.js
View file

@ -20,21 +20,20 @@ const AddonDetails = ({ className, id, name, version, logo, description, types,
alt={' '} alt={' '}
renderFallback={renderLogoFallback} renderFallback={renderLogoFallback}
/> />
<span className={styles['name']}>{typeof name === 'string' && name.length > 0 ? name : id}</span> <div className={styles['name-container']}>
<span className={styles['name']}>{typeof name === 'string' && name.length > 0 ? name : id}</span>
{
typeof version === 'string' && version.length > 0 ?
<span className={styles['version']}>v. {version}</span>
:
null
}
</div>
</div> </div>
{ {
typeof description === 'string' && description.length > 0 ? typeof description === 'string' && description.length > 0 ?
<div className={styles['section-container']}> <div className={styles['section-container']}>
<span className={styles['section-header']}>{description}</span> <span className={styles['section-label']}>{description}</span>
</div>
:
null
}
{
typeof version === 'string' && version.length > 0 ?
<div className={styles['section-container']}>
<span className={styles['section-header']}>Version: </span>
<span className={styles['section-label']}>{version}</span>
</div> </div>
: :
null null

47
src/common/AddonDetailsModal/AddonDetails/styles.less
View file

@ -1,12 +1,18 @@
@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
.addon-details-container { .addon-details-container {
.title-container { .title-container {
display: flex;
flex-direction: row;
align-items: center;
.logo, .icon { .logo, .icon {
float: left; float: left;
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
margin-right: 1rem; margin-right: 1.5rem;
padding: 0.5rem; padding: 0.5rem;
background-color: var(--color-backgrounddarker); background-color: @color-background-dark5;
} }
.logo { .logo {
@ -15,13 +21,34 @@
} }
.icon { .icon {
fill: var(--color-surfacelighter); fill: @color-secondaryvariant1-light3;
} }
.name { .name-container {
font-size: 2.4rem; flex-grow: 1;
font-weight: 300; flex-shrink: 1;
line-height: 5rem; flex-basis: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
.name {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
margin-right: 0.5rem;
font-size: 1.6rem;
color: @color-background-dark5-90;
}
.version {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
margin-top: 0.5rem;
color: @color-background-dark5-60;
}
} }
} }
@ -29,12 +56,14 @@
margin-top: 1rem; margin-top: 1rem;
.section-header { .section-header {
font-size: 1.2rem; font-size: 1.1rem;
color: @color-background-dark5-90;
} }
.section-label { .section-label {
font-size: 1.2rem; font-size: 1.1rem;
font-weight: 300; font-weight: 300;
color: @color-background-dark5-90;
&.transport-url-label { &.transport-url-label {
user-select: text; user-select: text;

33
src/common/AddonDetailsModal/styles.less
View file

@ -1,10 +1,12 @@
@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
:import('~stremio/common/ModalDialog/styles.less') { :import('~stremio/common/ModalDialog/styles.less') {
label: label; label: label;
} }
.addon-details-modal-container { .addon-details-modal-container {
.addon-details-container, .addon-details-message-container { .addon-details-container, .addon-details-message-container {
width: 60rem; width: 40rem;
max-width: 100%; max-width: 100%;
} }
@ -15,20 +17,29 @@
} }
} }
.cancel-button, .uninstall-button { .uninstall-button, .cancel-button {
background-color: transparent; &:focus {
outline-width: var(--focus-outline-size); outline-color: @color-background-dark5;
outline-offset: calc(-1 * var(--focus-outline-size)); }
outline-color: var(--color-surfacedarker); }
outline-style: solid;
&:hover, &:focus { .cancel-button {
filter: none; background-color: transparent;
background: var(--color-surfacelight);
&:hover {
background-color: @color-surface-light3;
} }
.label { .label {
color: var(--color-surfacedarker); color: @color-surface-dark2;
}
}
.uninstall-button {
background-color: @color-accent2;
&:hover {
background-color: @color-accent2-light2;
} }
} }
} }

20
src/common/ModalDialog/ModalDialog.js
View file

@ -54,17 +54,15 @@ const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequ
return ( return (
<Modal ref={modalContainerRef} {...props} className={classnames(className, styles['modal-container'])} onMouseDown={onModalContainerMouseDown}> <Modal ref={modalContainerRef} {...props} className={classnames(className, styles['modal-container'])} onMouseDown={onModalContainerMouseDown}>
<div className={styles['modal-dialog-container']} onMouseDown={onModalDialogContainerMouseDown}> <div className={styles['modal-dialog-container']} onMouseDown={onModalDialogContainerMouseDown}>
<div className={styles['header-container']}> <Button className={styles['close-button-container']} title={'Close'} onClick={closeButtonOnClick}>
{ <Icon className={styles['icon']} icon={'ic_x'} />
typeof title === 'string' && title.length > 0 ? </Button>
<div className={styles['title-container']} title={title}>{title}</div> {
: typeof title === 'string' && title.length > 0 ?
null <div className={styles['title-container']} title={title}>{title}</div>
} :
<Button className={styles['close-button-container']} title={'Close'} onClick={closeButtonOnClick}> null
<Icon className={styles['icon']} icon={'ic_x'} /> }
</Button>
</div>
<div className={styles['modal-dialog-content']}> <div className={styles['modal-dialog-content']}>
{children} {children}
</div> </div>

92
src/common/ModalDialog/styles.less
View file

@ -1,8 +1,10 @@
@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
.modal-container { .modal-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: var(--color-backgrounddark40); background-color: @color-background-dark5-40;
.modal-dialog-container { .modal-dialog-container {
flex: none; flex: none;
@ -10,57 +12,47 @@
flex-direction: column; flex-direction: column;
max-width: 80%; max-width: 80%;
max-height: 80%; max-height: 80%;
background-color: var(--color-surfacelighter); background-color: @color-surface-light5;
.header-container { .close-button-container {
flex: none; flex: none;
align-self: stretch; align-self: flex-end;
display: flex; width: 2rem;
flex-direction: row; height: 2rem;
justify-content: flex-end; margin: 0.2rem 0.2rem 0 0;
padding: 0.2rem 0.2rem 0; padding: 0.5rem;
.title-container { .icon {
flex: 1; display: block;
align-self: center; width: 100%;
max-height: 2.4em; height: 100%;
padding: 0 0.5rem; fill: @color-surface-dark1;
font-size: 1.2rem;
color: var(--color-backgrounddarker);
} }
.close-button-container { &:hover, &:focus {
flex: none;
align-self: flex-start;
width: 2rem;
height: 2rem;
padding: 0.5rem;
.icon { .icon {
display: block; fill: @color-surface-light1;
width: 100%;
height: 100%;
fill: var(--color-surfacedark);
}
&:hover, &:focus {
background-color: var(--color-surfacelight);
.icon {
fill: var(--color-surfacedarker);
}
}
&:focus {
outline-color: var(--color-surfacedark);
} }
} }
&:focus {
outline-color: @color-background-dark5;
}
}
.title-container {
flex: 1 0 auto;
max-height: 2.4em;
margin: 0 2rem;
font-size: 1.2rem;
font-weight: 500;
color: @color-background-dark5-90;
} }
.modal-dialog-content { .modal-dialog-content {
flex: 1; flex: 1;
align-self: stretch; align-self: stretch;
margin: 2rem 1rem 0; margin: 1.5rem 1rem 0;
padding: 0 1rem; padding: 0 1rem;
overflow-y: auto; overflow-y: auto;
@ -72,7 +64,7 @@
.buttons-container { .buttons-container {
flex: none; flex: none;
align-self: stretch; align-self: stretch;
margin: 1rem 2rem 0; margin: 2rem 2rem 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
@ -90,17 +82,15 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 1rem; padding: 1.2rem;
background-color: var(--color-signal5); background-color: @color-accent3;
&:focus {
outline-width: calc(1.5 * var(--focus-outline-size));
outline-color: var(--color-surfacelighter);
outline-offset: calc(-2 * var(--focus-outline-size));
}
&:hover { &:hover {
filter: brightness(1.2); background-color: @color-accent3-light2;
}
&:focus {
outline-color: @color-background-dark5;
} }
&:not(:last-child) { &:not(:last-child) {
@ -112,7 +102,7 @@
width: 1.2rem; width: 1.2rem;
height: 1.2rem; height: 1.2rem;
margin-right: .5rem; margin-right: .5rem;
fill: var(--color-surfacelighter); fill: @color-surface-light5;
} }
.label { .label {
@ -122,6 +112,6 @@
max-height: 3.6em; max-height: 3.6em;
font-size: 1.1rem; font-size: 1.1rem;
text-align: center; text-align: center;
color: var(--color-surfacelighter); color: @color-surface-light5;
} }
} }

2
src/common/SharePrompt/SharePrompt.js
View file

@ -25,7 +25,7 @@ const SharePrompt = ({ className, url }) => {
if (routeFocused && inputRef.current !== null) { if (routeFocused && inputRef.current !== null) {
inputRef.current.select(); inputRef.current.select();
} }
}, []); }, [routeFocused]);
return ( return (
<div className={classnames(className, styles['share-prompt-container'])}> <div className={classnames(className, styles['share-prompt-container'])}>
<div className={styles['buttons-container']}> <div className={styles['buttons-container']}>

53
src/common/SharePrompt/styles.less
View file

@ -1,15 +1,12 @@
.share-prompt-container { @import (reference) '~stremio-colors/dist/less/stremio-colors.less';
min-width: 18rem;
background: var(--color-surfacelighter);
.share-prompt-container {
.buttons-container { .buttons-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
.button-container { .button-container {
flex-grow: 0; flex: 1;
flex-shrink: 1;
flex-basis: 14rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -20,20 +17,11 @@
margin-right: 1rem; margin-right: 1rem;
} }
&:hover {
filter: brightness(1.2);
}
&:focus {
outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter);
outline-offset: calc(-2 * var(--focus-outline-size));
}
.icon { .icon {
flex: none; flex: none;
height: 1.2rem; height: 1.2rem;
margin-right: 1rem; margin-right: 1rem;
fill: var(--color-surfacelighter); fill: @color-surface-light5;
} }
.label { .label {
@ -41,9 +29,20 @@
flex-shrink: 1; flex-shrink: 1;
flex-basis: auto; flex-basis: auto;
max-height: 2.4em; max-height: 2.4em;
font-size: 1.1rem;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
color: var(--color-surfacelighter); color: @color-surface-light5;
}
}
.facebook-button, .twitter-button {
&:hover {
filter: brightness(1.2);
}
&:focus {
outline-color: @color-background-dark5;
} }
} }
@ -60,15 +59,15 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-top: 1rem; margin-top: 1rem;
border: thin solid var(--color-surface); background-color: @color-surface-light2;
.url-text-input { .url-text-input {
flex: 1; flex: 1;
align-self: stretch; align-self: stretch;
padding: 1rem; padding: 1rem;
color: var(--color-backgroundlighter); font-size: 1.1rem;
text-align: center; text-align: center;
border-right: thin solid var(--color-surface); color: @color-background-dark5;
} }
.copy-button { .copy-button {
@ -79,16 +78,15 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 8rem; width: 8rem;
padding: 0.5rem; padding: 1rem;
background-color: var(--color-surface); background-color: @color-accent3;
&:hover { &:hover {
filter: brightness(1.2); background-color: @color-accent3-light2;
} }
&:focus { &:focus {
outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter); outline-color: @color-background-dark5;
outline-offset: calc(-1.5 * var(--focus-outline-size));
} }
.icon { .icon {
@ -96,7 +94,7 @@
width: 1.2rem; width: 1.2rem;
height: 1.2rem; height: 1.2rem;
margin-right: 0.5rem; margin-right: 0.5rem;
fill: var(--color-surfacedarker); fill: @color-surface-light5;
} }
.label { .label {
@ -104,7 +102,8 @@
flex-shrink: 1; flex-shrink: 1;
flex-basis: auto; flex-basis: auto;
max-height: 2.4em; max-height: 2.4em;
color: var(--color-surfacedarker); font-size: 1.1rem;
color: @color-surface-light5;
} }
} }
} }

4
src/routes/Addons/Addon/Addon.js
View file

@ -85,9 +85,9 @@ const Addon = ({ className, id, name, version, logo, description, types, install
<Button className={installed ? styles['uninstall-button-container'] : styles['install-button-container']} title={installed ? 'Uninstall' : 'Install'} tabIndex={-1} onClick={toggleButtonOnClick}> <Button className={installed ? styles['uninstall-button-container'] : styles['install-button-container']} title={installed ? 'Uninstall' : 'Install'} tabIndex={-1} onClick={toggleButtonOnClick}>
<div className={styles['label']}>{installed ? 'Uninstall' : 'Install'}</div> <div className={styles['label']}>{installed ? 'Uninstall' : 'Install'}</div>
</Button> </Button>
<Button className={styles['share-button-container']} title={'Share addon'} tabIndex={-1} onClick={shareButtonOnClick}> <Button className={styles['share-button-container']} title={'SHARE ADDON'} tabIndex={-1} onClick={shareButtonOnClick}>
<Icon className={styles['icon']} icon={'ic_share'} /> <Icon className={styles['icon']} icon={'ic_share'} />
<div className={styles['label']}>Share addon</div> <div className={styles['label']}>SHARE ADDON</div>
</Button> </Button>
</div> </div>
</Button> </Button>

59
src/routes/Addons/Addon/styles.less
View file

@ -1,16 +1,18 @@
@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
.addon-container { .addon-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
padding: 1rem; padding: 1.5rem;
background-color: var(--color-backgroundlighter); background-color: @color-background;
cursor: inherit; cursor: inherit;
.logo-container { .logo-container {
flex: none; flex: none;
width: 8rem; width: 6rem;
height: 8rem; height: 6rem;
background-color: var(--color-backgrounddarker); background-color: @color-surface-light5;
.logo { .logo {
display: block; display: block;
@ -26,7 +28,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 1rem; padding: 1rem;
fill: var(--color-surfacelighter); fill: @color-secondaryvariant1-light3;
} }
} }
@ -47,7 +49,7 @@
padding: 0 0.5rem; padding: 0 0.5rem;
max-height: 3.6em; max-height: 3.6em;
font-size: 1.6rem; font-size: 1.6rem;
color: var(--color-surfacelighter); color: @color-surface-light5-90;
} }
.version-container { .version-container {
@ -57,7 +59,7 @@
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0 0.5rem; padding: 0 0.5rem;
max-height: 2.4em; max-height: 2.4em;
color: var(--color-surfacelight); color: @color-surface-light5-60;
} }
.types-container { .types-container {
@ -67,7 +69,7 @@
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0 0.5rem; padding: 0 0.5rem;
max-height: 2.4em; max-height: 2.4em;
color: var(--color-surfacelight); color: @color-surface-light5-40;
text-transform: capitalize; text-transform: capitalize;
} }
@ -78,7 +80,7 @@
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0 0.5rem; padding: 0 0.5rem;
max-height: 4.8em; max-height: 4.8em;
color: var(--color-surfacelight); color: @color-surface-light5-90;
} }
} }
@ -91,7 +93,7 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 3.5rem; height: 4rem;
padding: 0 1rem; padding: 0 1rem;
&:not(:first-child) { &:not(:first-child) {
@ -100,8 +102,8 @@
.icon { .icon {
flex: none; flex: none;
width: 1.5rem; width: 2rem;
height: 1.5rem; height: 2rem;
margin-right: 1rem; margin-right: 1rem;
} }
@ -117,57 +119,48 @@
} }
.install-button-container { .install-button-container {
background-color: var(--color-signal5); background-color: @color-accent3;
&:hover { &:hover {
filter: brightness(1.2); background-color: @color-accent3-light2;
} }
.label { .label {
color: var(--color-surfacelighter); color: @color-surface-light5;
} }
} }
.uninstall-button-container { .uninstall-button-container {
outline-color: var(--color-surfacedark); outline-color: @color-background-light3;
outline-style: solid; outline-style: solid;
&:hover { &:hover {
outline-color: var(--color-surfacelight); background-color: @color-background-light2;
.label {
color: var(--color-surfacelight);
}
} }
.label { .label {
color: var(--color-surfacedark); color: @color-surface-light5-90;
} }
} }
.share-button-container { .share-button-container {
outline-color: var(--color-secondarylighter);
outline-style: solid;
&:hover { &:hover {
outline: none;
background: var(--color-secondarylight);
.icon { .icon {
fill: var(--color-surfacelighter); fill: @color-secondaryvariant1-light1;
} }
.label { .label {
color: var(--color-surfacelighter); text-decoration: underline;
color: @color-secondaryvariant1-light2;
} }
} }
.icon { .icon {
fill: var(--color-secondarylighter); fill: @color-secondaryvariant1-dark1-60;
} }
.label { .label {
color: var(--color-secondarylighter); color: @color-secondaryvariant1-90;
} }
} }
} }

54
src/routes/Addons/Addons.js
View file

@ -2,7 +2,7 @@ const React = require('react');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const { useRouteFocused } = require('stremio-router'); const { useRouteFocused } = require('stremio-router');
const Icon = require('stremio-icons/dom'); const Icon = require('stremio-icons/dom');
const { AddonDetailsModal, Button, Multiselect, MainNavBars, TextInput, SharePrompt, ModalDialog, useBinaryState } = require('stremio/common'); const { AddonDetailsModal, Button, Image, Multiselect, MainNavBars, TextInput, SharePrompt, ModalDialog, useBinaryState } = require('stremio/common');
const Addon = require('./Addon'); const Addon = require('./Addon');
const useAddons = require('./useAddons'); const useAddons = require('./useAddons');
const useSelectableInputs = require('./useSelectableInputs'); const useSelectableInputs = require('./useSelectableInputs');
@ -64,15 +64,20 @@ const Addons = ({ urlParams, queryParams }) => {
const searchInputOnChange = React.useCallback((event) => { const searchInputOnChange = React.useCallback((event) => {
setSearch(event.currentTarget.value); setSearch(event.currentTarget.value);
}, []); }, []);
const [sharedTransportUrl, setSharedTransportUrl] = React.useState(null); const [sharedAddon, setSharedAddon] = React.useState(null);
const clearSharedTransportUrl = React.useCallback(() => { const renderLogoFallback = React.useMemo(() => () => {
setSharedTransportUrl(null); return (
<Icon className={styles['icon']} icon={'ic_addons'} />
);
}, []);
const clearSharedAddon = React.useCallback(() => {
setSharedAddon(null);
}, []); }, []);
const onAddonShare = React.useCallback((event) => { const onAddonShare = React.useCallback((event) => {
setSharedTransportUrl(event.dataset.transportUrl); setSharedAddon(event.dataset.addon);
}, []); }, []);
const onAddonToggle = React.useCallback((event) => { const onAddonToggle = React.useCallback((event) => {
navigate({ detailsTransportUrl: event.dataset.transportUrl }); navigate({ detailsTransportUrl: event.dataset.addon.transportUrl });
}, [navigate]); }, [navigate]);
const closeAddonDetails = React.useCallback(() => { const closeAddonDetails = React.useCallback(() => {
navigate({ detailsTransportUrl: null }); navigate({ detailsTransportUrl: null });
@ -80,7 +85,7 @@ const Addons = ({ urlParams, queryParams }) => {
React.useLayoutEffect(() => { React.useLayoutEffect(() => {
closeAddAddonModal(); closeAddAddonModal();
setSearch(''); setSearch('');
clearSharedTransportUrl(); clearSharedAddon();
}, [urlParams, queryParams]); }, [urlParams, queryParams]);
return ( return (
<MainNavBars className={styles['addons-container']} route={'addons'}> <MainNavBars className={styles['addons-container']} route={'addons'}>
@ -97,15 +102,16 @@ const Addons = ({ urlParams, queryParams }) => {
className={styles['select-input-container']} className={styles['select-input-container']}
/> />
))} ))}
<div className={styles['spacing']} />
<label className={styles['search-bar-container']}> <label className={styles['search-bar-container']}>
<Icon className={styles['icon']} icon={'ic_search'} />
<TextInput <TextInput
className={styles['search-input']} className={styles['search-input']}
type={'text'} type={'text'}
placeholder={'Search addons...'} placeholder={'Search addons'}
value={search} value={search}
onChange={searchInputOnChange} onChange={searchInputOnChange}
/> />
<Icon className={styles['icon']} icon={'ic_search'} />
</label> </label>
</div> </div>
{ {
@ -152,7 +158,7 @@ const Addons = ({ urlParams, queryParams }) => {
installed={addon.installed} installed={addon.installed}
onToggle={onAddonToggle} onToggle={onAddonToggle}
onShare={onAddonShare} onShare={onAddonShare}
dataset={{ transportUrl: addon.transportUrl }} dataset={{ addon }}
/> />
)) ))
} }
@ -166,11 +172,12 @@ const Addons = ({ urlParams, queryParams }) => {
title={'Add addon'} title={'Add addon'}
buttons={addAddonModalButtons} buttons={addAddonModalButtons}
onCloseRequest={closeAddAddonModal}> onCloseRequest={closeAddAddonModal}>
<div className={styles['notice']}>You can add an addon via an external link, which will appear under Installed addons.</div>
<TextInput <TextInput
ref={addAddonUrlInputRef} ref={addAddonUrlInputRef}
className={styles['addon-url-input']} className={styles['addon-url-input']}
type={'text'} type={'text'}
placeholder={'Paste url...'} placeholder={'Paste addon URL'}
onSubmit={addAddonOnSubmit} onSubmit={addAddonOnSubmit}
/> />
</ModalDialog> </ModalDialog>
@ -178,14 +185,31 @@ const Addons = ({ urlParams, queryParams }) => {
null null
} }
{ {
typeof sharedTransportUrl === 'string' ? sharedAddon !== null ?
<ModalDialog <ModalDialog
className={styles['share-modal-container']} className={styles['share-modal-container']}
title={'Share addon'} title={'Share Addon'}
onCloseRequest={clearSharedTransportUrl}> onCloseRequest={clearSharedAddon}>
<div className={styles['title-container']}>
<Image
className={styles['logo']}
src={sharedAddon.manifest.logo}
alt={' '}
renderFallback={renderLogoFallback}
/>
<div className={styles['name-container']}>
<span className={styles['name']}>{typeof sharedAddon.manifest.name === 'string' && sharedAddon.manifest.name.length > 0 ? sharedAddon.manifest.name : sharedAddon.manifest.id}</span>
{
typeof sharedAddon.manifest.version === 'string' && sharedAddon.manifest.version.length > 0 ?
<span className={styles['version']}>v. {sharedAddon.manifest.version}</span>
:
null
}
</div>
</div>
<SharePrompt <SharePrompt
className={styles['share-prompt-container']} className={styles['share-prompt-container']}
url={sharedTransportUrl} url={sharedAddon.transportUrl}
/> />
</ModalDialog> </ModalDialog>
: :

173
src/routes/Addons/styles.less
View file

@ -1,24 +1,33 @@
@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
:import('~stremio/common/Multiselect/styles.less') { :import('~stremio/common/Multiselect/styles.less') {
multiselect-menu-container: menu-container; multiselect-menu-container: menu-container;
} }
:import('~stremio/common/ModalDialog/styles.less') {
addon-modal-content: modal-dialog-content;
cancel-button-label: label;
}
.addons-container { .addons-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: var(--color-background); background-color: @color-background-dark2;
.addons-content { .addons-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-self: stretch;
.selectable-inputs-container { .selectable-inputs-container {
flex: none; flex: none;
align-self: stretch; align-self: stretch;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 1.5rem; justify-content: space-between;
padding: 1.5rem 3rem;
overflow: visible; overflow: visible;
.add-button-container { .add-button-container {
@ -26,14 +35,19 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
height: 3rem; justify-content: center;
max-width: 15rem; width: 10rem;
height: 3.5rem;
margin-right: 1.5rem; margin-right: 1.5rem;
padding: 0 1rem; padding: 0 1rem;
background-color: var(--color-signal5); background-color: @color-accent3;
&:hover { &:hover {
filter: brightness(1.2); background-color: @color-accent3-light2;
}
&:focus {
outline-color: @color-surface-light5;
} }
.icon { .icon {
@ -41,7 +55,7 @@
width: 1.2rem; width: 1.2rem;
height: 1.2rem; height: 1.2rem;
margin-right: 1rem; margin-right: 1rem;
fill: var(--color-surfacelighter); fill: @color-surface-light5;
} }
.add-button-label { .add-button-label {
@ -50,7 +64,7 @@
flex-basis: auto; flex-basis: auto;
max-height: 2.4em; max-height: 2.4em;
font-size: 1.1rem; font-size: 1.1rem;
color: var(--color-surfacelighter); color: @color-surface-light5;
} }
} }
@ -58,7 +72,7 @@
flex-grow: 0; flex-grow: 0;
flex-shrink: 1; flex-shrink: 1;
flex-basis: 15rem; flex-basis: 15rem;
height: 3rem; height: 3.5rem;
margin-right: 1.5rem; margin-right: 1.5rem;
.multiselect-menu-container { .multiselect-menu-container {
@ -67,40 +81,52 @@
} }
} }
.spacing {
flex: 1;
}
.search-bar-container { .search-bar-container {
flex-grow: 0; flex-grow: 0;
flex-shrink: 1; flex-shrink: 1;
flex-basis: 15rem; flex-basis: 18rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
height: 3rem; height: 3.5rem;
padding: 0 1rem; padding: 0 1rem;
background-color: var(--color-backgroundlighter); border-radius: 2.3rem;
border: var(--focus-outline-size) solid transparent;
background-color: @color-background;
cursor: text; cursor: text;
&:hover, &:focus-within { &:hover, &:focus-within {
filter: brightness(1.2); background-color: @color-background-light2;
} }
.icon { &:focus-within {
flex: none; border: var(--focus-outline-size) solid @color-surface-light5;
width: 1.2rem;
height: 1.2rem;
margin-right: 1rem;
fill: var(--color-surfacelighter);
} }
.search-input { .search-input {
flex: 1; flex: 1;
color: var(--color-surfacelighter); margin-right: 1rem;
font-size: 1.1rem;
color: @color-surface-light5;
&::placeholder { &::placeholder {
max-height: 1.2em; max-height: 1.2em;
opacity: 1; opacity: 1;
color: var(--color-surfacelight); color: @color-secondaryvariant1-light1-90;
} }
} }
.icon {
flex: none;
width: 1.5rem;
height: 1.5rem;
fill: @color-secondaryvariant1;
}
} }
} }
@ -109,13 +135,13 @@
align-self: stretch; align-self: stretch;
padding: 0 1.5rem; padding: 0 1.5rem;
font-size: 2rem; font-size: 2rem;
color: var(--color-surfacelighter); color: @color-surface-light5;
} }
.addons-list-container { .addons-list-container {
flex: 1; flex: 1;
align-self: stretch; align-self: stretch;
padding: 0 1.5rem; padding: 0 3rem;
overflow-y: auto; overflow-y: auto;
.addon { .addon {
@ -126,20 +152,105 @@
} }
.add-addon-modal-container { .add-addon-modal-container {
.addon-url-input { .addon-modal-content {
width: 25rem; width: 30rem;
padding: 0.5rem 1rem;
color: var(--color-surfacedark); .notice {
border: thin solid var(--color-surface); margin-bottom: 1.5rem;
font-size: 1rem;
color: @color-background-dark5-90;
}
.addon-url-input {
width: 100%;
padding: 1rem;
color: @color-surface-dark5;
outline: var(--focus-outline-size) solid @color-surface-light2;
outline-offset: calc(-1 * var(--focus-outline-size));
&:hover {
outline-color: @color-surface-light4;
}
&:focus {
outline-color: @color-background-dark5;
}
}
} }
.cancel-button { .cancel-button {
background-color: var(--color-surfacedark); background-color: transparent;
&:hover {
background-color: @color-surface-light3;
}
&:focus {
outline-color: @color-background-dark5;
}
.cancel-button-label {
color: @color-surface-dark2;
}
} }
} }
.share-modal-container { .share-modal-container {
.share-prompt-container { .addon-modal-content {
width: 25rem; width: 30rem;
.title-container {
display: flex;
flex-direction: row;
align-items: center;
.logo, .icon {
float: left;
width: 5rem;
height: 5rem;
margin-right: 1.5rem;
padding: 0.5rem;
}
.logo {
object-fit: contain;
object-position: center;
}
.icon {
fill: @color-secondaryvariant1-light3;
}
.name-container {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
.name {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
margin-right: 0.5rem;
font-size: 1.6rem;
color: @color-background-dark5-90;
}
.version {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
margin-top: 0.5rem;
color: @color-background-dark5-60;
}
}
}
.share-prompt-container {
margin-top: 1rem;
}
} }
} }

2
src/routes/Intro/Intro.js
View file

@ -248,7 +248,7 @@ const Intro = ({ queryParams }) => {
const switchFormOnClick = React.useCallback(() => { const switchFormOnClick = React.useCallback(() => {
const nextQueryParams = new URLSearchParams(queryParams); const nextQueryParams = new URLSearchParams(queryParams);
nextQueryParams.set('form', state.form === SIGNUP_FORM ? LOGIN_FORM : SIGNUP_FORM); nextQueryParams.set('form', state.form === SIGNUP_FORM ? LOGIN_FORM : SIGNUP_FORM);
window.location.replace(`#/intro?${nextQueryParams}`); window.location = `#/intro?${nextQueryParams}`;
}, [queryParams, state.form]); }, [queryParams, state.form]);
React.useEffect(() => { React.useEffect(() => {
if ([LOGIN_FORM, SIGNUP_FORM].includes(queryParams.get('form'))) { if ([LOGIN_FORM, SIGNUP_FORM].includes(queryParams.get('form'))) {