redo sync button on dashboard
This commit is contained in:
parent
e350f7bb04
commit
8562ac894c
|
@ -1,6 +1,8 @@
|
||||||
`import Ember from 'ember'`
|
`import Ember from 'ember'`
|
||||||
|
|
||||||
Component = Ember.Component.extend
|
Component = Ember.Component.extend
|
||||||
|
|
||||||
|
classNames: ["sync-button"]
|
||||||
actions: {
|
actions: {
|
||||||
sync: ->
|
sync: ->
|
||||||
@get('user').sync()
|
@get('user').sync()
|
||||||
|
|
|
@ -1,14 +1,20 @@
|
||||||
.sync-button
|
.sync-button
|
||||||
padding: 0.8em 0
|
padding: 0.8em 0
|
||||||
button
|
display: flex
|
||||||
@extend %border-radius-4px
|
flex-direction: row-reverse
|
||||||
padding: 0 10px
|
.button
|
||||||
max-width: 98px
|
padding: 5px 10px
|
||||||
min-height: 25px
|
|
||||||
margin-left: .5em
|
margin-left: .5em
|
||||||
|
height: 25px
|
||||||
|
position: relative
|
||||||
|
z-index: 1
|
||||||
background: #a6adad
|
background: #a6adad
|
||||||
color: #ffffff
|
color: #ffffff
|
||||||
|
font-size: 14px
|
||||||
|
font-weight: 300
|
||||||
border: none
|
border: none
|
||||||
|
border-radius: 2px
|
||||||
|
line-height: 1
|
||||||
&:hover
|
&:hover
|
||||||
background: #8d9b9a
|
background: #8d9b9a
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
|
@ -16,17 +22,17 @@
|
||||||
&.is-syncing
|
&.is-syncing
|
||||||
background: #c6b93d
|
background: #c6b93d
|
||||||
color: $white
|
color: $white
|
||||||
padding: 0 10px
|
|
||||||
max-width: 160px
|
|
||||||
.icon
|
.icon
|
||||||
position: relative
|
width: 1.1em
|
||||||
top: -0.1em
|
|
||||||
width: 1em
|
|
||||||
height: 1.2em
|
height: 1.2em
|
||||||
vertical-align: middle
|
vertical-align: middle
|
||||||
.icon,
|
svg path
|
||||||
.sync-spinner
|
fill: $white
|
||||||
|
.icon
|
||||||
margin-right: .5em
|
margin-right: .5em
|
||||||
|
.loading-indicator--white
|
||||||
|
margin-right: .5em
|
||||||
|
vertical-align: top
|
||||||
|
|
||||||
.profile-main
|
.profile-main
|
||||||
.sync-button
|
.sync-button
|
||||||
|
@ -41,6 +47,15 @@
|
||||||
.sync-last
|
.sync-last
|
||||||
display: inline-block
|
display: inline-block
|
||||||
margin: 0
|
margin: 0
|
||||||
font-size: 12px
|
font-size: 14px
|
||||||
color: #848384
|
color: #848384
|
||||||
text-align: right
|
text-align: right
|
||||||
|
|
||||||
|
pointer-events: none
|
||||||
|
transform: translateX(50%)
|
||||||
|
opacity: 0
|
||||||
|
transition: transform 200ms ease, opacity 100ms ease
|
||||||
|
|
||||||
|
.button:hover ~ &
|
||||||
|
transform: translateX(0)
|
||||||
|
opacity: 1
|
||||||
|
|
|
@ -24,6 +24,8 @@
|
||||||
|
|
||||||
.dashboard-filter
|
.dashboard-filter
|
||||||
padding: 0 $column-gutter/2
|
padding: 0 $column-gutter/2
|
||||||
|
font-size: 16px
|
||||||
|
font-weight: 300
|
||||||
@media #{$medium-up}
|
@media #{$medium-up}
|
||||||
padding: 0
|
padding: 0
|
||||||
|
|
||||||
|
|
|
@ -1,14 +1,19 @@
|
||||||
<div class="sync-button">
|
{{#if user.isSyncing }}
|
||||||
{{#if user.isSyncing }}
|
<button class="button is-syncing">
|
||||||
<button class="button is-syncing">
|
<span class="loading-indicator--white"><i></i><i></i><i></i></span>Syncing from GitHub
|
||||||
<span class="loading-indicator--white"><i></i><i></i><i></i></span>Syncing from GitHub
|
</button>
|
||||||
</button>
|
{{else}}
|
||||||
{{else}}
|
<button {{action 'sync'}} class="button">
|
||||||
<p class="sync-last">last synced {{format-time user.syncedAt}}</p>
|
<span class="icon">
|
||||||
<button {{action 'sync'}} class="button">
|
<svg x="0px" y="0px" viewBox="0 1 18 18" xml:space="preserve">
|
||||||
<span class="icon icon-sync"></span>Sync account
|
<g id="Trigger">
|
||||||
</button>
|
<path fill="#A7AEAE" d="M17.2,7.9C17,7.6,16.6,7.7,16.3,8l-1,1.2C14.9,6,12.2,3.6,9,3.6c-3.6,0-6.4,2.9-6.4,6.4s2.9,6.4,6.4,6.4
|
||||||
{{/if}}
|
c1.8,0,3.6-0.8,4.8-2.2c0.2-0.3,0.2-0.7-0.1-0.9c-0.3-0.2-0.7-0.2-0.9,0.1c-1,1.1-2.4,1.7-3.9,1.7c-2.8,0-5.1-2.3-5.1-5.1
|
||||||
</div>
|
S6.1,4.9,9,4.9c2.7,0,4.9,2.1,5.1,4.7l-1.7-1.1c-0.3-0.2-0.7-0.1-0.9,0.2s-0.1,0.7,0.2,0.9l2.8,1.8c0,0,0,0,0,0
|
||||||
|
c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1c0,0,0.1,0,0.1-0.1c0,0,0.1-0.1,0.1-0.1l2-2.4C17.6,8.5,17.5,8.1,17.2,7.9z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</span>Sync account
|
||||||
|
</button>
|
||||||
|
<p class="sync-last">last synced {{format-time user.syncedAt}}</p>
|
||||||
|
{{/if}}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user