Rework a bit settings view

This commit is contained in:
Lucas Verney 2016-09-18 22:50:59 +02:00
parent a1bc4141bb
commit 82a744afa6
16 changed files with 98 additions and 59 deletions

View File

@ -116,7 +116,7 @@ class AlbumRowCSS extends Component {
render() { render() {
return ( return (
<div className="row" styleName="row"> <div className="row" styleName="row">
<div className="col-sm-offset-2 col-xs-9 col-sm-10" styleName="nameRow"> <div className="col-xs-9 col-sm-offset-2 col-sm-10" styleName="nameRow">
<h2>{this.props.album.get("name")}</h2> <h2>{this.props.album.get("name")}</h2>
</div> </div>
<div className="col-xs-3 col-sm-2" styleName="artRow"> <div className="col-xs-3 col-sm-2" styleName="artRow">

View File

@ -87,16 +87,16 @@ class ArtistCSS extends Component {
<div> <div>
{ error } { error }
<div className="row" styleName="name"> <div className="row" styleName="name">
<div className="col-sm-12"> <div className="col-xs-12">
<h1>{this.props.artist.get("name")}</h1> <h1>{this.props.artist.get("name")}</h1>
<hr/> <hr/>
</div> </div>
</div> </div>
<div className="row"> <div className="row">
<div className="col-sm-9"> <div className="col-xs-9">
<p>{this.props.artist.get("summary")}</p> <p>{this.props.artist.get("summary")}</p>
</div> </div>
<div className="col-sm-3 text-center"> <div className="col-xs-3 text-center">
<p><img src={this.props.artist.get("art")} width="200" height="200" className="img-responsive img-circle" styleName="art" alt={this.props.artist.get("name")}/></p> <p><img src={this.props.artist.get("art")} width="200" height="200" className="img-responsive img-circle" styleName="art" alt={this.props.artist.get("name")}/></p>
</div> </div>
</div> </div>

View File

@ -131,7 +131,7 @@ class LoginFormCSSIntl extends Component {
: null : null
} }
<div className="row"> <div className="row">
<form className="col-sm-9 col-sm-offset-1 col-md-6 col-md-offset-3 text-left form-horizontal login" onSubmit={this.handleSubmit} ref="loginForm" aria-describedby="loginFormInfo loginFormError"> <form className="col-xs-9 col-xs-offset-1 col-md-6 col-md-offset-3 text-left form-horizontal login" onSubmit={this.handleSubmit} ref="loginForm" aria-describedby="loginFormInfo loginFormError">
<div className="row"> <div className="row">
<div className="form-group" ref="usernameFormGroup"> <div className="form-group" ref="usernameFormGroup">
<div className="col-xs-12"> <div className="col-xs-12">
@ -198,7 +198,7 @@ class LoginCSS extends Component {
<h1><img styleName="titleImage" src="./img/ampache-blue.png" alt="A"/>mpache</h1> <h1><img styleName="titleImage" src="./img/ampache-blue.png" alt="A"/>mpache</h1>
<hr/> <hr/>
{(!this.props.error && !this.props.info) ? greeting : null} {(!this.props.error && !this.props.info) ? greeting : null}
<div className="col-sm-9 col-sm-offset-2 col-md-6 col-md-offset-3"> <div className="col-xs-9 col-xs-offset-2 col-md-6 col-md-offset-3">
<LoginForm onSubmit={this.props.onSubmit} username={this.props.username} endpoint={this.props.endpoint} rememberMe={this.props.rememberMe} isAuthenticating={this.props.isAuthenticating} error={this.props.error} info={this.props.info} /> <LoginForm onSubmit={this.props.onSubmit} username={this.props.username} endpoint={this.props.endpoint} rememberMe={this.props.rememberMe} isAuthenticating={this.props.isAuthenticating} error={this.props.error} info={this.props.info} />
</div> </div>
</div> </div>

View File

@ -62,12 +62,21 @@ class PlaylistIntl extends Component {
); );
} }
return ( return (
<div className="row"> <div>
<h2 className="text-center"> <div className="row">
<FormattedMessage {...playlistMessages["app.playlist.playlist"]} /> <div className="col-xs-12">
</h2> <h2>
<FormattedMessage {...playlistMessages["app.playlist.playlist"]} />
</h2>
<hr />
</div>
</div>
{ playlistText } <div className="row">
<div className="col-xs-12">
{ playlistText }
</div>
</div>
</div> </div>
); );

View File

@ -1,26 +1,44 @@
// NPM imports // NPM imports
import React, { Component } from "react"; import React, { Component } from "react";
import CSSModules from "react-css-modules"; import { defineMessages, injectIntl, intlShape, FormattedMessage } from "react-intl";
import { injectIntl, intlShape } from "react-intl";
// Styles // Local imports
import css from "../styles/Songs.scss"; import { messagesMap } from "../utils";
// Translations
import commonMessages from "../locales/messagesDescriptors/common";
import messages from "../locales/messagesDescriptors/Settings";
// Define translations
const settingsMessages = defineMessages(messagesMap(Array.concat([], commonMessages, messages)));
/** /**
* A single row for a single song in the songs table. * A single row for a single song in the songs table.
*/ */
class SettingsCSSIntl extends Component { class SettingsIntl extends Component {
render() { render() {
return ( return (
<div> <div>
<h2>Settings</h2> <div className="row">
<p>TODO</p> <div className="col-xs-12">
<h2>
<FormattedMessage {...settingsMessages["app.settings.settings"]} />
</h2>
<hr/>
</div>
</div>
<div className="row">
<div className="col-xs-12">
<p>TODO</p>
</div>
</div>
</div> </div>
); );
} }
} }
SettingsCSSIntl.propTypes = { SettingsIntl.propTypes = {
intl: intlShape.isRequired, intl: intlShape.isRequired,
}; };
export default injectIntl(CSSModules(SettingsCSSIntl, css)); export default injectIntl(SettingsIntl);

View File

@ -37,6 +37,7 @@ module.exports = {
"app.playlist.flushPlaylist": "Empty the playlist", // Empty the playlist link label "app.playlist.flushPlaylist": "Empty the playlist", // Empty the playlist link label
"app.playlist.fullPlaylist": "Full playlist", // Full playlist "app.playlist.fullPlaylist": "Full playlist", // Full playlist
"app.playlist.playlist": "Playlist", // Playlist translation "app.playlist.playlist": "Playlist", // Playlist translation
"app.settings.settings": "Settings", // Settings translation
"app.sidebarLayout.browse": "Browse", // Browse "app.sidebarLayout.browse": "Browse", // Browse
"app.sidebarLayout.browseAlbums": "Browse albums", // Browse albums "app.sidebarLayout.browseAlbums": "Browse albums", // Browse albums
"app.sidebarLayout.browseArtists": "Browse artists", // Browse artists "app.sidebarLayout.browseArtists": "Browse artists", // Browse artists

View File

@ -37,6 +37,7 @@ module.exports = {
"app.playlist.flushPlaylist": "Vider la playlist", // Empty the playlist link label "app.playlist.flushPlaylist": "Vider la playlist", // Empty the playlist link label
"app.playlist.fullPlaylist": "Playlist complète", // Full playlist "app.playlist.fullPlaylist": "Playlist complète", // Full playlist
"app.playlist.playlist": "Liste de lecture", // Playlist translation "app.playlist.playlist": "Liste de lecture", // Playlist translation
"app.settings.settings": "Préférences", // Settings translation
"app.sidebarLayout.browse": "Explorer", // Browse "app.sidebarLayout.browse": "Explorer", // Browse
"app.sidebarLayout.browseAlbums": "Parcourir les albums", // Browse albums "app.sidebarLayout.browseAlbums": "Parcourir les albums", // Browse albums
"app.sidebarLayout.browseArtists": "Parcourir les artistes", // Browse artists "app.sidebarLayout.browseArtists": "Parcourir les artistes", // Browse artists

View File

@ -0,0 +1,9 @@
const messages = [
{
"id": "app.settings.settings",
"defaultMessage": "Settings",
"description": "Settings translation",
},
];
export default messages;

View File

@ -37,18 +37,19 @@ $condensedNavPadding: 5px;
text-decoration: none; text-decoration: none;
} }
.link:hover {
color: $foreground;
background-color: $hoverBackground !important;
text-decoration: none;
}
.link:focus { .link:focus {
color: $foreground; color: $foreground;
background-color: transparent !important; background-color: transparent !important;
text-decoration: none; text-decoration: none;
} }
/** Note: Keep hover after focus pseudo-class so that hover overloads focus. */
.link:hover {
color: $foreground;
background-color: $hoverBackground !important;
text-decoration: none;
}
.active { .active {
composes: link; composes: link;
background-color: $activeBackground !important; background-color: $activeBackground !important;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,2 +1,2 @@
!function(e){function t(r){if(n[r])return n[r].exports;var a=n[r]={exports:{},id:r,loaded:!1};return e[r].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var n={};return t.m=e,t.c=n,t.p="./",t(0)}({0:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(639);Object.keys(r).forEach(function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(t,e,{enumerable:!0,get:function(){return r[e]}})})},639:function(e,t){!function(t,n){function r(e,t){var n=e.createElement("p"),r=e.getElementsByTagName("head")[0]||e.documentElement;return n.innerHTML="x<style>"+t+"</style>",r.insertBefore(n.lastChild,r.firstChild)}function a(){var e=b.elements;return"string"==typeof e?e.split(" "):e}function o(e,t){var n=b.elements;"string"!=typeof n&&(n=n.join(" ")),"string"!=typeof e&&(e=e.join(" ")),b.elements=n+" "+e,s(t)}function c(e){var t=E[e[v]];return t||(t={},y++,e[v]=y,E[y]=t),t}function i(e,t,r){if(t||(t=n),f)return t.createElement(e);r||(r=c(t));var a;return a=r.cache[e]?r.cache[e].cloneNode():g.test(e)?(r.cache[e]=r.createElem(e)).cloneNode():r.createElem(e),!a.canHaveChildren||p.test(e)||a.tagUrn?a:r.frag.appendChild(a)}function l(e,t){if(e||(e=n),f)return e.createDocumentFragment();t=t||c(e);for(var r=t.frag.cloneNode(),o=0,i=a(),l=i.length;o<l;o++)r.createElement(i[o]);return r}function u(e,t){t.cache||(t.cache={},t.createElem=e.createElement,t.createFrag=e.createDocumentFragment,t.frag=t.createFrag()),e.createElement=function(n){return b.shivMethods?i(n,e,t):t.createElem(n)},e.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+a().join().replace(/[\w\-:]+/g,function(e){return t.createElem(e),t.frag.createElement(e),'c("'+e+'")'})+");return n}")(b,t.frag)}function s(e){e||(e=n);var t=c(e);return!b.shivCSS||d||t.hasCSS||(t.hasCSS=!!r(e,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),f||u(e,t),e}var d,f,m="3.7.3-pre",h=t.html5||{},p=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,g=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,v="_html5shiv",y=0,E={};!function(){try{var e=n.createElement("a");e.innerHTML="<xyz></xyz>",d="hidden"in e,f=1==e.childNodes.length||function(){n.createElement("a");var e=n.createDocumentFragment();return"undefined"==typeof e.cloneNode||"undefined"==typeof e.createDocumentFragment||"undefined"==typeof e.createElement}()}catch(t){d=!0,f=!0}}();var b={elements:h.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:m,shivCSS:h.shivCSS!==!1,supportsUnknownElements:f,shivMethods:h.shivMethods!==!1,type:"default",shivDocument:s,createElement:i,createDocumentFragment:l,addElements:o};t.html5=b,s(n),"object"==typeof e&&e.exports&&(e.exports=b)}("undefined"!=typeof window?window:this,document)}}); !function(e){function t(r){if(n[r])return n[r].exports;var a=n[r]={exports:{},id:r,loaded:!1};return e[r].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var n={};return t.m=e,t.c=n,t.p="./",t(0)}({0:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(640);Object.keys(r).forEach(function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(t,e,{enumerable:!0,get:function(){return r[e]}})})},640:function(e,t){!function(t,n){function r(e,t){var n=e.createElement("p"),r=e.getElementsByTagName("head")[0]||e.documentElement;return n.innerHTML="x<style>"+t+"</style>",r.insertBefore(n.lastChild,r.firstChild)}function a(){var e=b.elements;return"string"==typeof e?e.split(" "):e}function o(e,t){var n=b.elements;"string"!=typeof n&&(n=n.join(" ")),"string"!=typeof e&&(e=e.join(" ")),b.elements=n+" "+e,s(t)}function c(e){var t=E[e[v]];return t||(t={},y++,e[v]=y,E[y]=t),t}function i(e,t,r){if(t||(t=n),f)return t.createElement(e);r||(r=c(t));var a;return a=r.cache[e]?r.cache[e].cloneNode():g.test(e)?(r.cache[e]=r.createElem(e)).cloneNode():r.createElem(e),!a.canHaveChildren||p.test(e)||a.tagUrn?a:r.frag.appendChild(a)}function l(e,t){if(e||(e=n),f)return e.createDocumentFragment();t=t||c(e);for(var r=t.frag.cloneNode(),o=0,i=a(),l=i.length;o<l;o++)r.createElement(i[o]);return r}function u(e,t){t.cache||(t.cache={},t.createElem=e.createElement,t.createFrag=e.createDocumentFragment,t.frag=t.createFrag()),e.createElement=function(n){return b.shivMethods?i(n,e,t):t.createElem(n)},e.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+a().join().replace(/[\w\-:]+/g,function(e){return t.createElem(e),t.frag.createElement(e),'c("'+e+'")'})+");return n}")(b,t.frag)}function s(e){e||(e=n);var t=c(e);return!b.shivCSS||d||t.hasCSS||(t.hasCSS=!!r(e,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),f||u(e,t),e}var d,f,m="3.7.3-pre",h=t.html5||{},p=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,g=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,v="_html5shiv",y=0,E={};!function(){try{var e=n.createElement("a");e.innerHTML="<xyz></xyz>",d="hidden"in e,f=1==e.childNodes.length||function(){n.createElement("a");var e=n.createDocumentFragment();return"undefined"==typeof e.cloneNode||"undefined"==typeof e.createDocumentFragment||"undefined"==typeof e.createElement}()}catch(t){d=!0,f=!0}}();var b={elements:h.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:m,shivCSS:h.shivCSS!==!1,supportsUnknownElements:f,shivMethods:h.shivMethods!==!1,type:"default",shivDocument:s,createElement:i,createDocumentFragment:l,addElements:o};t.html5=b,s(n),"object"==typeof e&&e.exports&&(e.exports=b)}("undefined"!=typeof window?window:this,document)}});
//# sourceMappingURL=fix.ie9.js.map //# sourceMappingURL=fix.ie9.js.map

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long