Skip to content
Jump to bottom

Place user name in menu bar when available; rework user menu layout (CFM-179) #305

Merged
merged 1 commit into from
Feb 27, 2025
+91 −62
Merged

Place user name in menu bar when available; rework user menu layout (CFM-179) #305

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/resources/locales/en_US/menu.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,7 @@ msgid "person.canvas"
msgstr "Person Canvas
msgid "my.canvas"
msgstr "My Canvas"
msgstr "my canvas"

msgid "registries"
msgstr "Available {0} Registries"
Expand Down
67 changes: 42 additions & 25 deletions app/templates/element/menuTop.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ class="dropdown-toggle top-menu-button"
aria-expanded="false"
aria-label="<?= __d('menu','menu.user') ?>">
<span class="top-menu-link-text">
<?= $vv_user['username']; ?>
<?= $vv_user_roles['person_fullname'] ?? $vv_user_roles['person_identifier'] ?>
</span>
<em class="material-symbols icon-adjust" aria-hidden="true">person</em>
</button>
Expand All @@ -59,30 +59,47 @@ class="dropdown-toggle top-menu-button"
?>
<!-- Account Dropdown -->
<div id="user-panel" class="dropdown-menu <?= (count($vv_available_cos) > 1) ? ' with-co-switcher' : ''; ?>" aria-labelledby="user-panel-toggle">
<div id="logout-in-panel">
<?= $this->Html->link('<em class="material-symbols" aria-hidden="true">logout</em> ' . __d('operation','logout'),
'/auth/logout/logout.php',
['escape' => false,
'id' => 'logout-in-panel-link',
'class' => 'btn']);
?>
</div>
<div id="user-panel-user-info">
<em class="material-symbols" aria-hidden="true">person</em>
<div id="user-panel-cn"><?= $vv_user_roles['person_fullname'] ?? '' ?></div>
<div id="user-panel-canvas"><?php
if (!empty($vv_user_roles['person_id'])) {
print $this->Html->link(
__d('menu', 'my.canvas'),
['plugin' => null,
'controller' => 'people',
'action' => $vv_user_roles['co'] || $vv_user_roles['platform'] ? 'edit' : 'view',
$vv_user_roles['person_id']
],
);
}
?></div>
<div id="user-panel-id"><?= $vv_user_roles['person_identifier'] ?></div>
<div id="user-panel-user">
<div id="user-panel-user-info">
<?php if (!empty($vv_user_roles['person_id'])): ?>
<?php
// Generate the link to the Person canvas
$canvasUrl = $this->Url->build(
['plugin' => null,
'controller' => 'people',
'action' => $vv_user_roles['co'] || $vv_user_roles['platform'] ? 'edit' : 'view',
$vv_user_roles['person_id']
]
);
?>
<a href="<?= $canvasUrl ?>" aria-label="<?= __d('menu', 'my.canvas') ?>">
<?php endif; ?>
<div id="user-panel-user-container">
<div id="user-panel-user-icon">
<em class="material-symbols" aria-hidden="true">person</em>
</div>
<div id="user-panel-user-labels">
<?php if (!empty($vv_user_roles['person_fullname'])): ?>
<div id="user-panel-cn"><?= $vv_user_roles['person_fullname'] ?></div>
<?php endif; ?>
<div id="user-panel-id"><?= $vv_user_roles['person_identifier'] ?></div>
</div>
</div>
<?php if (!empty($vv_user_roles['person_id'])): ?>
<div id="user-panel-canvas-link">
<?= __d('menu', 'my.canvas') ?>
</div>
</a>
<?php endif; ?>
</div>
<div id="logout-in-panel">
<?= $this->Html->link('<em class="material-symbols" aria-hidden="true">logout</em> ' . __d('operation','logout'),
'/auth/logout/logout.php',
['escape' => false,
'id' => 'logout-in-panel-link',
'class' => 'btn']);
?>
</div>
</div>
<!-- Density and dark mode controls-->
<div id="user-panel-user-settings" class="dropdown">
Expand Down
71 changes: 41 additions & 30 deletions app/webroot/css/co-base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -263,7 +263,7 @@ body.cos.select #top-bar {
}
.material-symbols.danger,
.material-symbols-outlined.danger {
color: var(--cmg-color-btn-004);
color: var(--cmg-color-btn-bg-004);
}
.material-symbols.success,
.material-symbols-outlined.success {
Expand Down Expand Up @@ -310,24 +310,39 @@ body.cos.select #top-bar {
#user-panel a:hover {
text-decoration: underline;
}
#user-panel-user {
display: flex;
justify-content: space-between;
}
#user-panel-cn {
margin-top: -8px;
padding: 1em 0 0 0;
font-size: 1.2em;
line-height: 1em;
}
#user-panel-id {
padding: 0.4em;
max-width: 80vw;
margin: 0.25em 0;
max-width: 60vw;
word-wrap:break-word;
}
#user-panel-user-info { /* mobile only styling */
border-top: 1px solid var(--cmg-color-bg-006);
#user-panel-user-info {
padding: 1em;
}
#user-panel-user-info .material-symbols {
float: left;
font-size: 5em;
#user-panel-user-icon {
display: none;
}
#user-panel-user-labels {
color: var(--cmg-color-body-txt);
}
#user-panel-user-info a:hover {
text-decoration: none;
}
#user-panel-user-info a:hover #user-panel-canvas-link {
text-decoration: underline;
}
#user-panel-user-icon .material-symbols {
font-size: 4.2em;
color: var(--cmg-color-body-txt);
}
#user-panel .co-info-topbox {
background-color: var(--cmg-color-bg-004);
Expand Down Expand Up @@ -400,13 +415,11 @@ body.cos.select #top-bar {
text-align: center;
margin: 1em auto;
}
#logout-in-panel {
text-align: right;
}
#logout-in-panel-link {
padding: 1em;
margin: 0;
width: 100%;
white-space: nowrap;
}
#login .material-symbols,
#logout-in-panel .material-symbols {
Expand Down Expand Up @@ -554,8 +567,8 @@ ul.form-list li.alert-banner .co-alert {
border-bottom: 1px solid var(--cmg-color-bg-006);
text-align: left;
background-color: var(--cmg-color-body-bg);
-webkit-box-shadow: 5px 5px 8px 0px var(--cmg-color-bg-003);
box-shadow: 5px 5px 8px 0px var(--cmg-color-bg-003);
-webkit-box-shadow: 5px 5px 8px 0 var(--cmg-color-bg-003);
box-shadow: 5px 5px 8px 0 var(--cmg-color-bg-003);
}
.menu-panel h3 {
margin: 0;
Expand Down Expand Up @@ -596,7 +609,7 @@ ul.form-list li.alert-banner .co-alert {
background-color: transparent;
border: 1px solid var(--cmg-color-bg-006);
}
#main-menu .menu-panel-links a.menu-panel-primary-link:hover h3 {
#main-menu .menu-panel-links a.menu-panel-primary-link:hover h3 {
text-decoration: underline;
}
#main-menu .menu-panel-primary-link-text {
Expand All @@ -610,7 +623,7 @@ ul.form-list li.alert-banner .co-alert {
align-items: center;
line-height: 1.4em;
}
#main-menu .menu-panel-links .material-symbols,
#main-menu .menu-panel-links .material-symbols,
#main-menu .menu-panel-links .material-symbols-outlined {
font-size: 2.5rem;
margin-right: 0.75rem;
Expand All @@ -631,7 +644,7 @@ ul.form-list li.alert-banner .co-alert {
margin-top: 0.5em;
font-size: 0.9em;
}
.menu-panel-link-desc {
.menu-panel-link-desc {
color: var(--cmg-color-body-txt);
}
.menu-panel-sidepanel {
Expand Down Expand Up @@ -1014,15 +1027,13 @@ ul.form-list li.alert-banner .co-alert {
/* CO CONFIGURATION DASHBOARD */
.config-menu {
list-style: none;
padding: 0;
padding: 0 0 1em;
border-bottom: 1px solid var(--cmg-color-bg-006);
padding-bottom: 1em;
}
.config-menu a {
display: inline-block;
padding: 0.5em;
padding: 0.5em 0.5em 0.5em 2em;
text-indent: -0.9em;
padding-left: 2em;
}
.config-menu a .material-symbols,
.config-menu a .material-symbols-outlined {
Expand Down Expand Up @@ -1083,7 +1094,7 @@ table.list-mode .field-actions-container {
color: var(--cmg-color-btn-bg-002);
text-decoration: none;
}
.dropdown-item.active,
.dropdown-item.active,
.dropdown-item:active {
background-color: var(--cmg-color-bg-004);
}
Expand Down Expand Up @@ -1914,8 +1925,8 @@ li[data-pc-section="emptymessage"] {
.v-leave-to {
opacity: 0;
}
[v-cloak] {
display: none;
[v-cloak] {
display: none;
}
/* ENTITY ID under each Edit/View Form/List */
#cm-entity-id {
Expand Down Expand Up @@ -2062,7 +2073,7 @@ body.start .submit {
#comanage-iframe-wrapper #subnavigation .supertitle-container,
#comanage-iframe-wrapper #subnavigation #cm-person-subnav-tabs,
#comanage-iframe-wrapper #subnavigation #cm-person-subnav-links {
display: none;
display: none;
}
#comanage-iframe-wrapper #content {
padding: 1rem 2em 0;
Expand Down Expand Up @@ -2284,7 +2295,7 @@ a.desc::after {
.co-grid .co-row {
border-top: 1px solid var(--cmg-color-bg-005);
}
code,
code,
.fixed-width * {
font-family: "Courier New","Courier",monospace !important;
color: var(--cmg-color-body-txt);
Expand Down Expand Up @@ -2391,7 +2402,7 @@ table.list-mode .read-only-link-container {
color: var(--cmg-color-txt-soft);
padding: 0 0.5em;
}
table.table-striped tbody tr:nth-child(2n) td {
table.table-striped tbody tr:nth-child(2n) td {
/* bootstrap override */
background-color: var(--cmg-color-bg-001);
}
Expand Down Expand Up @@ -2569,9 +2580,9 @@ html.dark-mode .btn-default:active {
text-decoration: none !important;
}
.btn-secondary {
background-color: var(--cmg-color-btn-004);
background-color: var(--cmg-color-btn-bg-004);
color: var(--cmg-color-txt-inverse);
border-color: var(--cmg-color-btn-004);
border-color: var(--cmg-color-btn-bg-004);
}
.btn-link {
font-size: 1em;
Expand Down Expand Up @@ -2673,7 +2684,7 @@ html.dark-mode .btn-default:active {
}
/* DENSITY SETTINGS (from User Settings Menu; Medium is default) */
/* Density "small" */
html.density-small th,
html.density-small th,
html.density-small td {
padding: 0.5em 0.5em 0.5em 1em;
}
Expand Down Expand Up @@ -2728,4 +2739,4 @@ html.density-large .field-data {
footer {
text-align: center;
padding: 2em 2em 1em;
}
}
13 changes: 7 additions & 6 deletions app/webroot/css/co-responsive.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,13 +61,14 @@
min-width: 400px;
max-width: unset;
}
#user-panel-user-info {
border-top: none;
#user-panel-user-icon {
display: block;
}
#logout-in-panel {
position: absolute;
top: 0;
right: 0;
#user-panel-user-container {
display: flex;
}
#user-panel-canvas-link {
margin-left: 0.5rem;
}
/* FORMS */
ul.form-list li .field {
Expand Down