yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init edit role editor

Browse Source
This commit is contained in:
Mads Rasmussen
2017-05-18 15:25:05 +02:00
parent fbed82219d
commit aeabca87d7
7 changed files with 331 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/Umbraco.Web.UI.Client/src/common/directives/components/users/umbuserpreview.directive.js Normal file
View File

@@ -0,0 +1,29 @@
(function () {
'use strict';
function UserPreviewDirective() {
function link(scope, el, attr, ctrl) {
}
var directive = {
restrict: 'E',
replace: true,
templateUrl: 'views/components/users/umb-user-preview.html',
scope: {
avatar: "=?",
name: "=",
allowRemove: "=?",
onRemove: "&?"
},
link: link
};
return directive;
}
angular.module('umbraco.directives').directive('umbUserPreview', UserPreviewDirective);
})();

28
src/Umbraco.Web.UI.Client/src/common/resources/users.resource.js
View File

@@ -243,7 +243,33 @@
"name": "Admin",
"alias": "admin",
"id": 1,
"icon": "icon-medal"
"icon": "icon-medal",
"users": [
{
"id": "1",
"name": "Angela Stone",
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/jina/128.jpg",
"state": "active"
},
{
"id": "1",
"name": "Beverly Silva",
"avatar": "",
"state": "disabled"
},
{
"id": "1",
"name": "Ruth Turner",
"avatar": "",
"state": "pending"
},
{
"id": "1",
"name": "Arthur Welch",
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/ashleyford/128.jpg",
"state": "active"
}
]
};
deferred.resolve(user);
return deferred.promise;

1
src/Umbraco.Web.UI.Client/src/less/belle.less
View File

@@ -135,6 +135,7 @@
@import "components/users/umb-users.less";
@import "components/users/umb-user-role-picker-list.less";
@import "components/users/umb-user-role-preview.less";
@import "components/users/umb-user-preview.less";
@import "components/users/umb-user.less";
// Utilities

52
src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-preview.less Normal file
View File

@@ -0,0 +1,52 @@
.umb-user-preview {
padding-top: 10px;
padding-bottom: 10px;
display: flex;
box-sizing: border-box;
border-bottom: 1px solid @gray-8;
}
.umb-user-preview:last-of-type {
border-bottom: none;
margin-bottom: 5px;
}
.umb-user-preview__avatar {
margin-right: 15px;
}
.umb-user-preview__content {
flex: 1 1 auto;
}
.umb-user-preview__name {
font-size: 15px;
font-weight: bold;
color: @black;
margin-bottom: 3px;
margin-top: 2px;
}
.umb-user-preview__actions {
flex: 0 0 auto;
display: flex;
align-items: center;
}
.umb-user-preview__action {
margin-left: 5px;
margin-right: 5px;
font-size: 13px;
font-weight: bold;
color: @gray-5;
}
.umb-user-preview__action:hover {
color: @turquoise;
text-decoration: none;
opacity: 1;
}
.umb-user-preview__action--red:hover {
color: @red;
}

20
src/Umbraco.Web.UI.Client/src/views/components/users/umb-user-preview.html Normal file
View File

@@ -0,0 +1,20 @@
<div class="umb-user-preview">
<div class="umb-user-preview__avatar">
<umb-avatar
size="xs"
color="secondary"
name="{{name}}"
img-src="{{avatar}}">
</umb-avatar>
</div>
<div class="umb-user-preview__content">
<div class="umb-user-preview__name">{{ name }}</div>
</div>
<div class="umb-user-preview__actions">
<a class="umb-user-preview__action umb-user-preview__action--red" title="Remove" href="" ng-if="allowRemove" ng-click="onRemove()">Remove</i></a>
<div>
</div>

67
src/Umbraco.Web.UI.Client/src/views/users/role.controller.js
View File

@@ -10,6 +10,11 @@
vm.userRole = {};
vm.goBack = goBack;
vm.openSectionPicker = openSectionPicker;
vm.openContentPicker = openContentPicker;
vm.openMediaPicker = openMediaPicker;
vm.removeSelectedItem = removeSelectedItem;
vm.getUserStateType = getUserStateType;
function init() {
@@ -30,6 +35,68 @@
function goBack() {
$location.path("/users/users/overview").search("subview", "roles");
}
function openSectionPicker() {
alert("open section picker");
}
function openContentPicker() {
vm.contentPicker = {
title: "Select content start node",
view: "contentpicker",
multiPicker: true,
show: true,
submit: function(model) {
if(model.selection) {
vm.userRole.startNodesContent = model.selection;
}
vm.contentPicker.show = false;
vm.contentPicker = null;
},
close: function(oldModel) {
vm.contentPicker.show = false;
vm.contentPicker = null;
}
};
}
function openMediaPicker() {
vm.contentPicker = {
title: "Select media start node",
view: "treepicker",
section: "media",
treeAlias: "media",
entityType: "media",
multiPicker: true,
show: true,
submit: function(model) {
if(model.selection) {
vm.userRole.startNodesMedia = model.selection;
}
vm.contentPicker.show = false;
vm.contentPicker = null;
},
close: function(oldModel) {
vm.contentPicker.show = false;
vm.contentPicker = null;
}
};
}
function removeSelectedItem(index, selection) {
selection.splice(index, 1);
}
function getUserStateType(state) {
switch (state) {
case "disabled" || "umbracoDisabled":
return "danger";
case "pending":
return "warning";
default:
return "success";
}
}
init();

136
src/Umbraco.Web.UI.Client/src/views/users/role.html
View File

@@ -8,7 +8,7 @@
<umb-editor-header
name="vm.userRole.name"
hide-icon="true"
icon="vm.userRole.icon"
hide-description="true"
hide-alias="true">
</umb-editor-header>
@@ -21,6 +21,119 @@
</umb-editor-sub-header-content-left>
</umb-editor-sub-header>
<div class="umb-packages-view-wrapper" style="padding: 0;">
<div class="umb-package-details">
<div class="umb-package-details__main-content">
<div class="test-group">
<div class="test-group-title">Something</div>
<div class="test-group-content block-form">
<umb-control-group label="Sections" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
<umb-node-preview
style="max-width: 100%;"
ng-repeat="section in vm.userRole.sections"
icon="section.icon"
name="section.name"
allow-remove="true"
on-remove="vm.removeSelectedItem($index, vm.userRole.sections)">
</umb-node-preview>
<a href=""
style="max-width: 100%;"
class="umb-node-preview-add"
ng-click="vm.openUserRolePicker()"
prevent-default>
<localize key="general_add">Add</localize>
</a>
</umb-control-group>
<umb-control-group label="Content start nodes" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
<umb-node-preview
style="max-width: 100%;"
ng-repeat="node in vm.userRole.startNodesContent"
icon="node.icon"
name="node.name"
allow-remove="true"
on-remove="vm.removeSelectedItem($index, vm.userRole.startNodesContent)">
</umb-node-preview>
<a href=""
style="max-width: 100%;"
class="umb-node-preview-add"
ng-click="vm.openContentPicker()"
prevent-default>
<localize key="general_add">Add</localize>
</a>
</umb-control-group>
<umb-control-group label="Media start nodes" description="Donec quis lacinia ligula. Suspendisse ultrices risus ante">
<umb-node-preview
style="max-width: 100%;"
ng-repeat="node in vm.userRole.startNodesMedia"
icon="node.icon"
name="node.name"
allow-remove="true"
on-remove="vm.removeSelectedItem($index, vm.userRole.startNodesMedia)">
</umb-node-preview>
<a href=""
style="max-width: 100%;"
class="umb-node-preview-add"
ng-click="vm.openMediaPicker()"
prevent-default>
<localize key="general_add">Add</localize>
</a>
</umb-control-group>
</div>
</div>
<div class="test-group">
<div class="test-group-title">Default permissions</div>
<div class="test-group-content">Some content here</div>
</div>
<div class="test-group">
<div class="test-group-title">Granular permissions</div>
<div class="test-group-content">Some content here</div>
</div>
</div>
<div class="umb-package-details__sidebar">
<div class="umb-package-details__section">
<div class="umb-package-details__section-title">Users</div>
<umb-user-preview
ng-repeat="user in vm.userRole.users"
name="user.name"
avatar="user.avatar"
allow-remove="true"
on-remove="vm.removeSelectedUser($index, vm.userRole.users)">
</umb-user-preview>
<a href=""
style="max-width: 100%;"
class="umb-node-preview-add"
ng-click="vm.openMediaPicker()"
prevent-default>
<localize key="general_add">Add</localize>
</a>
</div>
</div>
</div>
</div>
</umb-editor-container>
<umb-editor-footer>
@@ -45,4 +158,25 @@
</form>
<umb-overlay
ng-if="vm.sectionPicker.show"
model="vm.sectionPicker"
view="vm.sectionPicker.view"
position="right">
</umb-overlay>
<umb-overlay
ng-if="vm.contentPicker.show"
model="vm.contentPicker"
view="vm.contentPicker.view"
position="right">
</umb-overlay>
<umb-overlay
ng-if="vm.mediaPicker.show"
model="vm.mediaPicker"
view="vm.mediaPicker.view"
position="right">
</umb-overlay>
</div>