CodeCow/sharedrop
1
0
Fork 0
mirror of https://github.com/szimek/sharedrop.git synced 2026-06-13 21:03:07 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

connecting indicator styles

Browse Source
This commit is contained in:
Maciej Jarczok 2014-05-03 21:59:35 +02:00
parent a5e33eff63
commit 8c718dcf1d
4 changed files with 50 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/scripts/app/templates/peer.hbs
View File

@ -27,17 +27,15 @@
<div class="user-info">
{{#if model.email}}<div class="user-email">{{model.email}}</div>{{/if}}
{{#if controller.hasCustomRoomName}}
<div class="user-id">
{{model.public_ip}}
</div>
{{/if}}
{{#if model.local_ip}}
<div class="user-id">
<div {{bind-attr class=":user-connection-status model.peer.state"}}></div>
<div class="user-ip">
<div {{bind-attr class=":user-connection-status model.peer.state"}}></div>
{{#if controller.hasCustomRoomName}}
<strong>{{model.public_ip}}</strong>
{{/if}}
{{#if model.local_ip}}
{{model.local_ip}}
</div>
{{/if}}
{{/if}}
</div>
</div>
{{view ShareDrop.App.FileField action="uploadFile" file=transfer.file}}

17
app/scripts/app/templates/user.hbs
View File

@ -3,20 +3,17 @@
</div>
<div class="user-info">
<div class="user-label">You</div>
<div class="user-ip">
{{#if controller.hasCustomRoomName}}
<strong>{{model.public_ip}}</strong>
{{/if}}
{{#if controller.hasCustomRoomName}}
<div class="user-id">
{{model.public_ip}}
</div>
{{/if}}
{{#if model.local_ip}}
<div class="user-id">
{{#if model.local_ip}}
{{#if view.hasManyLocalIps}}
{{view Ember.Select content=view.localIps value=model.local_ip}}
{{else}}
{{model.local_ip}}
{{/if}}
</div>
{{/if}}
{{/if}}
</div>
</div>

10
app/styles/layout/_media.sass
View File

@ -35,7 +35,7 @@
.user-info
z-index: 1
position: absolute
top: 35px
top: 30px
left: 0
padding-left: 170px
width: 100%
@ -43,10 +43,14 @@
font-size: 1.4rem
.user-label
font-size: 1.8rem
.user-id
margin-top: 4px
.user-ip
font-size: 1.2rem
color: #808080
.user-connection-status
top: 0
left: -9.2rem
margin-top: 0
+scale(1.75)
.popover
$bg_color: #f4f4f4
left: 100px !important

42
app/styles/modules/_users.sass
View File

@ -14,7 +14,7 @@ $user-size: 76px
position: relative
width: $user-size
height: $user-size
+transition(all .2s ease-in-out)
transition: all .2s ease-in-out
svg
top: 0
bottom: 0
@ -32,7 +32,7 @@ $user-size: 76px
height: $user-size - 10
border-radius: 50%
+animation(shadow .8s ease-in)
+transition(all .2s ease-in-out)
transition: all .2s ease-in-out
.user-info
position: absolute
@ -43,27 +43,35 @@ $user-size: 76px
.user-label, .user-email
font-weight: bold
color: #606060
padding-bottom: 4px
padding-bottom: .4rem
.user-email
font-size: 1rem
+ellipsis
.user-label
font-size: 1.4rem
.user-id
font-size: 1rem
color: #808080
.user-connection-status
.user-ip
position: relative
display: inline-block
width: 6px
height: 6px
vertical-align: middle
font-size: 1rem
line-height: 1.2em
color: #808080
> strong
display: block
.user-connection-status
position: absolute
left: -1rem
top: 50%
margin-top: -.3rem
width: .6rem
height: .6rem
border-radius: 50%
&.disconnected
display: none
&.connecting
background: rgba($blue,.5)
+animation(blink .75s infinite)
&.connected
background: rgba($green,.5)
background: rgba($green,.8)
select
+appearance(none)
@ -130,7 +138,6 @@ $user-size: 76px
border-color: rgba($blue,.8)
&::after
opacity: 0
transition: opacity .3s
position: absolute
pointer-events: none
top: 5px
@ -140,17 +147,24 @@ $user-size: 76px
color: white
font-size: 3rem
font-weight: bold
background: transparentize($green,.2)
background: rgba($green,.8)
border: 1px solid white
+transform(scaleX(-1) rotate(-45deg))
+circle($user-size - 10)
transition: opacity .3s
&.transfer-completed
&::after
opacity: 1
+keyframes(blink)
0%
opacity: 1
50%
opacity: 0
+keyframes(shadow)
0%
opacity: 0
50%
opacity: 1
box-shadow: rgba(0, 0, 0, 0.3) 0 0 15px
box-shadow: rgba(black, .3) 0 0 15px