status-im
/
consul
mirror of https://github.com/status-im/consul.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

UI: Use buttons instead of anchors where appropriate (#4939) 

Use buttons instead of anchors where appropriate
This commit is contained in:
John Cowen 2018-11-19 14:57:22 +00:00 committed by John Cowen
parent 3780622df0
commit 9ec7f3851b
9 changed files with 69 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui-v2/app/styles/components/action-group/layout.scss
View File

@ -1,6 +1,14 @@
%action-group label span { %action-group label span {
display: none; display: none;
} }
%action-group-action {
width: 170px;
padding: 10px 10px;
text-align: left;
}
%action-group li > * {
@extend %action-group-action;
}
%action-group::before { %action-group::before {
margin-left: -1px; margin-left: -1px;
} }
@ -59,10 +67,6 @@
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
%action-group li a {
width: 170px;
padding: 10px 10px;
}
%action-group input[type='radio'], %action-group input[type='radio'],
%action-group input[type='radio'] ~ ul, %action-group input[type='radio'] ~ ul,
%action-group input[type='radio'] ~ .with-confirmation > ul { %action-group input[type='radio'] ~ .with-confirmation > ul {

8
ui-v2/app/styles/components/action-group/skin.scss
View File

@ -5,7 +5,8 @@
/* frame-gray */ /* frame-gray */
background-color: $gray-050; background-color: $gray-050;
} }
%action-group label { %action-group label,
%action-group-action {
cursor: pointer; cursor: pointer;
} }
%action-group label::after, %action-group label::after,
@ -26,7 +27,10 @@
%action-group ul::before { %action-group ul::before {
border-color: $color-action; border-color: $color-action;
} }
%action-group li a:hover { %action-group-action {
background-color: $white;
}
%action-group-action:hover {
@extend %frame-blue-800; @extend %frame-blue-800;
} }
%action-group ul, %action-group ul,

5
ui-v2/app/styles/components/buttons.scss
View File

@ -3,12 +3,13 @@ button[type='submit'],
a.type-create { a.type-create {
@extend %primary-button; @extend %primary-button;
} }
// the :not(li)'s here avoid styling action-group buttons
button[type='reset'], button[type='reset'],
button[type='button']:not(.copy-btn):not(.type-delete), :not(li) > button[type='button']:not(.copy-btn):not(.type-delete),
html.template-error div > a { html.template-error div > a {
@extend %secondary-button; @extend %secondary-button;
} }
button.type-delete { :not(li) > button.type-delete {
@extend %dangerous-button; @extend %dangerous-button;
} }
button.copy-btn { button.copy-btn {

3
ui-v2/app/styles/core/typography.scss
View File

@ -52,7 +52,7 @@ caption {
} }
th, th,
%breadcrumbs a, %breadcrumbs a,
%action-group a, %action-group-action,
%tab-nav, %tab-nav,
%tooltip-bubble { %tooltip-bubble {
font-weight: $typo-weight-medium; font-weight: $typo-weight-medium;
@ -80,6 +80,7 @@ h2,
font-size: $typo-size-500; font-size: $typo-size-500;
} }
body, body,
%action-group-action,
pre code, pre code,
input, input,
textarea, textarea,

42
ui-v2/app/templates/dc/acls/index.hbs
View File

@ -43,28 +43,28 @@
{{#block-slot 'action' as |confirm|}} {{#block-slot 'action' as |confirm|}}
{{#action-group index=index onchange=(action change) checked=(if (eq checked index) 'checked')}} {{#action-group index=index onchange=(action change) checked=(if (eq checked index) 'checked')}}
<ul> <ul>
<li> <li>
<a data-test-edit href={{href-to 'dc.acls.edit' item.ID}}>Edit</a> <a data-test-edit href={{href-to 'dc.acls.edit' item.ID}}>Edit</a>
</li> </li>
{{#if (eq item.ID token.SecretID) }} {{#if (eq item.ID token.SecretID) }}
<li> <li>
<a data-test-logout onclick={{queue (action confirm 'logout' item) (action change)}}>Stop using</a> <button type="button" data-test-logout {{action confirm 'logout' item}}>Stop using</button>
</li> </li>
{{else}} {{else}}
<li> <li>
<a data-test-use onclick={{queue (action confirm 'use' item) (action change)}}>Use</a> <button type="button" data-test-use {{action confirm 'use' item}}>Use</button>
</li> </li>
{{/if}} {{/if}}
<li> <li>
<a data-test-clone onclick={{action 'sendClone' item}}>Clone</a> <button type="button" data-test-clone {{action 'sendClone' item}}>Clone</button>
</li> </li>
{{# if (not-eq item.ID 'anonymous') }} {{# if (not-eq item.ID 'anonymous') }}
<li> <li>
<a data-test-delete onclick={{action confirm 'delete' item}}>Delete</a> <button type="button" class="type-delete" data-test-delete {{action confirm 'delete' item}}>Delete</button>
</li> </li>
{{/if}} {{/if}}
</ul> </ul>
{{/action-group}} {{/action-group}}
{{/block-slot}} {{/block-slot}}
{{#block-slot 'dialog' as |execute cancel message name|}} {{#block-slot 'dialog' as |execute cancel message name|}}

2
ui-v2/app/templates/dc/acls/policies/index.hbs
View File

@ -61,7 +61,7 @@
<a data-test-edit href={{href-to 'dc.acls.policies.edit' item.ID}}>Edit</a> <a data-test-edit href={{href-to 'dc.acls.policies.edit' item.ID}}>Edit</a>
</li> </li>
<li> <li>
<a data-test-delete onclick={{action confirm 'delete' item}}>Delete</a> <button type="button" class="type-delete" data-test-delete {{action confirm 'delete' item}}>Delete</button>
</li> </li>
{{/if}} {{/if}}
</ul> </ul>

48
ui-v2/app/templates/dc/acls/tokens/index.hbs
View File

@ -26,7 +26,7 @@
</form> </form>
{{/if}} {{/if}}
{{#if (token/is-legacy items)}} {{#if (token/is-legacy items)}}
<p data-test-notification-update class="notice info"><strong>Update.</strong> We have upgraded our ACL System to allow the creation of reusable policies that can be applied to tokens. Read more about the changes and how to upgrade legacy tokens in our <a href="{{env 'CONSUL_DOCUMENTATION_URL'}}/guides/acl-migrate-tokens.html" target="_blank" rel="noopener noreferrer">documentation</a>.</p> <p data-test-notification-update class="notice info"><strong>Update.</strong> We have upgraded our ACL System to allow the creation of reusable policies that can be applied to tokens. Read more about the changes and how to upgrade legacy tokens in our <a href="{{env 'CONSUL_DOCUMENTATION_URL'}}/guide/acl-migrate-tokens.html" target="_blank" rel="noopener noreferrer">documentation</a>.</p>
{{/if}} {{/if}}
{{#changeable-set dispatcher=searchable}} {{#changeable-set dispatcher=searchable}}
{{#block-slot 'set' as |filtered|}} {{#block-slot 'set' as |filtered|}}
@ -68,32 +68,33 @@
{{#block-slot 'action' as |confirm|}} {{#block-slot 'action' as |confirm|}}
{{#action-group index=index onchange=(action change) checked=(if (eq checked index) 'checked')}} {{#action-group index=index onchange=(action change) checked=(if (eq checked index) 'checked')}}
<ul> <ul>
{{#if false}} {{#if false}}
<li> <li>
{{#copy-button-feedback title="Copy AccessorID to the clipboard" copy=item.AccessorID name="AccessorID"}}Copy AccessorID{{/copy-button-feedback}} {{#copy-button-feedback title="Copy AccessorID to the clipboard" copy=item.AccessorID name="AccessorID"}}Copy AccessorID{{/copy-button-feedback}}
</li> </li>
{{/if}} {{/if}}
<li> <li>
<a data-test-edit href={{href-to 'dc.acls.tokens.edit' item.AccessorID}}>Edit</a> <a data-test-edit href={{href-to 'dc.acls.tokens.edit' item.AccessorID}}>Edit</a>
</li> </li>
{{#if (not (token/is-legacy item))}} {{#if (not (token/is-legacy item))}}
<li> <li>
<a data-test-clone onclick={{action 'sendClone' item}}>Duplicate</a> <button type="button" data-test-clone {{action 'sendClone' item}}>Duplicate</button>
</li> </li>
{{/if}} {{/if}}
{{#if (eq item.AccessorID token.AccessorID) }} {{#if (eq item.AccessorID token.AccessorID) }}
<li> <li>
<a data-test-logout onclick={{queue (action confirm 'logout' item) (action change)}}>Stop using</a> <button type="button" data-test-logout {{action confirm 'logout' item}}>Stop using</button>
</li> </li>
{{else}} {{else}}
<li>
<a data-test-use onclick={{queue (action confirm 'use' item) (action change)}}>Use</a> <li>
</li> <button type="button" data-test-use {{action confirm 'use' item}}>Use</button>
</li>
{{/if}} {{/if}}
{{#unless (or (token/is-anonymous item) (eq item.AccessorID token.AccessorID)) }} {{#unless (token/is-anonymous item) }}
<li> <li>
<a data-test-delete onclick={{action confirm 'delete' item}}>Delete</a> <button type="button" class="type-delete" data-test-delete {{action confirm 'delete' item}}>Delete</button>
</li> </li>
{{/unless}} {{/unless}}
</ul> </ul>
{{/action-group}} {{/action-group}}
@ -102,6 +103,9 @@
<p> <p>
{{#if (eq name 'delete')}} {{#if (eq name 'delete')}}
{{message}} {{message}}
{{#if (eq item.AccessorID token.AccessorID)}}
Warning: This is the token you are currently using!
{{/if}}
{{else if (eq name 'logout')}} {{else if (eq name 'logout')}}
Are you sure you want to stop using this ACL token? This will log you out. Are you sure you want to stop using this ACL token? This will log you out.
{{else if (eq name 'use')}} {{else if (eq name 'use')}}

2
ui-v2/app/templates/dc/intentions/index.hbs
View File

@ -63,7 +63,7 @@
<a href={{href-to 'dc.intentions.edit' item.ID}}>Edit</a> <a href={{href-to 'dc.intentions.edit' item.ID}}>Edit</a>
</li> </li>
<li> <li>
<a data-test-delete onclick={{action confirm 'delete' item}}>Delete</a> <button type="button" class="type-delete" data-test-delete {{action confirm 'delete' item}}>Delete</button>
</li> </li>
</ul> </ul>
{{/action-group}} {{/action-group}}

2
ui-v2/app/templates/dc/kv/index.hbs
View File

@ -59,7 +59,7 @@
<a data-test-edit href={{href-to (if item.isFolder 'dc.kv.folder' 'dc.kv.edit') item.Key}}>{{if item.isFolder 'View' 'Edit'}}</a> <a data-test-edit href={{href-to (if item.isFolder 'dc.kv.folder' 'dc.kv.edit') item.Key}}>{{if item.isFolder 'View' 'Edit'}}</a>
</li> </li>
<li> <li>
<a data-test-delete onclick={{action confirm 'delete' item}}>Delete</a> <button type="button" class="type-delete" data-test-delete {{action confirm 'delete' item}}>Delete</button>
</li> </li>
</ul> </ul>
{{/action-group}} {{/action-group}}