Closes #317: edit tag color hex code manually

This commit is contained in:
bgamard 2020-02-15 22:38:06 +01:00
parent bd09312418
commit 4233f4dd88
4 changed files with 28 additions and 17 deletions

View File

@ -562,7 +562,7 @@
"email": "Must be a valid e-mail", "email": "Must be a valid e-mail",
"password_confirm": "Password and password confirmation must match", "password_confirm": "Password and password confirmation must match",
"number": "Number required", "number": "Number required",
"no_space": "Spaces are not allowed" "no_space": "Spaces and colons are not allowed"
}, },
"action_type": { "action_type": {
"ADD_TAG": "Add a tag", "ADD_TAG": "Add a tag",

View File

@ -1,14 +1,18 @@
<div class="modal-header"> <div class="modal-header">
<h3>{{ 'tag.new_tag' | translate }}</h3> <h3>{{ 'tag.new_tag' | translate }}</h3>
</div> </div>
<form name="tagForm" novalidate> <form name="tagForm" class="form-inline text-center" novalidate>
<div class="modal-body"> <div class="modal-body">
<p class="input-group" ng-class="{ 'has-error': !tagForm.name.$valid && tagForm.$dirty }"> <div class="input-group" ng-class="{ 'has-error': !tagForm.color.$valid && tagForm.$dirty }">
<span colorpicker class="input-group-addon btn btn-default" data-color="#3a87ad" ng-model="tag.color" ng-style="{ 'background': tag.color }">&nbsp;</span> <span colorpicker class="input-group-addon btn btn-default" data-color="#3a87ad" ng-model="tag.color" ng-style="{ 'background': tag.color }">&nbsp;</span>
<input type="text" name="name" ng-attr-placeholder="{{ 'tag.new_tag' | translate }}" class="form-control" <input type="text" name="color" class="form-control" ng-maxlength="7" ng-model="tag.color" ng-show="hexaField">
ng-maxlength="36" required ng-model="tag.name" ui-validate="{ space: '!$value || $value.indexOf(\' \') == -1' }"> <button class="btn btn-default" ng-click="hexaField = true" ng-show="!hexaField"><span class="fas fa-microchip"></span></button>
</p> </div>
<span class="text-danger" ng-show="tagForm.name.$error.space && tagForm.$dirty">{{ 'validation.no_space' | translate }}</span> <div class="form-group" ng-class="{ 'has-error': !tagForm.name.$valid && tagForm.$dirty }">
<input type="text" name="name" ng-attr-placeholder="{{ 'tag.new_tag' | translate }}" class="form-control"
ng-maxlength="36" required ng-model="tag.name" ui-validate="{ space: '!$value || $value.indexOf(\' \') == -1 && $value.indexOf(\':\') == -1' }">
</div>
<p class="text-danger" ng-show="tagForm.name.$error.space && tagForm.$dirty">{{ 'validation.no_space' | translate }}</p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button ng-click="close(tag)" ng-disabled="!tagForm.$valid" class="btn btn-primary"> <button ng-click="close(tag)" ng-disabled="!tagForm.$valid" class="btn btn-primary">

View File

@ -13,16 +13,19 @@
<div class="col-sm-6"> <div class="col-sm-6">
<input type="text" name="name" class="form-control" id="inputName" <input type="text" name="name" class="form-control" id="inputName"
ng-maxlength="36" required ng-model="tag.name" ui-validate="{ space: '!$value || $value.indexOf(\' \') == -1' }"> ng-maxlength="36" required ng-model="tag.name" ui-validate="{ space: '!$value || $value.indexOf(\' \') == -1 && $value.indexOf(\':\') == -1' }">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group" ng-class="{ 'has-error': !editTagForm.color.$valid, success: editTagForm.color.$valid }">
<label class="col-sm-2 control-label" for="inputColor">{{ 'tag.edit.color' | translate }}</label> <label class="col-sm-2 control-label" for="inputColor">{{ 'tag.edit.color' | translate }}</label>
<div class="col-sm-2"> <div class="col-sm-2">
<span colorpicker class="btn" data-color="" id="inputColor" <div class="input-group" id="inputColor" ng-class="{ 'has-error': !editTagForm.color.$valid && tagForm.$dirty }">
ng-model="tag.color" ng-style="{ 'background': tag.color }">&nbsp;</span> <span colorpicker class="input-group-addon btn btn-default" data-color="#3a87ad" ng-model="tag.color" ng-style="{ 'background': tag.color }">&nbsp;</span>
<button class="btn btn-default" ng-click="hexaField = true" ng-show="!hexaField"><span class="fas fa-microchip"></span></button>
<input type="text" name="color" class="form-control" ng-maxlength="7" ng-model="tag.color" ng-show="hexaField">
</div>
</div> </div>
</div> </div>

View File

@ -13,13 +13,17 @@
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
<div class="well well-3d"> <div class="well well-3d">
<form name="tagForm" novalidate> <form class="form-inline text-center" name="tagForm" novalidate>
<p class="input-group" ng-class="{ 'has-error': !tagForm.name.$valid && tagForm.$dirty }"> <div class="input-group" ng-class="{ 'has-error': !tagForm.color.$valid && tagForm.$dirty }">
<span colorpicker class="input-group-addon btn btn-default" data-color="#3a87ad" ng-model="tag.color" ng-style="{ 'background': tag.color }">&nbsp;</span> <span colorpicker class="input-group-addon btn btn-default" data-color="#3a87ad" ng-model="tag.color" ng-style="{ 'background': tag.color }">&nbsp;</span>
<input type="text" name="color" class="form-control" ng-maxlength="7" ng-model="tag.color" ng-show="hexaField">
<button class="btn btn-default" ng-click="hexaField = true" ng-show="!hexaField"><span class="fas fa-microchip"></span></button>
</div>
<div class="form-group" ng-class="{ 'has-error': !tagForm.name.$valid && tagForm.$dirty }">
<input type="text" name="name" ng-attr-placeholder="{{ 'tag.new_tag' | translate }}" class="form-control" <input type="text" name="name" ng-attr-placeholder="{{ 'tag.new_tag' | translate }}" class="form-control"
ng-maxlength="36" required ng-model="tag.name" ui-validate="{ space: '!$value || $value.indexOf(\' \') == -1' }"> ng-maxlength="36" required ng-model="tag.name" ui-validate="{ space: '!$value || $value.indexOf(\' \') == -1 && $value.indexOf(\':\') == -1' }">
<span class="input-group-addon btn btn-primary" ng-disabled="!tagForm.$valid" ng-click="addTag()">{{ 'add' | translate }}</span> </div>
</p> <span class="btn btn-primary" ng-disabled="!tagForm.$valid" ng-click="addTag()">{{ 'add' | translate }}</span>
<span class="text-danger" ng-show="tagForm.name.$error.space && tagForm.$dirty">{{ 'validation.no_space' | translate }}</span> <span class="text-danger" ng-show="tagForm.name.$error.space && tagForm.$dirty">{{ 'validation.no_space' | translate }}</span>
</form> </form>