Skip to content
Snippets Groups Projects
Unverified Commit 48a19258 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3100611 by amateescu, lauriii, dixon_, shaal, vijaycs85, huzooka:... 

Issue #3100611 by amateescu, lauriii, dixon_, shaal, vijaycs85, huzooka: Improve the Workspaces toolbar UI for desktop and mobile
parent 2e53ac16
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
core/modules/workspaces/css/workspaces.toolbar.css
+ 78
− 80
View file @ 48a19258
...@@ -69,11 +69,20 @@ ...@@ -69,11 +69,20 @@
.workspaces-dialog.ui-widget.ui-widget-content { .workspaces-dialog.ui-widget.ui-widget-content {
height: 100% !important; height: 100% !important;
border: 0;
line-height: 20px;
} }
.workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar { .workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
position: relative;
visibility: hidden; visibility: hidden;
padding: 0;
border: 0;
line-height: 0;
}
.workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
top: 1em;
right: 0.5em;
} }
.workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar .ui-button { .workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar .ui-button {
...@@ -83,43 +92,34 @@ ...@@ -83,43 +92,34 @@
#drupal-off-canvas .active-workspace { #drupal-off-canvas .active-workspace {
position: relative; position: relative;
top: 16px;
width: 100%; width: 100%;
height: 140px; min-height: 70px;
padding: 20px 40px 0 20px; padding: 20px;
background-color: #444; background-color: #444;
} }
@media all and (min-width: 767px) {
#drupal-off-canvas .active-workspace {
padding: 20px 40px 0 40px;
}
}
#drupal-off-canvas .active-workspace__title { #drupal-off-canvas .active-workspace__title {
font-size: 0.8125rem; font-size: 0.8125rem;
font-weight: bold; font-weight: bold;
} }
#drupal-off-canvas .active-workspace__label { #drupal-off-canvas .active-workspace__label {
margin-top: 0.5em; padding: 0.9em 3.2rem 1em;
margin-left: 3.2rem; }
#drupal-off-canvas .active-workspace__label span {
color: #fff; color: #fff;
font-size: 1.285em; font-size: 1.285em;
font-weight: bold;
} }
#drupal-off-canvas .active-workspace__manage { #drupal-off-canvas .active-workspace__manage {
margin-left: 3.2rem; display: block;
white-space: nowrap; white-space: nowrap;
outline-color: currentColor; outline-color: currentColor;
font-size: 0.9286em; font-size: 0.9286em;
} }
#drupal-off-canvas .active-workspace__actions {
position: relative;
top: 1em;
}
#drupal-off-canvas .active-workspace__button { #drupal-off-canvas .active-workspace__button {
padding: 5px 22px; padding: 5px 22px;
color: #fff; color: #fff;
...@@ -135,11 +135,17 @@ ...@@ -135,11 +135,17 @@
} }
#drupal-off-canvas .all-workspaces { #drupal-off-canvas .all-workspaces {
position: fixed; display: inline-block;
bottom: 1em; padding: 20px;
left: 20px; }
color: #fff;
outline-color: currentColor; #drupal-off-canvas .workspaces__list h3 {
padding-left: 20px;
font-size: 0.8125rem;
}
[dir="rtl"] #drupal-off-canvas .workspaces__list h3 {
padding: 0 20px 0;
} }
#drupal-off-canvas .workspaces ul { #drupal-off-canvas .workspaces ul {
...@@ -151,20 +157,28 @@ ...@@ -151,20 +157,28 @@
margin-bottom: 1px; margin-bottom: 1px;
} }
#drupal-off-canvas .workspaces a { #drupal-off-canvas .workspaces__item {
position: relative; position: relative;
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
height: 73px; height: 73px;
margin-right: 1px; margin-right: 1px;
padding: 20px 0 0 50px; padding: 20px 0 0 50px;
text-decoration: none;
color: #fff; color: #fff;
background-color: #555; background-color: #555;
font-size: 0.929em; font-size: 0.929em;
font-weight: bold; font-weight: bold;
} }
[dir=rtl] #drupal-off-canvas .workspaces__item {
padding: 20px 50px 0 0;
}
#drupal-off-canvas .workspaces__item:hover,
#drupal-off-canvas .workspaces__item:focus {
background-color: #666;
}
#drupal-off-canvas .active-workspace__label:before, #drupal-off-canvas .active-workspace__label:before,
#drupal-off-canvas .workspaces__item:before { #drupal-off-canvas .workspaces__item:before {
position: absolute; position: absolute;
...@@ -182,28 +196,18 @@ ...@@ -182,28 +196,18 @@
background-image: url("../icons/81c071/ws_icon.svg"); background-image: url("../icons/81c071/ws_icon.svg");
} }
[dir=rtl] #drupal-off-canvas .active-workspace__label:before,
[dir=rtl] #drupal-off-canvas .workspaces__item:before {
right: 20px;
left: initial;
}
#drupal-off-canvas .active-workspace__label:before { #drupal-off-canvas .active-workspace__label:before {
left: 20px; left: 20px;
width: 40px; width: 40px;
height: 40px; height: 40px;
} }
@media all and (min-width: 767px) {
#drupal-off-canvas .active-workspace__label:before {
left: 40px;
}
}
.workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
top: 39px;
padding: 0;
}
.workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
top: 1em;
right: 0.5em;
}
@media all and (max-width: 766px) { @media all and (max-width: 766px) {
.toolbar-oriented .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace { .toolbar-oriented .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace {
width: auto; width: auto;
...@@ -235,32 +239,50 @@ ...@@ -235,32 +239,50 @@
} }
@media all and (min-width: 767px) { @media all and (min-width: 767px) {
.workspaces-dialog.ui-widget.ui-widget-content {
height: 161px !important;
}
/* The extra div is added by Drupal.theme.ajaxWrapperMultipleRootElements
* because we are inserting multiple root elements. */
.workspaces-dialog #drupal-off-canvas > div {
display: flex;
flex-direction: row-reverse;
align-items: flex-end;
}
#drupal-off-canvas .active-workspace { #drupal-off-canvas .active-workspace {
position: fixed; flex-basis: 200px;
top: 0; flex-grow: 2;
right: 0;
box-sizing: content-box; box-sizing: content-box;
width: calc(30% - 80px); min-height: 140px;
height: 140px;
padding: 20px 40px 0; padding: 20px 40px 0;
} }
#drupal-off-canvas .all-workspaces { #drupal-off-canvas .active-workspace__label:before {
position: relative; left: 40px;
top: 27px;
left: 0;
margin-top: 31px;
padding-left: 20px;
} }
.workspaces-dialog.ui-widget.ui-widget-content { [dir=rtl] #drupal-off-canvas .active-workspace__label:before {
height: 161px !important; right: 40px;
left: initial;
} }
#drupal-off-canvas .workspaces { #drupal-off-canvas .workspaces {
position: relative;
flex-grow: 8;
}
#drupal-off-canvas .all-workspaces {
position: absolute; position: absolute;
bottom: 0; top: 9px;
width: 70%; right: 20px;
padding: 0;
}
[dir=rtl] #drupal-off-canvas .all-workspaces {
right: initial;
left: 20px;
} }
#drupal-off-canvas .workspaces ul { #drupal-off-canvas .workspaces ul {
...@@ -271,28 +293,4 @@ ...@@ -271,28 +293,4 @@
#drupal-off-canvas .workspaces li { #drupal-off-canvas .workspaces li {
margin-bottom: 0; margin-bottom: 0;
} }
#drupal-off-canvas .active-workspace__actions {
position: absolute;
top: unset;
bottom: 1em;
}
.workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
top: 0;
}
.workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close,
.workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:hover,
.workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:focus {
top: 1.5em;
}
}
/* Make dialog width 100% for workspace mobile viewports. */
@media all and (max-width: 48em) {
.ui-dialog.workspaces-dialog {
min-width: 100%;
max-width: 100%;
}
} }
core/modules/workspaces/src/WorkspaceListBuilder.php
+ 37
− 25
View file @ 48a19258
...@@ -217,31 +217,37 @@ protected function offCanvasRender(array &$build) { ...@@ -217,31 +217,37 @@ protected function offCanvasRender(array &$build) {
]; ];
} }
$collection_url = Url::fromRoute('entity.workspace.collection');
$row_count = count($build['table']['#rows']);
$build['active_workspace'] = [ $build['active_workspace'] = [
'#type' => 'container', '#type' => 'container',
'#weight' => -20, '#weight' => -20,
'#attributes' => [ '#attributes' => [
'class' => array_merge(['active-workspace'], $active_workspace_classes), 'class' => array_merge(['active-workspace'], $active_workspace_classes),
], ],
'title' => [
'#type' => 'html_tag',
'#tag' => 'div',
'#value' => $this->t('Current workspace:'),
'#attributes' => ['class' => 'active-workspace__title'],
],
'label' => [ 'label' => [
'#type' => 'label', '#type' => 'container',
'#prefix' => '<div class="active-workspace__title">' . $this->t('Current workspace:') . '</div>',
'#title' => $active_workspace ? $active_workspace->label() : $this->t('Live'),
'#title_display' => '',
'#attributes' => ['class' => 'active-workspace__label'], '#attributes' => ['class' => 'active-workspace__label'],
'value' => [
'#type' => 'html_tag',
'#tag' => 'span',
'#value' => $active_workspace ? $active_workspace->label() : $this->t('Live'),
],
], ],
'manage' => [ ];
if ($active_workspace) {
$build['active_workspace']['label']['manage'] = [
'#type' => 'link', '#type' => 'link',
'#title' => $this->t('Manage workspaces'), '#title' => $this->t('Manage workspace'),
'#url' => $collection_url, '#url' => $active_workspace->toUrl('edit-form'),
'#attributes' => [ '#attributes' => [
'class' => ['active-workspace__manage'], 'class' => ['active-workspace__manage'],
], ],
], ];
];
if ($active_workspace) {
$build['active_workspace']['actions'] = [ $build['active_workspace']['actions'] = [
'#type' => 'container', '#type' => 'container',
'#weight' => 20, '#weight' => 20,
...@@ -278,16 +284,7 @@ protected function offCanvasRender(array &$build) { ...@@ -278,16 +284,7 @@ protected function offCanvasRender(array &$build) {
]; ];
} }
} }
if ($row_count > 2) {
$build['all_workspaces'] = [
'#type' => 'link',
'#title' => $this->t('View all @count workspaces', ['@count' => $row_count]),
'#url' => $collection_url,
'#attributes' => [
'class' => ['all-workspaces'],
],
];
}
$items = []; $items = [];
$rows = array_slice($build['table']['#rows'], 0, 5, TRUE); $rows = array_slice($build['table']['#rows'], 0, 5, TRUE);
foreach ($rows as $id => $row) { foreach ($rows as $id => $row) {
...@@ -295,7 +292,7 @@ protected function offCanvasRender(array &$build) { ...@@ -295,7 +292,7 @@ protected function offCanvasRender(array &$build) {
$url = Url::fromRoute('entity.workspace.activate_form', ['workspace' => $id], ['query' => $this->getDestinationArray()]); $url = Url::fromRoute('entity.workspace.activate_form', ['workspace' => $id], ['query' => $this->getDestinationArray()]);
$items[] = [ $items[] = [
'#type' => 'link', '#type' => 'link',
'#title' => $row['data']['label'], '#title' => ltrim($row['data']['label']['data']['#markup']),
'#url' => $url, '#url' => $url,
'#attributes' => [ '#attributes' => [
'class' => ['use-ajax', 'workspaces__item', 'workspaces__item--not-default'], 'class' => ['use-ajax', 'workspaces__item', 'workspaces__item--not-default'],
...@@ -324,15 +321,30 @@ protected function offCanvasRender(array &$build) { ...@@ -324,15 +321,30 @@ protected function offCanvasRender(array &$build) {
]; ];
} }
$build['workspaces'] = [ $build['workspaces_list'] = [
'#type' => 'container',
'#attributes' => [
'class' => 'workspaces',
],
];
$build['workspaces_list']['workspaces'] = [
'#theme' => 'item_list', '#theme' => 'item_list',
'#title' => $this->t('Other workspaces:'),
'#items' => $items, '#items' => $items,
'#wrapper_attributes' => ['class' => ['workspaces']], '#wrapper_attributes' => ['class' => ['workspaces__list']],
'#cache' => [ '#cache' => [
'contexts' => $this->entityType->getListCacheContexts(), 'contexts' => $this->entityType->getListCacheContexts(),
'tags' => $this->entityType->getListCacheTags(), 'tags' => $this->entityType->getListCacheTags(),
], ],
]; ];
$build['workspaces_list']['all_workspaces'] = [
'#type' => 'link',
'#title' => $this->t('View all workspaces'),
'#url' => Url::fromRoute('entity.workspace.collection'),
'#attributes' => [
'class' => ['all-workspaces'],
],
];
unset($build['table']); unset($build['table']);
unset($build['pager']); unset($build['pager']);
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment