div(v-cloak="")
messages(v-bind:messages="messages")
div.columns.is-multiline
div.column.is-12
a.button.is-primary(v-on:click="createLabel()") New label
div.column.is-12(v-if="newLabel")
div.box
div.columns.is-multiline
div.column.is-12
div.tags.has-addons.mb0
span.tag.is-medium(v-bind:style="{ \
color: newLabel.text_color, \
backgroundColor: newLabel.background_color \
}") {{ newLabel.text }}
span.tag.is-medium
kbd {{ shortcutKey(newLabel) | simpleShortcut }}
div.column
div.field
label.label Label name
div.control
input.input(
type="text"
placeholder="Text input"
v-model="newLabel.text"
)
div.column
div.field
label.label Shortcut
div.field.has-addons
p.control
span.select
select(v-model="newLabel.prefix_key")
option(value="")
option(value="ctrl") Ctrl
option(value="shift") Shift
option(value="ctrl shift") Ctrl + Shift
div.control
div.select
select(v-model="newLabel.suffix_key")
option(disabled="", value="") key
option(v-for="ch in shortKeys", v-bind:key="ch") {{ ch }}
div.column
div.field
label.label Color
div.field.has-addons
div.control
div.form__field
div.form__input
swatches(
v-model="newLabel.background_color"
colors="basic"
show-fallback=true
popover-to=""
v-bind:trigger-style="{ width: '36px', height: '36px' }"
)
div.control
a.button.random-color-button(
v-on:click="setColor(newLabel)"
)
span.icon.is-small
i.fas.fa-sync-alt
div.column
div.field
label.label
div.field.is-grouped
p.control
a.button.is-light(v-on:click="cancelCreate()") Cancel
p.control
a.button.is-primary(v-on:click="addLabel()") Create label
div.card
header.card-header
p.card-header-title {{ labels.length }} labels
a.card-header-icon(href="#", aria-label="more options")
span.icon
i.fas.fa-angle-down(aria-hidden="true")
div.card-content
div.mb10(v-for="label in labels", v-bind:key="label.id")
div.level.is-mobile.mb0
div.level-left
div.level-item
p.subtitle.is-5
div.tags.has-addons.mb0
span.tag.is-medium(v-bind:style="{ \
color: label.text_color, \
backgroundColor: label.background_color \
}") {{ label.text }}
span.tag.is-medium
kbd {{ shortcutKey(label) | simpleShortcut }}
div.level-right
p.level-item
div.field.is-grouped
p.control
a.button.is-text(v-on:click="editLabel(label)")
span.icon.is-small
i.fas.fa-pencil-alt
span Edit
p.control
a.button.is-text(v-on:click="removeLabel(label)")
span.icon.is-small
i.fas.fa-trash
span Delete
div.columns(v-show="label === editedLabel")
div.column
div.field
label.label Label name
div.control
input.input(
type="text"
placeholder="Text input"
v-model="label.text"
)
div.column
div.field
label.label Shortcut
div.field.has-addons
p.control
span.select
select(v-model="label.prefix_key")
option(value="")
option(value="ctrl") Ctrl
option(value="shift") Shift
option(value="ctrl shift") Ctrl + Shift
div.control
div.select
select(v-model="label.suffix_key")
option(disabled="", value="") key
option(v-for="ch in shortKeys", v-bind:key="ch") {{ ch }}
div.column
div.field
label.label Color
div.field.has-addons
div.control
div.form__field
div.form__input
swatches(
v-model="label.background_color"
colors="basic"
show-fallback=true
popover-to=""
v-bind:trigger-style="{ width: '36px', height: '36px' }"
)
div.control
a.button.random-color-button(
v-on:click="setEditColor"
)
span.icon.is-small
i.fas.fa-sync-alt
div.column
div.field
label.label
div.field.is-grouped
p.control
a.button.is-light(v-on:click="cancelEdit(label)") Cancel
p.control
a.button.is-primary(v-on:click="doneEdit(label)") Save changes