Merge pull request #2134 from umbraco/temp-U4-10256
U4-10256 Make umb-box component + add documentation
This commit is contained in:
Mads Rasmussen
@@ -0,0 +1,44 @@
|
||||
/**
|
||||
@ngdoc directive
|
||||
@name umbraco.directives.directive:umbBox
|
||||
@restrict E
|
||||
|
||||
@description
|
||||
Use this directive to render an already styled empty div tag.
|
||||
|
||||
<h3>Markup example</h3>
|
||||
<pre>
|
||||
<umb-box>
|
||||
<umb-box-header title="this is a title"></umb-box-header>
|
||||
<umb-box-content>
|
||||
// Content here
|
||||
</umb-box-content>
|
||||
</umb-box>
|
||||
</pre>
|
||||
|
||||
<h3>Use in combination with:</h3>
|
||||
<ul>
|
||||
<li>{@link umbraco.directives.directive:umbBoxHeader umbBoxHeader}</li>
|
||||
<li>{@link umbraco.directives.directive:umbBoxContent umbBoxContent}</li>
|
||||
</ul>
|
||||
**/
|
||||
|
||||
(function(){
|
||||
'use strict';
|
||||
|
||||
function BoxDirective() {
|
||||
|
||||
var directive = {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
templateUrl: 'views/components/html/umb-box/umb-box.html'
|
||||
};
|
||||
|
||||
return directive;
|
||||
|
||||
}
|
||||
|
||||
angular.module('umbraco.directives').directive('umbBox', BoxDirective);
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,43 @@
|
||||
/**
|
||||
@ngdoc directive
|
||||
@name umbraco.directives.directive:umbBoxContent
|
||||
@restrict E
|
||||
|
||||
@description
|
||||
Use this directive to render an empty container. Recommended to use it inside an {@link umbraco.directives.directive:umbBox umbBox} directive. See documentation for {@link umbraco.directives.directive:umbBox umbBox}.
|
||||
|
||||
<h3>Markup example</h3>
|
||||
<pre>
|
||||
<umb-box>
|
||||
<umb-box-header title="this is a title"></umb-box-header>
|
||||
<umb-box-content>
|
||||
// Content here
|
||||
</umb-box-content>
|
||||
</umb-box>
|
||||
</pre>
|
||||
|
||||
<h3>Use in combination with:</h3>
|
||||
<ul>
|
||||
<li>{@link umbraco.directives.directive:umbBox umbBox}</li>
|
||||
<li>{@link umbraco.directives.directive:umbBoxHeader umbBoxHeader}</li>
|
||||
</ul>
|
||||
**/
|
||||
|
||||
(function(){
|
||||
'use strict';
|
||||
|
||||
function BoxContentDirective() {
|
||||
|
||||
var directive = {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
templateUrl: 'views/components/html/umb-box/umb-box-content.html'
|
||||
};
|
||||
|
||||
return directive;
|
||||
}
|
||||
|
||||
angular.module('umbraco.directives').directive('umbBoxContent', BoxContentDirective);
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,65 @@
|
||||
/**
|
||||
@ngdoc directive
|
||||
@name umbraco.directives.directive:umbBoxHeader
|
||||
@restrict E
|
||||
@scope
|
||||
|
||||
@description
|
||||
Use this directive to construct a title. Recommended to use it inside an {@link umbraco.directives.directive:umbBox umbBox} directive. See documentation for {@link umbraco.directives.directive:umbBox umbBox}.
|
||||
|
||||
<h3>Markup example</h3>
|
||||
<pre>
|
||||
<umb-box>
|
||||
<umb-box-header title="this is a title"></umb-box-header>
|
||||
<umb-box-content>
|
||||
// Content here
|
||||
</umb-box-content>
|
||||
</umb-box>
|
||||
</pre>
|
||||
|
||||
<h3>Markup example with using titleKey</h3>
|
||||
<pre>
|
||||
<umb-box>
|
||||
// the title-key property needs an areaAlias_keyAlias from the language files
|
||||
<umb-box-header title-key="user_profile"></umb-box-header>
|
||||
<umb-box-content>
|
||||
// Content here
|
||||
</umb-box-content>
|
||||
</umb-box>
|
||||
</pre>
|
||||
{@link https://our.umbraco.org/documentation/extending/language-files/ Here you can see more about the language files}
|
||||
|
||||
<h3>Use in combination with:</h3>
|
||||
<ul>
|
||||
<li>{@link umbraco.directives.directive:umbBox umbBox}</li>
|
||||
<li>{@link umbraco.directives.directive:umbBoxContent umbBoxContent}</li>
|
||||
</ul>
|
||||
|
||||
@param {string} title (<code>attrbute</code>): Custom title text.
|
||||
@param {string} title-key (<code>attrbute</code>): the key alias of the language xml files.
|
||||
**/
|
||||
|
||||
|
||||
(function(){
|
||||
'use strict';
|
||||
|
||||
function BoxHeaderDirective() {
|
||||
|
||||
var directive = {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
templateUrl: 'views/components/html/umb-box/umb-box-header.html',
|
||||
scope: {
|
||||
titleKey: "@?",
|
||||
title: "@?"
|
||||
}
|
||||
};
|
||||
|
||||
return directive;
|
||||
|
||||
}
|
||||
|
||||
angular.module('umbraco.directives').directive('umbBoxHeader', BoxHeaderDirective);
|
||||
|
||||
})();
|
||||
@@ -0,0 +1 @@
|
||||
<div class="umb-box-content" ng-transclude></div>
|
||||
@@ -0,0 +1,6 @@
|
||||
<div class="umb-box-header" ng-transclude>
|
||||
<div class="umb-box-header-title">
|
||||
<localize ng-if="titleKey" key="{{titleKey}}"></localize>
|
||||
<span ng-if="title">{{title}}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1 @@
|
||||
<div class="umb-box" ng-transclude></div>
|
||||
@@ -21,11 +21,11 @@
|
||||
|
||||
<div class="umb-package-details__main-content">
|
||||
|
||||
<div class="umb-box">
|
||||
<div class="umb-box-header">
|
||||
<div class="umb-box-header-title"><localize key="user_access">Access</localize></div>
|
||||
</div>
|
||||
<div class="umb-box-content block-form">
|
||||
<umb-box>
|
||||
|
||||
<umb-box-header title-key="user_access"></umb-box-header>
|
||||
|
||||
<umb-box-content class="block-form">
|
||||
|
||||
<umb-control-group style="margin-bottom: 20px;" label="@main_sections" description="@user_sectionsHelp">
|
||||
<umb-node-preview
|
||||
@@ -93,14 +93,12 @@
|
||||
|
||||
</umb-control-group>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</umb-box-content>
|
||||
</umb-box>
|
||||
|
||||
<div class="umb-box">
|
||||
<div class="umb-box-header">
|
||||
<div class="umb-box-header-title"><localize key="user_permissionsDefault">Default permissions</localize></div>
|
||||
</div>
|
||||
<div class="umb-box-content block-form">
|
||||
<umb-box>
|
||||
<umb-box-header title-key="user_permissionsDefault"></umb-box-header>
|
||||
<umb-box-content class="block-form">
|
||||
<umb-control-group
|
||||
ng-repeat="(category, permissions) in vm.userGroup.defaultPermissions"
|
||||
label="{{ category }}">
|
||||
@@ -111,14 +109,12 @@
|
||||
selected="permission.checked">
|
||||
</umb-permission>
|
||||
</umb-control-group>
|
||||
</div>
|
||||
</div>
|
||||
</umb-box-content>
|
||||
</umb-box>
|
||||
|
||||
<div class="umb-box">
|
||||
<div class="umb-box-header">
|
||||
<div class="umb-box-header-title"><localize key="user_permissionsGranular">Granular permissions</localize></div>
|
||||
</div>
|
||||
<div class="umb-box-content block-form">
|
||||
<umb-box>
|
||||
<umb-box-header title-key="user_permissionsGranular"></umb-box-header>
|
||||
<umb-box-content class="block-form">
|
||||
<umb-control-group label="Nodes" description="@user_permissionsGranularHelp">
|
||||
|
||||
<umb-node-preview
|
||||
@@ -142,8 +138,8 @@
|
||||
</a>
|
||||
</umb-control-group>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</umb-box-content>
|
||||
</umb-box>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -22,14 +22,12 @@
|
||||
<div class="umb-package-details">
|
||||
|
||||
<div class="umb-package-details__main-content">
|
||||
|
||||
<div class="umb-box">
|
||||
<div class="umb-box-header">
|
||||
<div class="umb-box-header-title">
|
||||
<localize key="user_profile">Profile</localize>
|
||||
</div>
|
||||
</div>
|
||||
<div class="umb-box-content block-form">
|
||||
|
||||
<umb-box>
|
||||
|
||||
<umb-box-header title-key="user_profile"></umb-box-header>
|
||||
|
||||
<umb-box-content class="block-form">
|
||||
|
||||
<umb-control-group label="@general_email" required="true">
|
||||
<input
|
||||
@@ -71,16 +69,12 @@
|
||||
<span class="help-inline" val-msg-for="culture" val-toggle-msg="required"><localize key="general_required">Required</localize></span>
|
||||
<span class="help-inline" val-msg-for="culture" val-toggle-msg="valServerField"></span>
|
||||
</umb-control-group>
|
||||
</div>
|
||||
</div>
|
||||
</umb-box-content>
|
||||
</umb-box>
|
||||
|
||||
<div class="umb-box">
|
||||
<div class="umb-box-header">
|
||||
<div class="umb-box-header-title">
|
||||
<localize key="user_access">Access</localize>
|
||||
</div>
|
||||
</div>
|
||||
<div class="umb-box-content block-form">
|
||||
<umb-box>
|
||||
<umb-box-header title-key="user_access"></umb-box-header>
|
||||
<umb-box-content class="block-form">
|
||||
|
||||
<umb-control-group style="margin-bottom: 25px;" label="@general_groups" description="@user_groupsHelp" required="true">
|
||||
|
||||
@@ -162,8 +156,8 @@
|
||||
|
||||
</umb-control-group>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</umb-box-content>
|
||||
</umb-box>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__sidebar">
|
||||
|
||||
Reference in New Issue
Block a user