mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-20 13:18:29 +00:00
Nikola Hristov
GitHub
commit
a88f71fa0f
3 changed files with 279 additions and 0 deletions
107
src/routes/Addons/InstallAddonDialog/InstallAddonDialog.js
Normal file
107
src/routes/Addons/InstallAddonDialog/InstallAddonDialog.js
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import { Input } from 'stremio-common';
|
||||
import Icon from 'stremio-icons/dom';
|
||||
import styles from './styles';
|
||||
|
||||
const MAX_DESCRIPTION_SYMBOLS = 200;
|
||||
|
||||
const renderName = (name) => {
|
||||
if (name.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles['name']}>{name}</div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderVersion = (version) => {
|
||||
if (version.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles['version']}>v. {version}</div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderType = (types) => {
|
||||
if (types.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles['types']}>
|
||||
{types.length <= 1 ? types.join('') : types.slice(0, -1).join(', ') + ' & ' + types[types.length - 1]}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderDescription = (description) => {
|
||||
if (description.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles['description']}>{description.length > MAX_DESCRIPTION_SYMBOLS ? description.slice(0, MAX_DESCRIPTION_SYMBOLS) + '...' : description}</div>
|
||||
);
|
||||
}
|
||||
|
||||
const InstallAddonDialog = (props) => {
|
||||
return (
|
||||
<div className={styles['install-addon-dialog']}>
|
||||
<Input className={styles['x-container']} type={'button'}>
|
||||
<Icon className={styles['icon']} icon={'ic_x'} onClick={props.onClose} />
|
||||
</Input>
|
||||
<div className={styles['info-container']}>
|
||||
<div className={styles['install-label']}>Install Add-on</div>
|
||||
<div className={styles['basic-info']}>
|
||||
<div className={styles['logo-container']}>
|
||||
<Icon className={styles['logo']} icon={props.logo.length === 0 ? 'ic_addons' : props.logo} />
|
||||
</div>
|
||||
<div className={styles['header-container']}>
|
||||
<div className={styles['header']}>
|
||||
{renderName(props.name)}
|
||||
{renderVersion(props.version)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{renderType(props.types)}
|
||||
{renderDescription(props.description)}
|
||||
<div className={styles['notice']}>
|
||||
Using third-party add-ons will always be subject to your responsibility and the governing law of the jurisdiction you are located.
|
||||
</div>
|
||||
<div className={styles['buttons']}>
|
||||
<Input className={classnames(styles['button'], styles['cancel-button'])} type={'button'} onClick={props.onClose}>
|
||||
<div className={styles['label']}>Cancel</div>
|
||||
</Input>
|
||||
<Input className={classnames(styles['button'], styles['install-button'])} type={'button'} onClick={props.onInstallClicked} >
|
||||
<div className={styles['label']}>Install</div>
|
||||
</Input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
InstallAddonDialog.propTypes = {
|
||||
className: PropTypes.string,
|
||||
logo: PropTypes.string.isRequired,
|
||||
name: PropTypes.string.isRequired,
|
||||
version: PropTypes.string.isRequired,
|
||||
types: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||||
description: PropTypes.string.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
onInstallClicked: PropTypes.func.isRequired
|
||||
};
|
||||
InstallAddonDialog.defaultProps = {
|
||||
logo: '',
|
||||
name: '',
|
||||
version: '',
|
||||
types: [],
|
||||
description: ''
|
||||
};
|
||||
|
||||
export default InstallAddonDialog;
|
||||
3
src/routes/Addons/InstallAddonDialog/index.js
Normal file
3
src/routes/Addons/InstallAddonDialog/index.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import InstallAddonDialog from './InstallAddonDialog';
|
||||
|
||||
export default InstallAddonDialog;
|
||||
169
src/routes/Addons/InstallAddonDialog/styles.less
Normal file
169
src/routes/Addons/InstallAddonDialog/styles.less
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
.install-addon-dialog {
|
||||
--addon-dialog-width: 450px;
|
||||
--spacing: 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.install-addon-dialog {
|
||||
padding: calc(var(--spacing) * 0.6);
|
||||
width: var(--addon-dialog-width);
|
||||
background-color: var(--color-surfacelighter);
|
||||
|
||||
.x-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
|
||||
.icon {
|
||||
padding: 0.3em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
fill: var(--color-surfacedark);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
fill: var(--color-surface);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
.icon {
|
||||
background-color: var(--color-surfacelight);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.icon {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-container {
|
||||
padding: 0 var(--spacing) var(--spacing) var(--spacing);
|
||||
|
||||
.install-label {
|
||||
font-size: 1.2em;
|
||||
font-weight: 500;
|
||||
color: var(--color-backgrounddarker);
|
||||
}
|
||||
|
||||
.basic-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.logo-container {
|
||||
margin-right: var(--spacing);
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
|
||||
.logo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.header-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
|
||||
.name {
|
||||
margin-right: var(--spacing);
|
||||
max-width: 10em;
|
||||
font-size: 1.5em;
|
||||
font-weight: 100;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--color-backgrounddarker);
|
||||
}
|
||||
|
||||
.version {
|
||||
flex: 1;
|
||||
font-weight: 100;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--color-backgrounddarker);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.types {
|
||||
min-height: 1.2em;
|
||||
font-weight: 100;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--color-backgrounddarker);
|
||||
}
|
||||
|
||||
.description {
|
||||
font-weight: 100;
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
color: var(--color-backgrounddarker);
|
||||
}
|
||||
|
||||
.notice {
|
||||
padding: 0.5em 0;
|
||||
font-weight: 100;
|
||||
font-style: italic;
|
||||
color: var(--color-backgrounddarker);
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.button {
|
||||
flex: 1;
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
.label {
|
||||
font-size: 1.1em;
|
||||
font-weight: 100;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&.cancel-button {
|
||||
margin-right: 3em;
|
||||
background-color: var(--color-surfacedark);
|
||||
|
||||
&:focus, &:hover {
|
||||
background-color: var(--color-surface);
|
||||
}
|
||||
}
|
||||
|
||||
&.install-button {
|
||||
background-color: var(--color-signal5);
|
||||
|
||||
&:focus, &:hover {
|
||||
background-color: var(--color-signal560);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>:not(:last-child) {
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue