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

Heavy-bordered buttons

Browse Source
This commit is contained in:
James Barnsley
2017-02-12 21:11:50 +13:00
parent e71b74f196
commit 574f378544
10 changed files with 110 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/components/FollowButton.js
View File

@ -35,7 +35,7 @@ class FollowButton extends React.Component{
if (this.props.className) className += ' '+this.props.className
if( this.props.is_following === true ){
return <button className={className} onClick={ () => this.remove() }>{ this.props.removeText }</button>
return <button className={className+' destructive'} onClick={ () => this.remove() }>{ this.props.removeText }</button>
}else{
return <button className={className} onClick={ () => this.add() }>{ this.props.addText }</button>
}

4
src/js/views/Album.js
View File

@ -118,8 +118,8 @@ class Album extends React.Component{
</div>
<div className="actions">
<button className="rounded primary" onClick={e => this.play()}>Play</button>
{ helpers.uriSource(this.props.params.uri) == 'spotify' ? <FollowButton className="outline rounded" uri={this.props.params.uri} addText="Add to library" removeText="Remove from library" is_following={this.props.album.is_following} /> : null }
<button className="primary" onClick={e => this.play()}>Play</button>
{ helpers.uriSource(this.props.params.uri) == 'spotify' ? <FollowButton className="secondary" uri={this.props.params.uri} addText="Add to library" removeText="Remove from library" is_following={this.props.album.is_following} /> : null }
</div>
<section className="list-wrapper">

2
src/js/views/Artist.js
View File

@ -195,7 +195,7 @@ class Artist extends React.Component{
<div className="liner">
<Thumbnail image={image} circle />
<h1>{ this.props.artist.name }</h1>
{ scheme == 'spotify' ? <div className="actions"><button className="primary rounded" onClick={e => this.props.pusherActions.startRadio([this.props.artist.uri])}>Start radio</button><FollowButton className="outline rounded white" uri={this.props.params.uri} removeText="Unfollow" addText="Follow" is_following={this.props.artist.is_following} /></div> : null}
{ scheme == 'spotify' ? <div className="actions"><button className="primary" onClick={e => this.props.pusherActions.startRadio([this.props.artist.uri])}>Start radio</button><FollowButton className="white" uri={this.props.params.uri} removeText="Unfollow" addText="Follow" is_following={this.props.artist.is_following} /></div> : null}
{ this.renderSubViewMenu() }
</div>
</div>

16
src/js/views/Playlist.js
View File

@ -95,9 +95,9 @@ class Playlist extends React.Component{
case 'm3u':
return (
<div className="actions">
<button className="rounded primary" onClick={ e => this.play() }>Play</button>
<button className="rounded outline" onClick={ e => this.props.uiActions.openModal('edit_playlist', { uri: this.props.playlist.uri, name: this.props.playlist.name }) }>Edit</button>
<ConfirmationButton className="rounded destructive" content="Delete" confirmingContent="Are you sure?" onConfirm={ e => this.delete() } />
<button className="primary" onClick={ e => this.play() }>Play</button>
<button className="secondary" onClick={ e => this.props.uiActions.openModal('edit_playlist', { uri: this.props.playlist.uri, name: this.props.playlist.name }) }>Edit</button>
<ConfirmationButton className="destructive" content="Delete" confirmingContent="Are you sure?" onConfirm={ e => this.delete() } />
</div>
)
@ -105,16 +105,16 @@ class Playlist extends React.Component{
if( this.props.playlist.can_edit ){
return (
<div className="actions">
<button className="rounded primary" onClick={ e => this.play() }>Play</button>
<button className="outline rounded" onClick={ e => this.props.uiActions.openModal('edit_playlist', { uri: this.props.playlist.uri, name: this.props.playlist.name, is_public: this.props.playlist.public }) }>Edit</button>
<ConfirmationButton className="rounded destructive" content="Delete" confirmingContent="Are you sure?" onConfirm={ e => this.unfollow() } />
<button className="primary" onClick={ e => this.play() }>Play</button>
<button className="secondary" onClick={ e => this.props.uiActions.openModal('edit_playlist', { uri: this.props.playlist.uri, name: this.props.playlist.name, is_public: this.props.playlist.public }) }>Edit</button>
<ConfirmationButton className="destructive" content="Delete" confirmingContent="Are you sure?" onConfirm={ e => this.unfollow() } />
</div>
)
}
return (
<div className="actions">
<button className="rounded primary" onClick={ e => this.play() }>Play</button>
<FollowButton className="rounded outline" uri={this.props.playlist.uri} addText="Add to library" removeText="Remove from library" is_following={this.props.playlist.is_following} />
<button className="primary" onClick={ e => this.play() }>Play</button>
<FollowButton uri={this.props.playlist.uri} addText="Add to library" removeText="Remove from library" is_following={this.props.playlist.is_following} />
</div>
)

2
src/js/views/User.js
View File

@ -71,7 +71,7 @@ class User extends React.Component{
</ul>
<div className="actions">
<FollowButton className="rounded outline" uri={this.props.params.uri} addText="Follow" removeText="Unfollow" />
<FollowButton className="secondary" uri={this.props.params.uri} addText="Follow" removeText="Unfollow" />
</div>
</div>
<div className="main">

6
src/scss/components/_header.scss
View File

@ -37,6 +37,12 @@ main {
line-height: 24px;
text-transform: uppercase;
min-width: 0;
border: 0;
color: #000000;
&:active {
background: rgba(0,0,0,0.15);
}
}
}
}

3
src/scss/components/_modal.scss
View File

@ -141,6 +141,9 @@
top: 5px;
right: 0;
padding: 14px;
margin: 0;
min-width: 0;
color: #FFFFFF;
}
input[type="text"]{
font-size: 14px;

144
src/scss/global/_forms.scss
View File

@ -35,15 +35,22 @@ button,
input[type="button"],
input[type="submit"] {
@include animate();
padding: 10px 20px;
padding: 6px 10px;
min-width: 150px;
border: 0;
margin: 0 10px 20px 0;
margin-right: 20px;
text-align: center;
min-width: 140px;
border-radius: 20px;
color: #000000;
background: $light_grey;
border: 2px solid $mid_grey;
color: $mid_grey;
background: transparent;
text-transform: uppercase;
font-size: 12px;
font-weight: 800;
&.wide {
min-width: 200px;
}
@include responsive( $bp_medium ){
min-width: none;
@ -51,76 +58,56 @@ input[type="submit"] {
&:hover{
cursor: pointer;
background: darken( $light_grey, 6%);
border-color: darken( $mid_grey, 10%);
}
&.outline {
&:active {
@include noanimate();
background: $mid_grey;
color: #FFFFFF;
padding: 9px 19px;
border: 1px solid $darkest_grey;
background: transparent;
color: $darkest_grey;
&.white {
border-color: #FFFFFF;
color: #FFFFFF;
background: rgba(0,0,0,0.2);
&:hover {
background: rgba(0,0,0,0.4);
border-color: #FFFFFF;
}
}
border-color: $mid_grey;
}
&.primary {
border-color: $turquoise;
color: $turquoise;
&:hover {
color: darken( $turquoise, 10% );
border-color: darken( $turquoise, 10% );
}
&:active {
color: #FFFFFF;
background: $turquoise;
border-color: $turquoise;
}
}
&.primary {
background: $turquoise;
color: #FFFFFF;
&:hover {
background: darken( $turquoise, 6% );
}
}
&.secondary {
background: #000000;
color: #FFFFFF;
color: #000000;
border-color: #000000;
&:hover {
background: lighten( #000000, 20% );
color: lighten( #000000, 40% );
border-color: lighten( #000000, 40% );
}
}
&.tertiary {
background: $mid_grey;
color: #FFFFFF;
&:hover {
background: darken( $mid_grey, 6% );
}
}
&.discrete {
background: transparent;
color: #FFFFFF;
&[disabled],
&[disabled="disabled"] {
background: transparent !important;
}
&:hover {
color: $turquoise;
&:active {
color: #FFFFFF;
background: #000000;
border-color: #000000;
}
}
&.confirming,
&.destructive {
background: $red;
color: #FFFFFF;
border-color: $red;
color: $red;
&:hover {
background: darken( $red, 6% );
color: darken( $red, 6% );
border-color: darken( $red, 6% );
}
&:active {
color: #FFFFFF;
background: $red;
border-color: $red;
}
}
@ -130,28 +117,49 @@ input[type="submit"] {
@include animate_timeout(2s);
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 0;
background: rgba(255,255,255,0.15);
height: 3px;
background: $red;
}
}
&.wide {
display: inline-block;
min-width: 200px;
text-align: center;
padding-left: 30px;
padding-right: 30px;
&.white {
color: #FFFFFF;
border-color: #FFFFFF;
&:hover {
color: rgba(255,255,255,0.8);
border-color: rgba(255,255,255,0.8);
}
&:active {
color: #000000;
background: #FFFFFF;
border-color: #FFFFFF;
}
}
&.discrete {
border: transparent;
&[disabled],
&[disabled="disabled"] {
border-color: $light_grey !important;
}
}
&[disabled],
&[disabled="disabled"]{
background: none !important;
color: $mid_grey !important;
opacity: 0.5;
cursor: not-allowed !important;
border-color: $mid_grey !important;
&,
&:hover,
&:active {
color: $mid_grey;
border-color: $mid_grey;
background: transparent;
}
}
}

15
src/scss/global/_variables.scss
View File

@ -38,13 +38,20 @@ $bp_shallow: 650px;
transition: all $duration $easing;
}
@keyframes fill_from_left {
from { width: 0%; }
to { width: 100%; }
@mixin noanimate(){
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
@keyframes shrink_from_right {
from { width: 100%; }
to { width: 0%; }
}
@mixin animate_timeout( $duration: 0.2s ){
animation-name: fill_from_left;
animation-name: shrink_from_right;
animation-duration: $duration;
animation-timing-function: linear;
}

2
src/scss/views/_artist.scss
View File

@ -38,7 +38,7 @@
}
.actions {
padding-bottom: 20px;
padding-bottom: 5px;
button {
margin-right: 20px;