Skip to content

Commit

Permalink
Align create buttons styling (#11352)
Browse files Browse the repository at this point in the history 
* Added button for cancelling dictionary create action

* Use hideMenu

* Align dictionary create with the other creates

* Align import documenttype

* Align for data type folder create

* Align document type create buttons

* Forgot small ng-show

* Align create media folder buttons

* Align create macro buttons

* Align create relation buttons

* Align create partial view macro folder buttons

* Align partial view folder create buttons

* Align create scripts folder buttons

* Align create scripts folder buttons

* Use primary instead of success
  • Loading branch information
@patrickdemooij9
patrickdemooij9 authored Oct 12, 2021
1 parent 93720c9 commit 03b2aed
Show file tree
Hide file tree
Showing 15 changed files with 618 additions and 485 deletions.
100 changes: 56 additions & 44 deletions src/Umbraco.Web.UI.Client/src/views/datatypes/create.html
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,66 @@
<div ng-controller="Umbraco.Editors.DataType.CreateController">
<div class="umbracoDialog umb-dialog-body with-footer" ng-cloak>

<div class="umb-pane" ng-show="!model.creatingFolder">
<h5><localize key="create_createUnder">Create an item under</localize> {{currentNode.name}}</h5>
<div ng-show="!model.creatingFolder">
<div class="umbracoDialog umb-dialog-body with-footer" ng-cloak>
<div class="umb-pane">
<h5><localize key="create_createUnder">Create an item under</localize> {{currentNode.name}}</h5>

<ul class="umb-actions umb-actions-child">
<li data-element="action-data-type" class="umb-action">
<button type="button" class="umb-action-link umb-outline btn-reset" ng-click="createDataType()" umb-auto-focus>
<umb-icon icon="icon-autofill" class="icon large"></umb-icon>
<span class="menu-label">
<localize key="create_newDataType">New data type</localize>
</span>
</button>
</li>
<li data-element="action-folder" class="umb-action">
<button type="button" class="umb-action-link umb-outline btn-reset" ng-click="showCreateFolder()">
<umb-icon icon="icon-folder" class="icon large"></umb-icon>
<span class="menu-label">
<localize key="create_newFolder">New folder</localize>...
</span>
</button>
</li>
</ul>
</div>

<div class="umb-pane" ng-show="model.creatingFolder">
<form novalidate name="createFolderForm"
ng-submit="createContainer()"
val-form-manager>

<umb-control-group label="Enter a folder name" hide-label="false">
<input
type="text"
name="folderName"
ng-model="model.folderName"
class="umb-textstring textstring input-block-level"
focus-when="{{model.creatingFolder}}"
required />
</umb-control-group>
<ul class="umb-actions umb-actions-child">
<li data-element="action-data-type" class="umb-action">
<button type="button" class="umb-action-link umb-outline btn-reset" ng-click="createDataType()" umb-auto-focus>
<umb-icon icon="icon-autofill" class="icon large"></umb-icon>
<span class="menu-label">
<localize key="create_newDataType">New data type</localize>
</span>
</button>
</li>
<li data-element="action-folder" class="umb-action">
<button type="button" class="umb-action-link umb-outline btn-reset" ng-click="showCreateFolder()">
<umb-icon icon="icon-folder" class="icon large"></umb-icon>
<span class="menu-label">
<localize key="create_newFolder">New folder</localize>...
</span>
</button>
</li>
</ul>
</div>

<button type="submit" class="btn btn-primary"><localize key="general_create">Create</localize></button>
</form>
</div>

<div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
<button type="button" class="btn btn-info" ng-click="close()">
<localize key="buttons_somethingElse">Do something else</localize>
</button>
</div>
</div>

<div class="umb-dialog-footer btn-toolbar umb-btn-toolbar" ng-if="!model.creatingFolder">
<button type="button" class="btn btn-info" ng-click="close()">
<localize key="buttons_somethingElse">Do something else</localize>
</button>
<div ng-show="model.creatingFolder">
<form novalidate name="createFolderForm"
ng-submit="createContainer()"
val-form-manager>
<div class="umbracoDialog umb-dialog-body with-footer" ng-cloak>
<div class="umb-pane" ng-show="model.creatingFolder">
<umb-control-group label="Enter a folder name" hide-label="false">
<input type="text"
name="folderName"
ng-model="model.folderName"
class="umb-textstring textstring input-block-level"
focus-when="{{model.creatingFolder}}"
required />
</umb-control-group>
</div>
</div>
<div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
<umb-button type="button"
button-style="link"
action="close()"
label-key="general_close">
</umb-button>
<umb-button type="submit"
button-style="primary"
label-key="general_create">
</umb-button>
</div>
</form>
</div>

</div>
46 changes: 28 additions & 18 deletions src/Umbraco.Web.UI.Client/src/views/dictionary/create.html
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,31 @@
<div class="umbracoDialog umb-dialog-body with-footer" ng-controller="Umbraco.Editors.Dictionary.CreateController as vm">

<div class="umb-pane">
<h5 tabindex="0"><localize key="create_createUnder">Create an item under</localize> {{currentNode.name}}</h5>
</div>

<div class="umb-pane">
<form novalidate name="createDictionaryForm"
ng-submit="vm.createItem()"
val-form-manager>
<div class="umbracoDialog" ng-controller="Umbraco.Editors.Dictionary.CreateController as vm">

<umb-control-group label="@general_name" hide-label="false" alias="itemKey">
<input type="text" name="itemKey" id="itemKey" ng-model="vm.itemKey" class="umb-textstring textstring input-block-level"
umb-auto-focus required
maxlength="1000"/>
</umb-control-group>
<form novalidate name="createDictionaryForm"
ng-submit="vm.createItem()"
val-form-manager>
<div class="umb-dialog-body with-footer">
<div class="umb-pane">
<h5 tabindex="0"><localize key="create_createUnder">Create an item under</localize> {{currentNode.name}}</h5>
</div>

<button type="submit" class="btn btn-primary"><localize key="general_create">Create</localize></button>
</form>
</div>
<div class="umb-pane">
<umb-control-group label="@general_name" hide-label="false" alias="itemKey">
<input type="text" name="itemKey" id="itemKey" ng-model="vm.itemKey" class="umb-textstring textstring input-block-level"
umb-auto-focus required
maxlength="1000" />
</umb-control-group>
</div>
</div>
<div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
<umb-button type="button"
button-style="link"
action="vm.close()"
label-key="general_close">
</umb-button>
<umb-button type="submit"
button-style="primary"
label-key="general_create">
</umb-button>
</div>
</form>
</div>
6 changes: 6 additions & 0 deletions src/Umbraco.Web.UI.Client/src/views/dictionary/dictionary.create.controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,13 @@ function DictionaryCreateController($scope, $location, dictionaryResource, navig

vm.itemKey = "";
vm.createItem = createItem;
vm.close = close;
$scope.$emit("$changeTitle", "");

function close() {
navigationService.hideDialog();
}

function createItem() {

if (formHelper.submitForm({ scope: $scope, formCtrl: $scope.createDictionaryForm })) {
Expand Down
76 changes: 46 additions & 30 deletions src/Umbraco.Web.UI.Client/src/views/documenttypes/create.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<div ng-controller="Umbraco.Editors.DocumentTypes.CreateController">
<div class="umbracoDialog umb-dialog-body with-footer" ng-cloak>
<div class="umb-pane" ng-show="!model.creatingFolder">
<h5><localize key="create_createUnder">Create an item under</localize> {{currentNode.name}}</h5>

<div ng-show="!model.creatingFolder" ng-cloak>
<div class="umbracoDialog umb-dialog-body with-footer">
<div class="umb-pane">
<h5><localize key="create_createUnder">Create an item under</localize> {{currentNode.name}}</h5>

<ul class="umb-actions umb-actions-child">
<li data-element="action-documentType" class="umb-action" ng-hide="model.disableTemplates">
Expand Down Expand Up @@ -54,38 +56,52 @@ <h5><localize key="create_createUnder">Create an item under</localize> {{current
</ul>
</div>

<div class="umb-pane" ng-show="model.creatingFolder">
<form novalidate name="createFolderForm"
ng-submit="createContainer()"
val-form-manager>

<div ng-show="error">
<div class="alert alert-error">
<div><strong>{{error.errorMsg}}</strong></div>
<div>{{error.data.message}}</div>
</div>
</div>

</div>

<umb-control-group label="Enter a folder name" hide-label="false">
<input
type="text"
name="folderName"
maxlength="255"
ng-model="model.folderName"
class="umb-textstring textstring input-block-level"
focus-when="{{model.creatingFolder}}"
required />
</umb-control-group>
<div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
<button type="button" class="btn btn-info" ng-click="close(true)">
<localize key="buttons_somethingElse">Do something else</localize>
</button>

<button type="submit" class="btn btn-primary"><localize key="general_create">Create</localize></button>
</form>
</div>
</div>

<div class="umb-dialog-footer btn-toolbar umb-btn-toolbar" ng-if="!model.creatingFolder">
<button type="button" class="btn btn-info" ng-click="close(true)">
<localize key="buttons_somethingElse">Do something else</localize>
</button>
<div ng-show="model.creatingFolder" ng-cloak>
<form novalidate name="createFolderForm"
ng-submit="createContainer()"
val-form-manager>
<div class="umbracoDialog umb-dialog-body with-footer">
<div class="umb-pane">
<div ng-show="error">
<div class="alert alert-error">
<div><strong>{{error.errorMsg}}</strong></div>
<div>{{error.data.message}}</div>
</div>
</div>

<umb-control-group label="Enter a folder name" hide-label="false">
<input type="text"
name="folderName"
maxlength="255"
ng-model="model.folderName"
class="umb-textstring textstring input-block-level"
focus-when="{{model.creatingFolder}}"
required />
</umb-control-group>
</div>
</div>
<div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
<umb-button type="button"
button-style="link"
action="close(true)"
label-key="general_close">
</umb-button>
<umb-button type="submit"
button-style="primary"
label-key="general_create">
</umb-button>
</div>
</form>
</div>
</div>
10 changes: 7 additions & 3 deletions src/Umbraco.Web.UI.Client/src/views/documenttypes/import.controller.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
angular.module("umbraco")
.controller("Umbraco.Editors.DocumentTypes.ImportController",
function ($scope, contentTypeResource, navigationService, Upload, umbRequestHelper) {
function ($scope, contentTypeResource, navigationService, Upload, umbRequestHelper) {
var vm = this;
vm.serverErrorMessage = "";
vm.state = "upload";
vm.model = {};
vm.uploadStatus = "";

vm.cancelButtonLabel = "cancel";

$scope.handleFiles = function (files, event) {
if (files && files.length > 0) {
$scope.upload(files[0]);
Expand Down Expand Up @@ -67,10 +69,12 @@ angular.module("umbraco")
$scope.import = function () {
contentTypeResource.import(vm.model.tempFileName);
vm.state = "done";

vm.cancelButtonLabel = "general_close";
}

$scope.close = function() {
$scope.close = function () {
navigationService.hideDialog();
};

});
Loading

0 comments on commit 03b2aed

Please sign in to comment.