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

add tabs to toolbar

Browse Source
This commit is contained in:
Mads Rasmussen
2021-06-24 13:28:12 +02:00
parent 18e6f8cccc
commit 9b3f7f2653
2 changed files with 66 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
View File

@@ -1,9 +1,23 @@
/* ---------- TOOLBAR --------- */
.umb-group-builder__toolbar {
display: flex;
align-items: center;
.left {
flex: 1 1 auto;
width: 50%;
display: block;
}
.right {
flex: 0 0 auto;
}
}
/* ---------- TABS ---------- */
.umb-group-builder__tabs {
background-color: @white;
height: 70px;
margin-bottom: 20px;
height: 60px;
position: relative;
}
@@ -20,6 +34,10 @@
li {
height: 100%;
&:nth-last-child(2) {
background: blue;
}
}
}
@@ -29,9 +47,7 @@
.umb-group-builder__tabs-overflow {
height: 100%;
background: @white;
width: 30px;
background-color: @white;
position: absolute;
top: 0;
display: flex;
@@ -57,6 +73,7 @@
}
.umb-group-builder__tab {
background-color: @white;
position: relative;
padding: 0 40px 0 10px;
display: flex;
@@ -201,10 +218,11 @@
.umb-group-builder__tab--placeholder {
border: 1px dashed @gray-7;
border-bottom: none;
border-top: none;
padding-right: 10px;
min-width: 100px;
background: transparent;
border-radius: @baseBorderRadius;
margin-left: 10px;
}
.umb-group-builder__tab-inherited-label {

78
src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
View File

@@ -1,8 +1,47 @@
<div data-element="groups-builder" class="clearfix">
<umb-editor-sub-header>
<umb-editor-sub-header class="umb-group-builder__toolbar">
<umb-editor-sub-header-content-right>
<umb-editor-sub-header-content-left class="left">
<div class="umb-group-builder__tabs" ng-if="(sortingMode && tabs.length > 0) || (!sortingMode)">
<div ng-show="overflow.left > 0" class="umb-group-builder__tabs-overflow umb-group-builder__tabs-overflow--left">
<span class="caret"></span>
</div>
<ul class="umb-group-builder__tabs-list" ui-sortable="sortableOptionsTab" ng-model="tabs" umb-overflow-checker on-overflow="setTabOverflowState(overflowLeft, overflowRight)">
<li ng-repeat="(tabIndex, tab) in tabs track by tab.key" ng-class="{'umb-group-builder__tab-sortable': sortingMode}" umb-droppable="droppableOptionsTab" data-tab-key="{{tab.key}}" val-groups-in-tab="{ tab: tab, groups: model.groups }">
<umb-content-type-tab
tab="tab"
is-open="tab.key === openTabKey"
on-click="changeTab(tab)"
sorting="sortingMode"
allow-remove="canRemoveTab(tab) && !sortingMode"
on-remove="removeTab(tab)"
val-server-field-name="{{ getTabServerFieldName(tab) }}"
on-change-sort-order-value="onChangeTabSortOrderValue(tab)"
on-change-icon="onChangeTabIcon(icon, color, tab)">
</umb-content-type-tab>
</li>
<li>
<button
ng-if="!sortingMode"
type="button"
hotkey="alt+shift+a"
ng-click="addTab(tab)"
data-element="tab-add"
class="btn-reset umb-group-builder__tab umb-group-builder__tab--placeholder">
Add tab
</button>
</li>
</ul>
<div ng-show="overflow.right < 0" class="umb-group-builder__tabs-overflow umb-group-builder__tabs-overflow--right">
<span class="caret"></span>
</div>
</div>
</umb-editor-sub-header-content-left>
<umb-editor-sub-header-content-right class="right">
<umb-button
style="margin-right: 5px;"
alias="compositions"
@@ -35,41 +74,6 @@
<a ng-if="!sortingMode" hotkey="alt+shift+p" ng-click="addPropertyToActiveGroup()"></a>
<a ng-if="!sortingMode" hotkey="alt+shift+g" ng-click="addGroupToActiveTab()"></a>
<div class="umb-group-builder__tabs" ng-if="(sortingMode && tabs.length > 0) || (!sortingMode)">
<div ng-show="overflow.left > 0" class="umb-group-builder__tabs-overflow umb-group-builder__tabs-overflow--left">
<span class="caret"></span>
</div>
<ul class="umb-group-builder__tabs-list" ui-sortable="sortableOptionsTab" ng-model="tabs" umb-overflow-checker on-overflow="setTabOverflowState(overflowLeft, overflowRight)">
<li ng-repeat="(tabIndex, tab) in tabs track by tab.key" ng-class="{'umb-group-builder__tab-sortable': sortingMode}" umb-droppable="droppableOptionsTab" data-tab-key="{{tab.key}}" val-groups-in-tab="{ tab: tab, groups: model.groups }">
<umb-content-type-tab
tab="tab"
is-open="tab.key === openTabKey"
on-click="changeTab(tab)"
sorting="sortingMode"
allow-remove="canRemoveTab(tab) && !sortingMode"
on-remove="removeTab(tab)"
val-server-field-name="{{ getTabServerFieldName(tab) }}"
on-change-sort-order-value="onChangeTabSortOrderValue(tab)"
on-change-icon="onChangeTabIcon(icon, color, tab)">
</umb-content-type-tab>
</li>
<li>
<button
ng-if="!sortingMode"
type="button"
hotkey="alt+shift+a"
ng-click="addTab(tab)"
data-element="tab-add"
class="btn-reset umb-group-builder__tab umb-group-builder__tab--placeholder">
Add tab
</button>
</li>
</ul>
<div ng-show="overflow.right < 0" class="umb-group-builder__tabs-overflow umb-group-builder__tabs-overflow--right">
<span class="caret"></span>
</div>
</div>
<div ng-if="sortingMode && model.groups.length === 0" class="umb-group-builder__no-data-text">
<localize key="contentTypeEditor_noGroups"></localize>
</div>