Skip to content

Commit

Permalink
Place user name in menu bar when available; rework user menu layout (…
Browse files Browse the repository at this point in the history 
…CFM-179) (#305)
  • Loading branch information
@arlen
arlen authored Feb 27, 2025
1 parent b8949c2 commit 833e765
Show file tree
Hide file tree
Showing 4 changed files with 91 additions and 62 deletions.
2 changes: 1 addition & 1 deletion app/resources/locales/en_US/menu.po
View file
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
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
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
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

0 comments on commit 833e765

Please sign in to comment.