documize/gui/app/templates/components/customize/space-labels.hbs

<div class="view-customize">
	{{ui/ui-button
		light=true
		color=constants.Color.Green
		icon=constants.Icon.Checkbox
		label=(localize 'add')
		onClick=(action "onShowAddModal")}}

	<Ui::UiSpacer @size="300" />

	<ul class="space-labels">
		{{#each labels as |label|}}
			<li class="label" style={{label.bgColor}}>
				<div class="grid-container-6-4">
					<div class="grid-cell-1 grid-cell-middle">
						{{label.name}}
					</div>
					<div class="grid-cell-2 grid-cell-right">
						{{#ui/ui-toolbar dark=false light=true raised=false large=false bordered=false}}
							{{ui/ui-toolbar-icon icon=constants.Icon.Edit color=constants.Color.Green tooltip=(localize 'update') onClick=(action "onShowUpdateModal" label)}}
							{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Red tooltip=(localize 'delete') onClick=(action "onShowDeleteModal" label)}}
						{{/ui/ui-toolbar}}
					</div>
				</div>
			</li>
		{{/each}}
	</ul>
</div>

<div id="add-label-modal" class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">{{localize 'label_add'}}</div>
			<div class="modal-body">
				<div class="form-group">
					<label for="add-label-name">{{localize 'name'}}</label>
					{{input type="text" id="add-label-name" class="form-control mousetrap" placeholder="" value=labelName}}
				</div>
				<div class="form-group">
					<label>{{localize 'color'}}</label>
					{{ui/label-color-picker onChange=(action "onSetColor")}}
				</div>
			</div>
			<div class="modal-footer">
				{{ui/ui-button color=constants.Color.Gray light=true label=(localize 'cancel') dismiss=true}}
				{{ui/ui-button-gap}}
				{{ui/ui-button color=constants.Color.Green light=true label=(localize 'add') onClick=(action "onAdd")}}
			</div>
		</div>
	</div>
</div>

<div id="edit-label-modal" class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">{{localize 'label_update'}}</div>
			<div class="modal-body">
				<div class="form-group">
					<label for="edit-label-name">{{localize 'name'}}</label>
					{{input type="text" id="edit-label-name" class="form-control mousetrap" placeholder="" value=labelName}}
				</div>
				<div class="form-group">
					<label>{{localize 'color'}}</label>
					{{ui/label-color-picker onChange=(action "onSetColor")}}
				</div>
			</div>
			<div class="modal-footer">
				{{ui/ui-button color=constants.Color.Gray light=true label=(localize 'cancel') dismiss=true}}
				{{ui/ui-button-gap}}
				{{ui/ui-button color=constants.Color.Green light=true label=(localize 'save') onClick=(action "onUpdate")}}
			</div>
		</div>
	</div>
</div>

{{#ui/ui-dialog title=(localize 'label_delete') confirmCaption=(localize 'delete') buttonColor=constants.Color.Red show=showDeleteDialog onAction=(action "onDelete")}}
	<p>{{localize 'label_delete_confirm' deleteLabel.name}}</p>
{{/ui/ui-dialog}}