secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Preliminary light theme

Browse Source
This commit is contained in:
James Barnsley
2018-08-24 16:10:41 +12:00
parent 1cbe7ed3ad
commit 6c3854af74
9 changed files with 104 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
mopidy_iris/static/app.css
View File

@ -2486,6 +2486,9 @@ html {
letter-spacing: -0.01rem;
touch-action: manipulation;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); }
body .light-theme,
html .light-theme {
background: #FFFFFF; }
*::-webkit-scrollbar {
width: 8px;
@ -4579,6 +4582,9 @@ aside {
border-right: 1px solid #1d1d1d;
color: #FFFFFF;
box-sizing: border-box; }
.light-theme aside {
background: #f4f2f0;
border-right: 1px solid #eeeae7; }
aside .liner {
overflow-y: auto;
position: absolute;
@ -4634,6 +4640,9 @@ aside {
background: -moz-linear-gradient(to bottom right, rgba(255, 255, 255, 0.75), black);
background: -o-linear-gradient(to bottom right, rgba(255, 255, 255, 0.75), black);
background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.75), black); }
.light-theme aside nav a {
color: #181818;
font-weight: 600; }
aside nav a .icon {
padding-right: 8px;
vertical-align: top;

51
mopidy_iris/static/app.js
View File

@ -52557,6 +52557,7 @@ var initialState = {
http_streaming_url: "http://" + window.location.hostname + ":8000/mopidy"
},
ui: {
theme: 'dark',
shortkeys_enabled: true,
allow_reporting: true,
slim_mode: false,
@ -62242,7 +62243,7 @@ var App = function (_React$Component) {
}, {
key: 'render',
value: function render() {
var className = '';
var className = this.props.theme + '-theme';
if (this.props.dragger && this.props.dragger.active) {
className += ' dragging';
}
@ -62300,6 +62301,7 @@ var App = function (_React$Component) {
var mapStateToProps = function mapStateToProps(state, ownProps) {
return {
theme: state.ui.theme,
shortkeys_enabled: state.ui.shortkeys_enabled,
allow_reporting: state.ui.allow_reporting,
touch_dragging: state.ui.touch_dragging,
@ -70555,6 +70557,53 @@ var Settings = function (_React$Component) {
{ className: 'underline' },
'Advanced'
),
_react2.default.createElement(
'div',
{ className: 'field radio' },
_react2.default.createElement(
'div',
{ className: 'name' },
'Theme'
),
_react2.default.createElement(
'div',
{ className: 'input' },
_react2.default.createElement(
'label',
null,
_react2.default.createElement('input', {
type: 'radio',
name: 'theme',
value: 'dark',
checked: this.props.ui.theme == 'dark',
onChange: function onChange(e) {
return _this2.props.uiActions.set({ theme: e.target.value });
} }),
_react2.default.createElement(
'span',
{ className: 'label' },
'Dark'
)
),
_react2.default.createElement(
'label',
null,
_react2.default.createElement('input', {
type: 'radio',
name: 'theme',
value: 'light',
checked: this.props.ui.theme == 'light',
onChange: function onChange(e) {
return _this2.props.uiActions.set({ theme: e.target.value });
} }),
_react2.default.createElement(
'span',
{ className: 'label' },
'Light'
)
)
)
),
_react2.default.createElement(
'div',
{ className: 'field checkbox' },

2
mopidy_iris/static/app.js.map
View File

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/index.html
View File

@ -98,7 +98,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1535070753";
var build = "1535083216";
var version = "3.24.0";
// Construct the script tag

3
src/js/App.js
View File

@ -280,7 +280,7 @@ class App extends React.Component{
}
render(){
var className = '';
var className = this.props.theme+'-theme';
if (this.props.dragger && this.props.dragger.active){
className += ' dragging';
}
@ -335,6 +335,7 @@ class App extends React.Component{
const mapStateToProps = (state, ownProps) => {
return {
theme: state.ui.theme,
shortkeys_enabled: state.ui.shortkeys_enabled,
allow_reporting: state.ui.allow_reporting,
touch_dragging: state.ui.touch_dragging,

1
src/js/bootstrap.js vendored
View File

@ -49,6 +49,7 @@ var initialState = {
http_streaming_url: "http://"+window.location.hostname+":8000/mopidy"
},
ui: {
theme: 'dark',
shortkeys_enabled: true,
allow_reporting: true,
slim_mode: false,

26
src/js/views/Settings.js
View File

@ -277,6 +277,32 @@ class Settings extends React.Component {
<h4 className="underline">Advanced</h4>
<div className="field radio">
<div className="name">
Theme
</div>
<div className="input">
<label>
<input
type="radio"
name="theme"
value="dark"
checked={this.props.ui.theme == 'dark'}
onChange={ e => this.props.uiActions.set({theme: e.target.value})} />
<span className="label">Dark</span>
</label>
<label>
<input
type="radio"
name="theme"
value="light"
checked={this.props.ui.theme == 'light'}
onChange={e => this.props.uiActions.set({theme: e.target.value})} />
<span className="label">Light</span>
</label>
</div>
</div>
<div className="field checkbox">
<div className="name">UI behavior</div>
<div className="input">

10
src/scss/components/_sidebar.scss
View File

@ -12,6 +12,11 @@ aside{
color: $white;
box-sizing: border-box;
.light-theme & {
background: $faint_grey;
border-right: 1px solid darken($faint_grey, 3%);
}
.liner {
overflow-y: auto;
position: absolute;
@ -54,6 +59,11 @@ aside{
padding: 10px 10px 8px;
margin: 0 16px;
border-radius: 3px;
.light-theme & {
color: $dark_grey;
font-weight: 600;
}
.icon {
padding-right: 8px;

4
src/scss/global/_core.scss
View File

@ -40,6 +40,10 @@ html {
letter-spacing: -0.01rem;
touch-action: manipulation;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
.light-theme {
background: $white;
}
}
*::-webkit-scrollbar{