luxolus
/
open-vault
2
0
Fork 0
Code Issues 1 Pull Requests Releases Activity

Add new styles for file upload

This commit is contained in:
Joshua Ogle 2018-07-06 16:42:09 -06:00
parent 4ea53bbdbd
commit a090e75555
14 changed files with 61 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/app/components/i-con.js
View File

@ -13,6 +13,7 @@ const GLYPHS_WITH_SVG_TAG = [
'information-reversed',
'true',
'false',
'upload'
];
export default Ember.Component.extend({

9
ui/app/styles/components/box-label.scss
View File

@ -8,6 +8,7 @@ label.box-label {
@extend .is-gapless;
border-color: $grey-light;
border-radius: 3px;
box-shadow: $box-link-shadow, $box-shadow-middle;
text-decoration: none;
transition: box-shadow $speed;
width: 100%;
@ -52,3 +53,11 @@ label.box-label {
box-shadow: inset 0 0 0 0.15rem $white;
}
}
.box-label-header {
color: $grey;
.is-selected & {
color: $text;
}
}

4
ui/app/styles/components/info-table-row.scss
View File

@ -46,6 +46,10 @@
min-height: 35px;
}
}
.icon {
margin-right: 0.25rem;
}
}
.info-table-row-header {

3
ui/app/styles/core/buttons.scss
View File

@ -1,9 +1,10 @@
$button-box-shadow-standard: 0 3px 1px 0 rgba($black, 0.12);
.button {
background-color: $grey-lightest;
border: 1px solid $grey-light;
box-shadow: $box-shadow-low;
color: $grey-dark;
color: $ui-gray-800;
display: inline-block;
font-size: $size-small;
font-weight: $font-weight-bold;

24
ui/app/styles/core/forms.scss
View File

@ -260,18 +260,32 @@ label {
}
}
.file-icon,
.file-label {
color: $grey-dark;
overflow: visible;
}
.file-input {
visibility: hidden;
}
.file-cta {
background: $white-bis;
position: relative;
min-width: auto;
.icon:first-child:last-child {
display: inline-block;
margin-right: 0.1rem;
vertical-align: middle;
}
}
.file-name {
@extend .input;
}
.file-delete-button {
@extend .button;
@extend .is-transparent;
color: $grey;
position: absolute;
right: 5px;
right: 8px;
}

1
ui/app/styles/utils/_bulma_variables.scss
View File

@ -77,6 +77,7 @@ $menu-item-hover-background-color: $grey-lightest;
$menu-item-active-color: $link;
$menu-item-active-background-color: transparent;
$box-link-shadow: 0 0 0 1px $grey-light;
$box-link-hover-shadow: 0 0 0 1px $grey-light;
// animations

1
ui/app/styles/utils/_colors.scss
View File

@ -20,6 +20,7 @@ $ui-gray-100: #EBEEF2;
$ui-gray-300: #BAC1CC;
$ui-gray-500: #6a7786;
$ui-gray-700: #525761;
$ui-gray-800: #373A42;
$ui-gray-900: #1F2124;
$grey-lightest: $ui-gray-050;
$grey-light: $ui-gray-300;

2
ui/app/templates/components/identity/item-aliases.hbs
View File

@ -1,5 +1,5 @@
{{#each (if model.alias.id (array model.alias) model.aliases) as |item|}}
{{#linked-block
{{#linked-block
"vault.cluster.access.identity.aliases.show"
item.id
"details"

2
ui/app/templates/components/status-menu.hbs
View File

@ -4,7 +4,7 @@
<div class="status-menu-user-trigger">
{{i-con
glyph=glyphName
class="has-text-dark-grey auto-width"
class="has-text-grey auto-width"
size=18
aria-label=ariaLabel
}}

31
ui/app/templates/components/text-file.hbs
View File

@ -41,26 +41,25 @@
</p>
{{else}}
<div class="control is-expanded">
<div class="file">
<label class="file-label is-fullwidth">
<div class="file has-name is-fullwidth">
<label class="file-label">
<input class="file-input" type="file" onchange={{action "pickedFile"}} data-test-text-file-input=true>
<span class="file-cta is-fullwidth">
<span class="file-icon has-text-grey-dark">
{{i-con glyph="document" size=16}}
</span>
<span class="file-label has-text-grey-dark" data-test-text-file-input-label=true>
{{#if file.fileName}}
{{file.fileName}}
{{else}}
Choose a file&hellip;
{{/if}}
</span>
<span class="file-cta button">
{{i-con glyph="upload" class="has-light-grey-text" size=16}}
Choose a file…
</span>
<span class="file-name has-text-grey-dark" data-test-text-file-input-label=true>
{{#if file.fileName}}
<button type="button" class="file-delete-button" {{action 'clearFile'}} data-test-text-clear=true>
{{i-con glyph="close" size=16}}
</button>
{{file.fileName}}
{{else}}
No file chosen
{{/if}}
</span>
{{#if file.fileName}}
<button type="button" class="file-delete-button" {{action 'clearFile'}} data-test-text-clear=true>
{{i-con glyph="close-circled-border" size=16}}
</button>
{{/if}}
</label>
</div>
</div>

4
ui/app/templates/partials/replication/enable.hbs
View File

@ -97,11 +97,11 @@
{{/if}}
</h3>
{{#if (not version.hasPerfReplication)}}
<p class="help is-mediu-dark">
<p class="help has-text-grey-dark">
Performance Replication is a feature of {{#upgrade-link pageName="Performance Replication"}}Vault Enterprise Premium{{/upgrade-link}}
</p>
{{else}}
<p class="help -dark">
<p class="help has-text-grey-dark">
Performance replication scales workloads horizontally across clusters to make requests faster. Local secondaries handle read requests but forward writes to the primary to be handled.
</p>
{{/if}}

1
ui/app/templates/svg/icons/close-circled-border.hbs Normal file
View File

@ -0,0 +1 @@
<path d="M224.704 255.168L132.8 163.776l32.032-30.976 90.848 91.424 91.456-91.424 31.52 30.464-91.776 92.416 91.52 92.128-30.72 29.696-91.488-90.976-91.136 91.744-32.256-31.2 91.904-91.84v-.064zM256 512C114.615 512 0 397.385 0 256S114.615 0 256 0s256 114.615 256 256-114.615 256-256 256zm0-34.144c122.528 0 221.856-99.328 221.856-221.856 0-122.528-99.328-221.856-221.856-221.856-122.528 0-221.856 99.328-221.856 221.856 0 122.528 99.328 221.856 221.856 221.856z" fill-rule="nonzero"/>

3
ui/app/templates/svg/icons/upload.hbs Normal file
View File

@ -0,0 +1,3 @@
<svg width="{{size}}" height="{{size}}" viewBox="0 0 16 16">
<path d="M8.75 4.568v6.718h-1.5V4.568L4.464 7.354l-1.06-1.061L8 1.697l4.596 4.596-1.06 1.06L8.75 4.569zm3 8.602v-1.92h1.5v3.42H2.75v-3.42h1.5v1.92h7.5z" fill-rule="nonzero"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 245 B

2
ui/app/templates/vault/cluster/secrets/backends.hbs
View File

@ -13,7 +13,7 @@
</PageHeader>
{{#each supportedBackends as |backend|}}
{{#linked-block
{{#linked-block
"vault.cluster.secrets.backend.list-root"
backend.id
class="box is-sideless is-marginless has-pointer"