fixes: U4-11120 Create new Language dashboard to create/remove/set default languages - angular
This commit is contained in:
Mads Rasmussen
@@ -125,6 +125,12 @@ Use this directive to render an umbraco button. The directive can be used to gen
|
||||
|
||||
});
|
||||
|
||||
scope.clickButton = function(event) {
|
||||
if(scope.action) {
|
||||
scope.action({$event: event});
|
||||
}
|
||||
};
|
||||
|
||||
scope.$on('$destroy', function() {
|
||||
unbindStateWatcher();
|
||||
});
|
||||
|
||||
@@ -88,6 +88,7 @@
|
||||
@import "components/application/umb-language-picker.less";
|
||||
|
||||
@import "components/html/umb-expansion-panel.less";
|
||||
@import "components/html/umb-alert.less";
|
||||
|
||||
@import "components/editor.less";
|
||||
@import "components/overlays.less";
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
.umb-alert {
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
background-color: @turquoise-washed;
|
||||
border: 1px solid @turquoise;
|
||||
}
|
||||
|
||||
.umb-alert--info {
|
||||
background-color: @turquoise-washed;
|
||||
border: 1px solid @turquoise;
|
||||
}
|
||||
@@ -7,6 +7,7 @@
|
||||
|
||||
.umb-box-header {
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid @gray-9;
|
||||
}
|
||||
|
||||
.umb-box-header-title {
|
||||
@@ -24,5 +25,4 @@
|
||||
|
||||
.umb-box-content {
|
||||
padding: 20px;
|
||||
border-top: 1px solid @gray-9;
|
||||
}
|
||||
@@ -48,7 +48,7 @@
|
||||
}
|
||||
50% {
|
||||
transform: scale(1);
|
||||
background: white;
|
||||
background: transparent;
|
||||
}
|
||||
100% {
|
||||
transform: scale(0.5);
|
||||
|
||||
@@ -4,6 +4,10 @@
|
||||
padding: 7px 0;
|
||||
}
|
||||
|
||||
.umb-permission--disabled {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.umb-permission:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
@@ -13,22 +13,20 @@ table {
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
table thead {
|
||||
background-color: @gray-10;
|
||||
}
|
||||
|
||||
|
||||
// BASELINE STYLES
|
||||
// ---------------
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
margin-bottom: @baseLineHeight;
|
||||
border: 1px solid @gray-8;
|
||||
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16);
|
||||
background: @tableBackground;
|
||||
border-radius: @baseBorderRadius;
|
||||
font-size: 14px;
|
||||
// Cells
|
||||
th,
|
||||
td {
|
||||
padding: 10px 8px;
|
||||
padding: 10px 20px;
|
||||
line-height: @baseLineHeight;
|
||||
text-align: left;
|
||||
border-top: 1px solid @tableBorder;
|
||||
@@ -38,6 +36,9 @@ table thead {
|
||||
}
|
||||
// Bottom align for column headings
|
||||
thead th {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
color: @gray-3;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
// Remove top border from thead by default
|
||||
|
||||
@@ -154,10 +154,10 @@
|
||||
|
||||
// Tables
|
||||
// -------------------------
|
||||
@tableBackground: transparent; // overall background-color
|
||||
@tableBackground: @white; // overall background-color
|
||||
@tableBackgroundAccent: @gray-10; // for striping
|
||||
@tableBackgroundHover: @gray-10; // for hover
|
||||
@tableBorder: @gray-8; // table and cell border
|
||||
@tableBorder: @gray-9; // table and cell border
|
||||
|
||||
// Buttons
|
||||
// -------------------------
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
<div ng-if="state !== 'init'" class="umb-button__overlay"></div>
|
||||
|
||||
<a ng-if="type === 'link'" href="{{href}}" class="btn umb-button__button {{style}} umb-button--{{size}}" ng-click="action(model)" hotkey="{{shortcut}}" hotkey-when-hidden="{{shortcutWhenHidden}}">
|
||||
<a ng-if="type === 'link'" href="{{href}}" class="btn umb-button__button {{style}} umb-button--{{size}}" ng-click="clickButton($event)" hotkey="{{shortcut}}" hotkey-when-hidden="{{shortcutWhenHidden}}">
|
||||
<span class="umb-button__content" ng-class="{'-hidden': state !== 'init'}">
|
||||
<i ng-if="icon" class="{{icon}} umb-button__icon"></i>
|
||||
<localize ng-if="labelKey" key="{{labelKey}}">{{label}}</localize>
|
||||
@@ -16,7 +16,7 @@
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<button ng-if="type === 'button'" type="button" class="btn umb-button__button {{style}} umb-button--{{size}}" ng-click="action(model)" hotkey="{{shortcut}}" hotkey-when-hidden="{{shortcutWhenHidden}}" ng-disabled="disabled">
|
||||
<button ng-if="type === 'button'" type="button" class="btn umb-button__button {{style}} umb-button--{{size}}" ng-click="clickButton($event)" hotkey="{{shortcut}}" hotkey-when-hidden="{{shortcutWhenHidden}}" ng-disabled="disabled">
|
||||
<span class="umb-button__content" ng-class="{'-hidden': state !== 'init'}">
|
||||
<i ng-if="icon" class="{{icon}} umb-button__icon"></i>
|
||||
<localize ng-if="labelKey" key="{{labelKey}}">{{label}}</localize>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
<div class="flex items-center" style="height: 100%;">
|
||||
|
||||
<div ng-if="showBackButton && splitViewOpen !== true" style="margin-right: 15px;">
|
||||
<div ng-if="showBackButton === 'true' && splitViewOpen !== true" style="margin-right: 15px;">
|
||||
<a class="umb-editor-header__back" href="#" ng-click="goBack()" prevent-default>
|
||||
<i class="fa fa-arrow-left" aria-hidden="true"></i>
|
||||
</a>
|
||||
|
||||
122
src/Umbraco.Web.UI.Client/src/views/languages/edit.controller.js
Normal file
122
src/Umbraco.Web.UI.Client/src/views/languages/edit.controller.js
Normal file
@@ -0,0 +1,122 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function LanguagesEditController($timeout, $location, $routeParams, notificationsService, localizationService) {
|
||||
|
||||
var vm = this;
|
||||
|
||||
vm.page = {};
|
||||
vm.language = {};
|
||||
vm.availableLanguages = [];
|
||||
vm.breadcrumbs = [];
|
||||
vm.labels = {};
|
||||
vm.initIsDefault = false;
|
||||
vm.showDefaultLanguageInfo = false;
|
||||
|
||||
vm.save = save;
|
||||
vm.back = back;
|
||||
vm.goToPage = goToPage;
|
||||
vm.toggleMandatory = toggleMandatory;
|
||||
vm.toggleDefault = toggleDefault;
|
||||
|
||||
function init() {
|
||||
|
||||
// localize labels
|
||||
var labelKeys = [
|
||||
"treeHeaders_languages",
|
||||
"languages_mandatoryLanguage",
|
||||
"languages_mandatoryLanguageHelp",
|
||||
"languages_defaultLanguage",
|
||||
"languages_defaultLanguageHelp"
|
||||
];
|
||||
|
||||
localizationService.localizeMany(labelKeys).then(function (values) {
|
||||
vm.labels.languages = values[0];
|
||||
vm.labels.mandatoryLanguage = values[1];
|
||||
vm.labels.mandatoryLanguageHelp = values[2];
|
||||
vm.labels.defaultLanguage = values[3];
|
||||
vm.labels.defaultLanguageHelp = values[4];
|
||||
});
|
||||
|
||||
if($routeParams.create) {
|
||||
vm.page.name = "Add language";
|
||||
} else {
|
||||
vm.loading = true;
|
||||
|
||||
// fake loading the language
|
||||
$timeout(function () {
|
||||
vm.language = {
|
||||
"name": "English (United States)",
|
||||
"culture": "en-US",
|
||||
"isDefault": false,
|
||||
"isMandatory": false
|
||||
};
|
||||
vm.page.name = vm.language.name;
|
||||
|
||||
/* we need to store the initial default state so we can disabel the toggle if it is the default.
|
||||
we need to prevent from not having a default language. */
|
||||
vm.initIsDefault = angular.copy(vm.language.isDefault);
|
||||
|
||||
vm.loading = false;
|
||||
makeBreadcrumbs();
|
||||
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
function save() {
|
||||
vm.page.saveButtonState = "busy";
|
||||
// fake saving the language
|
||||
$timeout(function(){
|
||||
vm.page.saveButtonState = "success";
|
||||
notificationsService.success(localizationService.localize("speechBubbles_languageSaved"));
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function back() {
|
||||
$location.path("settings/languages/overview");
|
||||
}
|
||||
|
||||
function goToPage(ancestor) {
|
||||
$location.path(ancestor.path);
|
||||
}
|
||||
|
||||
function toggleMandatory() {
|
||||
if(!vm.language.isDefault) {
|
||||
vm.language.isMandatory = !vm.language.isMandatory;
|
||||
}
|
||||
}
|
||||
|
||||
function toggleDefault() {
|
||||
|
||||
// it shouldn't be possible to uncheck the default language
|
||||
if(vm.initIsDefault) {
|
||||
return;
|
||||
}
|
||||
|
||||
vm.language.isDefault = !vm.language.isDefault;
|
||||
if(vm.language.isDefault) {
|
||||
vm.language.isMandatory = true;
|
||||
vm.showDefaultLanguageInfo = true;
|
||||
}
|
||||
}
|
||||
|
||||
function makeBreadcrumbs() {
|
||||
vm.breadcrumbs = [
|
||||
{
|
||||
"name": vm.labels.languages,
|
||||
"path": "/settings/languages/overview"
|
||||
},
|
||||
{
|
||||
"name": vm.language.name
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
}
|
||||
|
||||
angular.module("umbraco").controller("Umbraco.Editors.Languages.EditController", LanguagesEditController);
|
||||
|
||||
})();
|
||||
96
src/Umbraco.Web.UI.Client/src/views/languages/edit.html
Normal file
96
src/Umbraco.Web.UI.Client/src/views/languages/edit.html
Normal file
@@ -0,0 +1,96 @@
|
||||
<div data-element="editor-languages" ng-controller="Umbraco.Editors.Languages.EditController as vm" class="clearfix">
|
||||
|
||||
<form name="editLanguageForm" no-validate val-form-manager>
|
||||
|
||||
<umb-editor-view>
|
||||
|
||||
<umb-editor-header
|
||||
name="vm.page.name"
|
||||
name-locked="true"
|
||||
on-back="vm.back()"
|
||||
show-back-button="true"
|
||||
hide-icon="true"
|
||||
hide-description="true"
|
||||
hide-alias="true">
|
||||
</umb-editor-header>
|
||||
|
||||
<umb-editor-container>
|
||||
|
||||
<umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
|
||||
|
||||
<umb-box ng-if="!vm.loading" class="block-form">
|
||||
<umb-box-content>
|
||||
|
||||
<umb-control-group label="@general_language">
|
||||
<select
|
||||
class="input-block-level"
|
||||
ng-model="vm.newLanguage.culture"
|
||||
ng-options="key as value for (key, value) in vm.availableCultures">
|
||||
</select>
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group label="@general_settings">
|
||||
|
||||
<div class="umb-permission" ng-click="vm.toggleDefault()" ng-class="{'umb-permission--disabled': vm.initIsDefault}">
|
||||
<umb-toggle
|
||||
class="umb-permission__toggle"
|
||||
checked="vm.language.isDefault">
|
||||
</umb-toggle>
|
||||
<div class="umb-permission__content" >
|
||||
<div>{{vm.labels.defaultLanguage}}</div>
|
||||
<div class="umb-permission__description">{{vm.labels.defaultLanguageHelp}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-permission" ng-click="vm.toggleMandatory()" ng-class="{'umb-permission--disabled': vm.language.isDefault}">
|
||||
<umb-toggle
|
||||
class="umb-permission__toggle"
|
||||
checked="vm.language.isMandatory">
|
||||
</umb-toggle>
|
||||
<div class="umb-permission__content">
|
||||
<div>{{vm.labels.mandatoryLanguage}}</div>
|
||||
<div class="umb-permission__description">{{vm.labels.mandatoryLanguageHelp}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-alert umb-alert--info" style="margin-top: 20px;" ng-if="vm.showDefaultLanguageInfo">
|
||||
<localize key="languages_changingDefaultLanguageWarning"></localize>
|
||||
</div>
|
||||
|
||||
</umb-control-group>
|
||||
|
||||
</umb-box-content>
|
||||
</umb-box>
|
||||
|
||||
</umb-editor-container>
|
||||
|
||||
<umb-editor-footer>
|
||||
|
||||
<umb-editor-footer-content-left>
|
||||
<umb-breadcrumbs
|
||||
ancestors="vm.breadcrumbs"
|
||||
allow-on-open="true"
|
||||
on-open="vm.goToPage(ancestor)">
|
||||
</umb-breadcrumbs>
|
||||
</umb-editor-footer-content-left>
|
||||
|
||||
<umb-editor-footer-content-right>
|
||||
<umb-button
|
||||
type="button"
|
||||
action="vm.save()"
|
||||
state="vm.page.saveButtonState"
|
||||
button-style="success"
|
||||
shortcut="ctrl+s"
|
||||
label="Save"
|
||||
label-key="buttons_save"
|
||||
disabled="vm.loading">
|
||||
</umb-button>
|
||||
</umb-editor-footer-content-right>
|
||||
|
||||
</umb-editor-footer>
|
||||
|
||||
</umb-editor-view>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,113 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function LanguagesOverviewController($timeout, $location, notificationsService, localizationService) {
|
||||
|
||||
var vm = this;
|
||||
|
||||
vm.page = {};
|
||||
vm.languages = [];
|
||||
vm.labels = {};
|
||||
|
||||
vm.addLanguage = addLanguage;
|
||||
vm.editLanguage = editLanguage;
|
||||
vm.deleteLanguage = deleteLanguage;
|
||||
|
||||
function init() {
|
||||
|
||||
vm.loading = true;
|
||||
|
||||
// localize labels
|
||||
var labelKeys = [
|
||||
"treeHeaders_languages",
|
||||
"general_mandatory",
|
||||
"general_default",
|
||||
];
|
||||
|
||||
localizationService.localizeMany(labelKeys).then(function (values) {
|
||||
vm.labels.languages = values[0];
|
||||
vm.labels.mandatory = values[1];
|
||||
vm.labels.general = values[2];
|
||||
// set page name
|
||||
vm.page.name = vm.labels.languages;
|
||||
});
|
||||
|
||||
$timeout(function () {
|
||||
|
||||
vm.languages = [
|
||||
{
|
||||
"id": 1,
|
||||
"cultureDisplayName": "English (United States)",
|
||||
"culture": "en-US",
|
||||
"isDefault": true,
|
||||
"isMandatory": true
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"cultureDisplayName": "Danish",
|
||||
"culture": "da-DK",
|
||||
"isDefault": false,
|
||||
"isMandatory": true
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"cultureDisplayName": "Spanish (Spain)",
|
||||
"culture": "es-ES",
|
||||
"isDefault": false,
|
||||
"isMandatory": false
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"cultureDisplayName": "French (France)",
|
||||
"culture": "fr-FR",
|
||||
"isDefault": false,
|
||||
"isMandatory": false
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"cultureDisplayName": "German (Germany)",
|
||||
"culture": "de-DE",
|
||||
"isDefault": false,
|
||||
"isMandatory": true
|
||||
}
|
||||
];
|
||||
|
||||
vm.loading = false;
|
||||
|
||||
}, 1000);
|
||||
|
||||
/*
|
||||
$timeout(function () {
|
||||
navigationService.syncTree({ tree: "languages", path: "-1" });
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
function addLanguage() {
|
||||
$location.search('create', null);
|
||||
$location.path("/settings/languages/edit/-1").search("create", "true");
|
||||
}
|
||||
|
||||
function editLanguage(language) {
|
||||
$location.search('create', null);
|
||||
$location.path("/settings/languages/edit/" + language.id);
|
||||
}
|
||||
|
||||
function deleteLanguage(language, event) {
|
||||
confirm("Are you sure you want to delete " + language.cultureDisplayName + "?");
|
||||
language.deleteButtonState = "busy";
|
||||
$timeout(function(){
|
||||
var index = vm.languages.indexOf(language);
|
||||
vm.languages.splice(index, 1);
|
||||
}, 1000);
|
||||
event.preventDefault()
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
}
|
||||
|
||||
angular.module("umbraco").controller("Umbraco.Editors.Languages.OverviewController", LanguagesOverviewController);
|
||||
|
||||
})();
|
||||
58
src/Umbraco.Web.UI.Client/src/views/languages/overview.html
Normal file
58
src/Umbraco.Web.UI.Client/src/views/languages/overview.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<div data-element="editor-languages" ng-controller="Umbraco.Editors.Languages.OverviewController as vm" class="clearfix">
|
||||
|
||||
<umb-editor-view footer="false">
|
||||
|
||||
<umb-editor-header
|
||||
name="vm.page.name"
|
||||
name-locked="true"
|
||||
hide-icon="true"
|
||||
hide-description="true"
|
||||
hide-alias="true">
|
||||
</umb-editor-header>
|
||||
|
||||
<umb-editor-container>
|
||||
|
||||
<umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
|
||||
|
||||
<umb-editor-sub-header>
|
||||
|
||||
<umb-editor-sub-header-content-left>
|
||||
<umb-button
|
||||
button-style="success"
|
||||
type="button"
|
||||
action="vm.addLanguage()"
|
||||
label-key="languages_addLanguage">
|
||||
</umb-button>
|
||||
</umb-editor-sub-header-content-left>
|
||||
|
||||
</umb-editor-sub-header>
|
||||
|
||||
<table class="table table-hover" ng-if="!vm.loading">
|
||||
<tbody>
|
||||
<tr ng-repeat="language in vm.languages" ng-click="vm.editLanguage(language)" style="cursor: pointer;">
|
||||
<td>
|
||||
<i class="icon-globe" style="color: #BBBABF; margin-right: 5px;"></i>
|
||||
<span class="bold">{{ language.cultureDisplayName }}</span>
|
||||
<span ng-if="language.isDefault">- {{vm.labels.general}}</span>
|
||||
</td>
|
||||
<td><span ng-if="language.isMandatory">{{vm.labels.mandatory}}</span></td>
|
||||
<td style="text-align: right;">
|
||||
<umb-button
|
||||
ng-if="!language.isDefault"
|
||||
type="button"
|
||||
size="xxs"
|
||||
button-style="danger"
|
||||
state="language.deleteButtonState"
|
||||
action="vm.deleteLanguage(language, $event)"
|
||||
label-key="general_delete">
|
||||
</umb-button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</umb-editor-container>
|
||||
|
||||
</umb-editor-view>
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user