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

Use umb-radiobutton in public access overlay (#6612)

Browse Source
This commit is contained in:
Bjarne Fyrstenborg
2019-10-16 16:00:59 +02:00
committed by Sebastiaan Janssen
parent 6c6b23c465
commit 0b395482f1
4 changed files with 31 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbradiobutton.directive.js
View File

@@ -22,6 +22,7 @@
</pre>
@param {boolean} model Set to <code>true</code> or <code>false</code> to set the radiobutton to checked or unchecked.
@param {string} inputId Set the <code>id</code> of the radiobutton.
@param {string} value Set the value of the radiobutton.
@param {string} name Set the name of the radiobutton.
@param {string} text Set the text for the radiobutton label.
@@ -55,6 +56,7 @@
controllerAs: 'vm',
bindings: {
model: "=",
inputId: "@",
value: "@",
name: "@",
text: "@",

3
src/Umbraco.Web.UI.Client/src/less/hacks.less
View File

@@ -111,11 +111,10 @@ iframe, .content-column-body {
}
.pa-select-type label {
padding: 0 20px;
padding: 0 15px;
}
.pa-access-header {
font-weight: bold;
margin: 0 0 3px 0;
padding-bottom: 0;
}

15
src/Umbraco.Web.UI.Client/src/views/components/forms/umb-radiobutton.html
View File

@@ -1,12 +1,13 @@
<label class="radio umb-form-check umb-form-check--radiobutton" ng-class="{ 'umb-form-check--disabled': vm.disabled }">
<input type="radio"
name="{{vm.name}}"
value="{{vm.value}}"
class="umb-form-check__input"
ng-model="vm.model"
ng-disabled="vm.disabled"
ng-required="vm.required"
ng-change="vm.change()" />
id="{{vm.inputId}}"
name="{{vm.name}}"
value="{{vm.value}}"
class="umb-form-check__input"
ng-model="vm.model"
ng-disabled="vm.disabled"
ng-required="vm.required"
ng-change="vm.change()" />
<span class="umb-form-check__state" aria-hidden="true">
<span class="umb-form-check__check"></span>

44
src/Umbraco.Web.UI.Client/src/views/content/protect.html
View File

@@ -18,31 +18,29 @@
<localize key="publicAccess_paHowWould" tokens="[currentNode.name]">Choose how to restrict access to this page</localize>
</p>
<umb-pane>
<div class="pa-select-type">
<input id="protectionTypeMember" type="radio" name="protectionType" value="member" ng-model="vm.type">
<div class="pa-select-type">
<umb-radiobutton input-id="protectionTypeMember" name="protectionType" value="member" model="vm.type" text="" />
<label for="protectionTypeMember">
<h5 class="pa-access-header"><localize key="publicAccess_paMembers">Specific members protection</localize></h5>
<p><localize key="publicAccess_paMembersHelp">If you want to grant access to specific members</localize></p>
</label>
</div>
<label for="protectionTypeMember" class="flex flex-column flex-auto">
<strong class="pa-access-header bold"><localize key="publicAccess_paMembers">Specific members protection</localize></strong>
<span class=""><localize key="publicAccess_paMembersHelp">If you want to grant access to specific members</localize></span>
</label>
</div>
<div class="pa-select-type">
<input id="protectionTypeGroup" type="radio" name="protectionType" value="group" ng-model="vm.type">
<div class="pa-select-type">
<umb-radiobutton input-id="protectionTypeGroup" name="protectionType" value="group" model="vm.type" />
<label for="protectionTypeGroup">
<h5 class="pa-access-header"><localize key="publicAccess_paGroups">Group based protection</localize></h5>
<p><localize key="publicAccess_paGroupsHelp">If you want to grant access to all members of specific member groups</localize></p>
</label>
</div>
</umb-pane>
<label for="protectionTypeGroup" class="flex flex-column flex-auto">
<strong class="pa-access-header bold"><localize key="publicAccess_paGroups">Group based protection</localize></strong>
<span><localize key="publicAccess_paGroupsHelp">If you want to grant access to all members of specific member groups</localize></span>
</label>
</div>
</div>
<div ng-show="vm.step && !vm.loading && !vm.removing">
<div ng-if="vm.step === 'member'">
<p><localize key="publicAccess_paSelectMembers" tokens="[currentNode.name]">Select the members that should have access to this page</localize></p>
<umb-pane>
<div>
<umb-node-preview ng-repeat="member in vm.members | orderBy:'name'"
icon="'icon-user'"
name="member.name"
@@ -52,7 +50,7 @@
<a href ng-click="vm.pickMember()" class="umb-node-preview-add" prevent-default>
<localize key="general_add">Add</localize>
</a>
</umb-pane>
</div>
</div>
<div ng-show="vm.step === 'group' && !vm.hasGroups">
@@ -61,7 +59,7 @@
<div ng-show="vm.step === 'group' && vm.hasGroups">
<p><localize key="publicAccess_paSelectGroups" tokens="[currentNode.name]">Select the groups that should have access to this page</localize></p>
<umb-pane>
<div>
<umb-node-preview ng-repeat="group in vm.groups | orderBy:'name'"
icon="'icon-users'"
name="group.name"
@@ -71,12 +69,12 @@
<a href ng-click="vm.pickGroup()" class="umb-node-preview-add" prevent-default>
<localize key="general_add">Add</localize>
</a>
</umb-pane>
</div>
</div>
<div ng-show="vm.step === 'member' || vm.hasGroups">
<p class="mt4"><localize key="publicAccess_paSelectPages">Select the pages that contain login form and error messages</localize></p>
<umb-pane>
<div>
<div class="control-group umb-control-group -no-border">
<div class="umb-el-wrap">
<label>
@@ -111,7 +109,7 @@
</umb-node-preview>
</div>
</div>
</umb-pane>
</div>
</div>
</div>
@@ -119,8 +117,6 @@
<p><localize key="publicAccess_paRemoveProtectionConfirm" tokens="[currentNode.name]">Are you sure you want to remove the protection from this page?</localize></p>
</div>
<!--<pre>{{vm | json}}</pre>-->
</umb-pane>
<umb-pane ng-show="vm.success">