diff options
author | kibigo! <marrus-sh@users.noreply.github.com> | 2017-12-03 23:26:40 -0800 |
---|---|---|
committer | kibigo! <marrus-sh@users.noreply.github.com> | 2017-12-03 23:26:40 -0800 |
commit | bc4fa6b198557a7f3989eb0865e2c77ac7451d29 (patch) | |
tree | a18543e1e0555e88b97cad60adc6d2abe0bffb00 /app/javascript/flavours/glitch/features/local_settings/navigation/item | |
parent | d216547382cf1f3419de31e1ee06272e816ea339 (diff) |
Rename themes -> flavours ? ?
Diffstat (limited to 'app/javascript/flavours/glitch/features/local_settings/navigation/item')
-rw-r--r-- | app/javascript/flavours/glitch/features/local_settings/navigation/item/index.js | 69 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/local_settings/navigation/item/style.scss | 27 |
2 files changed, 96 insertions, 0 deletions
diff --git a/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.js b/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.js new file mode 100644 index 000000000..a352d5fb2 --- /dev/null +++ b/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.js @@ -0,0 +1,69 @@ +// Package imports +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +// Stylesheet imports +import './style.scss'; + +// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + +export default class LocalSettingsPage extends React.PureComponent { + + static propTypes = { + active: PropTypes.bool, + className: PropTypes.string, + href: PropTypes.string, + icon: PropTypes.string, + index: PropTypes.number.isRequired, + onNavigate: PropTypes.func, + title: PropTypes.string, + }; + + handleClick = (e) => { + const { index, onNavigate } = this.props; + if (onNavigate) { + onNavigate(index); + e.preventDefault(); + } + } + + render () { + const { handleClick } = this; + const { + active, + className, + href, + icon, + onNavigate, + title, + } = this.props; + + const finalClassName = classNames('glitch', 'local-settings__navigation__item', { + active, + }, className); + + const iconElem = icon ? <i className={`fa fa-fw fa-${icon}`} /> : null; + + if (href) return ( + <a + href={href} + className={finalClassName} + > + {iconElem} {title} + </a> + ); + else if (onNavigate) return ( + <a + onClick={handleClick} + role='button' + tabIndex='0' + className={finalClassName} + > + {iconElem} {title} + </a> + ); + else return null; + } + +} diff --git a/app/javascript/flavours/glitch/features/local_settings/navigation/item/style.scss b/app/javascript/flavours/glitch/features/local_settings/navigation/item/style.scss new file mode 100644 index 000000000..7f7371993 --- /dev/null +++ b/app/javascript/flavours/glitch/features/local_settings/navigation/item/style.scss @@ -0,0 +1,27 @@ +@import 'styles/mastodon/variables'; + +.glitch.local-settings__navigation__item { + display: block; + padding: 15px 20px; + color: inherit; + background: $primary-text-color; + border-bottom: 1px $ui-primary-color solid; + cursor: pointer; + text-decoration: none; + outline: none; + transition: background .3s; + + &:hover { + background: $ui-secondary-color; + } + + &.active { + background: $ui-highlight-color; + color: $primary-text-color; + } + + &.close, &.close:hover { + background: $error-value-color; + color: $primary-text-color; + } +} |