style settings button
hover states for repo tool buttons style log buttons dont forget the small arrow iconå
This commit is contained in:
Lisa P
parent
1ba9548ad0
commit
c7212174fb
|
|
@ -4,20 +4,20 @@
|
|||
RepoShowToolsComponent = Ember.Component.extend
|
||||
popup: Ember.inject.service()
|
||||
|
||||
classNames: ['dropdown', 'dropdown--classic']
|
||||
classNames: ['settings-menu']
|
||||
classNameBindings: ['isOpen:display']
|
||||
isOpen: false
|
||||
|
||||
click: (event) ->
|
||||
if $(event.target).is('a') && $(event.target).parents('.dropdown-menu').length
|
||||
if $(event.target).is('a') && $(event.target).parents('.settings-dropdown').length
|
||||
@closeMenu()
|
||||
|
||||
closeMenu: ->
|
||||
$('.menu').removeClass('display')
|
||||
@toggleProperty('isOpen')
|
||||
|
||||
actions:
|
||||
menu: ->
|
||||
@get('popup').close()
|
||||
$('.menu.display').toggleClass('display')
|
||||
return false
|
||||
@toggleProperty('isOpen')
|
||||
|
||||
hasPermission: (->
|
||||
if permissions = @get('currentUser.permissions')
|
||||
|
|
|
|||
|
|
@ -38,4 +38,53 @@
|
|||
display: flex
|
||||
flex-flow: row-reverse wrap
|
||||
justify-content: space-between
|
||||
border-bottom: 2px $cream-dark
|
||||
border-bottom: 2px #f1f1f1 solid
|
||||
|
||||
|
||||
$dropdown-button-height: 30px
|
||||
$dropdown-button-margin: -9px
|
||||
|
||||
.settings-button
|
||||
display: block
|
||||
height: $dropdown-button-height
|
||||
padding: 0 2.5em
|
||||
margin-top: $dropdown-button-margin
|
||||
background:
|
||||
color: white
|
||||
border: 1px solid #f1f1f1
|
||||
color: $grey-light
|
||||
border-radius: 2px
|
||||
text-align: center
|
||||
line-height: 2
|
||||
font-size: 14px
|
||||
&:hover,
|
||||
&:active
|
||||
background-color: #f1f1f1
|
||||
|
||||
.settings-dropdown
|
||||
display: none
|
||||
position: absolute
|
||||
top: $dropdown-button-height + ($dropdown-button-margin * .8)
|
||||
width: 100%
|
||||
padding: 0
|
||||
margin: 1px 0 0
|
||||
list-style: none
|
||||
z-index: 60
|
||||
background-color: #f1f1f1
|
||||
a
|
||||
display: block
|
||||
padding: 0.5em 1em
|
||||
font-size: 14px
|
||||
color: $grey-light
|
||||
&:hover
|
||||
background-color: $grey
|
||||
color: white
|
||||
|
||||
.settings-menu
|
||||
position: relative
|
||||
&.display
|
||||
.settings-button
|
||||
background-color: #f1f1f1
|
||||
.settings-dropdown
|
||||
display: block
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,16 @@
|
|||
|
||||
.tail-label
|
||||
display: none
|
||||
padding: 0.1em 0.5em 0.1em 1.5em
|
||||
cursor: pointer
|
||||
background:
|
||||
color: $grey-light
|
||||
repeat: no-repeat
|
||||
size: auto 10px
|
||||
position: 5px 5px
|
||||
border-radius: 2px
|
||||
color: #f1f1f1
|
||||
@extend %icon-arrow-down
|
||||
|
||||
&:hover
|
||||
.tail-label
|
||||
|
|
@ -35,14 +44,14 @@
|
|||
height: 20px;
|
||||
width: 20px;
|
||||
vertical-align: middle
|
||||
background-color: #696867;
|
||||
background-color: $grey-light
|
||||
border-radius: 50%;
|
||||
&:after
|
||||
content: ""
|
||||
display: block
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: #F2F2F2;
|
||||
background: #f1f1f1;
|
||||
border-radius: 50%;
|
||||
@extend %absolute-center
|
||||
|
||||
|
|
@ -62,16 +71,6 @@
|
|||
color: #999
|
||||
background: inline-image('ui/workers-close.svg') no-repeat right 6px
|
||||
|
||||
.icon
|
||||
width: 1.3em
|
||||
height: 1.1em
|
||||
margin-right: 6px
|
||||
vertical-align: middle
|
||||
.icon--down
|
||||
width: 0.7em
|
||||
height: 0.9em
|
||||
margin-right: 4px
|
||||
|
||||
.log-header
|
||||
height: 44px
|
||||
margin: 0
|
||||
|
|
|
|||
|
|
@ -148,7 +148,6 @@ $button-border-color: #d4d4d4
|
|||
|
||||
// new stuff
|
||||
|
||||
|
||||
%circle-button
|
||||
display: block
|
||||
text-indent: 999%
|
||||
|
|
@ -180,6 +179,8 @@ $button-border-color: #d4d4d4
|
|||
background:
|
||||
repeat: no-repeat
|
||||
size: auto 100%
|
||||
&:hover
|
||||
@extend %icon-line-cross-white
|
||||
|
||||
.button-circle-trigger
|
||||
@extend %circle-button
|
||||
|
|
@ -188,3 +189,35 @@ $button-border-color: #d4d4d4
|
|||
position: 2px 1px
|
||||
repeat: no-repeat
|
||||
size: 24px 24px
|
||||
&:hover
|
||||
@extend %icon-line-trigger-white
|
||||
|
||||
|
||||
%log-button
|
||||
display: inline-block
|
||||
height: 28px
|
||||
padding: 0 1.1em 0 2.3em
|
||||
border: 1px solid #f1f1f1
|
||||
color: #f1f1f1
|
||||
border-radius: 2px
|
||||
text-align: center
|
||||
line-height: 1.9
|
||||
font-size: 14px
|
||||
font-weight: 300
|
||||
background:
|
||||
repeat: no-repeat
|
||||
size: auto 14px
|
||||
position: 7px 6px
|
||||
&:hover,
|
||||
&:active
|
||||
background-color: hotpink
|
||||
|
||||
// log buttons
|
||||
.remove-log-button
|
||||
@extend %log-button
|
||||
@extend %icon-remove-log
|
||||
|
||||
.download-log-button
|
||||
@extend %log-button
|
||||
@extend %icon-download-log
|
||||
|
||||
|
|
|
|||
|
|
@ -85,50 +85,3 @@ $dropdown-border: #C3D9DB
|
|||
|
||||
&.is-open
|
||||
display: block
|
||||
|
||||
|
||||
|
||||
.dropdown
|
||||
position: relative
|
||||
.dropdown--classic
|
||||
width: 10.7rem
|
||||
|
||||
.dropdown-button
|
||||
height: 28px
|
||||
background-color: $grey-lighter
|
||||
border: none
|
||||
color: $white
|
||||
line-height: 1
|
||||
font-size: $font-size-normal
|
||||
&:hover,
|
||||
&:focus
|
||||
background-color: #8b9595
|
||||
.icon-cog-light
|
||||
position: relative
|
||||
top: 0.15em
|
||||
left: -0.2em
|
||||
.icon-arrow-down
|
||||
border-top-color: $white
|
||||
|
||||
@media #{$medium-up}
|
||||
float: right
|
||||
|
||||
.dropdown-menu
|
||||
@include resetul
|
||||
@extend %border-bottom-4px
|
||||
position: absolute
|
||||
top: 29px // height of the button +1
|
||||
width: 100%
|
||||
z-index: 70
|
||||
overflow: hidden
|
||||
background-color: $grey-lighter
|
||||
display: none
|
||||
a
|
||||
@extend %inline-block
|
||||
width: 100%
|
||||
padding: .4em 2em
|
||||
color: $white
|
||||
&:hover
|
||||
background-color: darken($grey-lighter, 10)
|
||||
&.display
|
||||
display: block
|
||||
|
|
|
|||
|
|
@ -79,11 +79,11 @@
|
|||
.icon--trigger
|
||||
background-image: inline-image('icons/sync-account-icon.svg')
|
||||
|
||||
.icon--downloadLog
|
||||
%icon-download-log
|
||||
background-image: inline-image('icons/download-log-icon.svg')
|
||||
.icon--removeLog
|
||||
%icon-remove-log
|
||||
background-image: inline-image('icons/remove-log-icon.svg')
|
||||
.icon--down
|
||||
%icon-arrow-down
|
||||
background-image: inline-image('icons/end-of-log-icon.svg')
|
||||
|
||||
.icon--env
|
||||
|
|
@ -180,10 +180,13 @@
|
|||
@extend %icon-line-commit
|
||||
|
||||
%icon-line-cross
|
||||
background-image: inline-image('line-icons/icon-failed.svg')
|
||||
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#A7AEAE" d="M10.9 10l3.9-3.9c.2-.2.2-.6 0-.9-.2-.2-.6-.2-.9 0L10 9.1 6.1 5.2c-.2-.2-.6-.2-.9 0-.2.2-.2.6 0 .9L9.1 10l-3.9 3.9c-.2.2-.2.6 0 .9.1.1.3.2.4.2s.3-.1.4-.2l3.9-3.9 3.9 3.9c.1.1.3.2.4.2.2 0 .3-.1.4-.2.2-.2.2-.6 0-.9L10.9 10z"/></svg>')
|
||||
%icon-line-cross-white
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#FFFFFF" d="M10.9 10l3.9-3.9c.2-.2.2-.6 0-.9-.2-.2-.6-.2-.9 0L10 9.1 6.1 5.2c-.2-.2-.6-.2-.9 0-.2.2-.2.6 0 .9L9.1 10l-3.9 3.9c-.2.2-.2.6 0 .9.1.1.3.2.4.2s.3-.1.4-.2l3.9-3.9 3.9 3.9c.1.1.3.2.4.2.2 0 .3-.1.4-.2.2-.2.2-.6 0-.9L10.9 10z"/></svg>')
|
||||
%icon-line-trigger
|
||||
background-image: inline-image('line-icons/icon-trigger.svg')
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#A7AEAE" d="M17.2 7.9c-.2-.3-.6-.2-.9.1l-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.4c1.8 0 3.6-.8 4.8-2.2.2-.3.2-.7-.1-.9-.3-.2-.7-.2-.9.1-1 1.1-2.4 1.7-3.9 1.7-2.8 0-5.1-2.3-5.1-5.1S6.1 4.9 9 4.9c2.7 0 4.9 2.1 5.1 4.7l-1.7-1.1c-.3-.2-.7-.1-.9.2s-.1.7.2.9l2.8 1.8c.1.1.2.1.3.1.1 0 .2 0 .3-.1 0 0 .1 0 .1-.1l.1-.1 2-2.4c.3-.3.2-.7-.1-.9z"/></svg>')
|
||||
%icon-line-trigger-white
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#FFFFFF" d="M17.2 7.9c-.2-.3-.6-.2-.9.1l-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.4c1.8 0 3.6-.8 4.8-2.2.2-.3.2-.7-.1-.9-.3-.2-.7-.2-.9.1-1 1.1-2.4 1.7-3.9 1.7-2.8 0-5.1-2.3-5.1-5.1S6.1 4.9 9 4.9c2.7 0 4.9 2.1 5.1 4.7l-1.7-1.1c-.3-.2-.7-.1-.9.2s-.1.7.2.9l2.8 1.8c.1.1.2.1.3.1.1 0 .2 0 .3-.1 0 0 .1 0 .1-.1l.1-.1 2-2.4c.3-.3.2-.7-.1-.9z"/></svg>')
|
||||
|
||||
%icon-github-circle
|
||||
background-image: inline-image('icons/github.svg')
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
content: ""
|
||||
position: absolute
|
||||
left: 0
|
||||
bottom: -3px
|
||||
bottom: -2px
|
||||
width: 100%
|
||||
height: 2px
|
||||
background-color: $teal
|
||||
|
|
|
|||
|
|
@ -31,15 +31,15 @@
|
|||
<div class="{{if job.notStarted 'hidden'}}">
|
||||
<menu class="log-header">
|
||||
{{#if canRemoveLog}}
|
||||
<a href="#" class="button button--grey open-popup" {{action "removeLogPopup"}}><span class="icon icon--removeLog"></span> Remove Log</a>
|
||||
<a class="remove-log-button open-popup" {{action "removeLogPopup"}}>Remove log</a>
|
||||
{{/if}}
|
||||
<a class="button button--grey" href={{plainTextLogUrl}}><span class="icon icon--downloadLog"></span> Download Log</a>
|
||||
<a class="download-log-button" href={{plainTextLogUrl}}>Download log</a>
|
||||
</menu>
|
||||
<div class="log-body">
|
||||
{{#if showTailing}}
|
||||
<a href="#" id="tail" class="log-tail" {{action "toggleTailing"}}>
|
||||
<span class="tail-status"></span>
|
||||
<span class="tail-label button button--grey"><span class="icon icon--down"></span>
|
||||
<span class="tail-label">
|
||||
{{#if job.isFinished}}
|
||||
Scroll to End of Log
|
||||
{{else}}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<a href="#" {{action "menu"}} class="menu-popup-button dropdown-button btn" type="" title="open settings menu">
|
||||
<span class="icon icon-cog-light"></span> Settings <span class="icon icon-arrow-down"></span></a>
|
||||
<ul class="dropdown-menu menu">
|
||||
<a href="#" {{action "menu"}} class="settings-button" type="" title="open settings menu">Settings</a>
|
||||
<ul class="settings-dropdown">
|
||||
{{#if displaySettingsLink}}
|
||||
<li>
|
||||
{{#link-to "settings" repo}}Settings{{/link-to}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user