upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-06-10 17:23:59 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 57

Merge pull request #36142 from nextcloud/backport/35637/stable25

Browse source 
[stable25] Focus trap contacts menu with NcHeaderMenu port
This commit is contained in:
Pytal 2023-01-18 15:50:53 -08:00 committed by GitHub
commit d5ef044f21
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 235 additions and 466 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

124
core/css/server.css
View file

@ -847,130 +847,6 @@ span.ui-icon {
margin: 3px 7px 30px 0;
}
/* ---- CONTACTS MENU ---- */
#contactsmenu .menutoggle {
cursor: pointer;
}
#contactsmenu .menutoggle:before {
background-size: 20px 20px;
background-repeat: no-repeat;
background-position-x: 3px;
background-position-y: 4px;
padding: 14px;
content: " ";
background-image: var(--original-icon-contacts-white);
filter: var(--background-image-invert-if-bright);
}
#contactsmenu .menutoggle:hover, #contactsmenu .menutoggle:focus, #contactsmenu .menutoggle:active {
opacity: 1 !important;
}
#contactsmenu #contactsmenu-menu a {
padding: 2px;
}
#contactsmenu #contactsmenu-menu a:focus-visible {
box-shadow: inset 0 0 0 2px var(--color-main-text) !important;
}
#header .header-right > div#contactsmenu > .menu {
/* show 2.5 to 4.5 entries depending on the screen height */
height: calc(100vh - 150px);
max-height: 302px;
min-height: 175px;
width: 350px;
}
#header .header-right > div#contactsmenu > .menu .emptycontent {
margin-top: 5vh !important;
margin-bottom: 2vh;
}
#header .header-right > div#contactsmenu > .menu .emptycontent .icon-loading,
#header .header-right > div#contactsmenu > .menu .emptycontent .icon-search {
display: inline-block;
}
#header .header-right > div#contactsmenu > .menu .content {
/* fixed max height of the parent container without the search input */
height: calc(100vh - 150px - 50px);
max-height: 250px;
min-height: 125px;
overflow-y: auto;
}
#header .header-right > div#contactsmenu > .menu .content .footer {
text-align: center;
}
#header .header-right > div#contactsmenu > .menu .content .footer a {
display: block;
width: 100%;
padding: 12px 0;
opacity: 0.5;
}
#header .header-right > div#contactsmenu > .menu .contact {
display: flex;
position: relative;
align-items: center;
padding: 3px 3px 3px 10px;
/* actions menu */
}
#header .header-right > div#contactsmenu > .menu .contact .avatar {
height: 32px;
width: 32px;
display: inline-block;
}
#header .header-right > div#contactsmenu > .menu .contact .body {
flex-grow: 1;
padding-left: 8px;
}
#header .header-right > div#contactsmenu > .menu .contact .body div {
position: relative;
width: 100%;
}
#header .header-right > div#contactsmenu > .menu .contact .body .full-name, #header .header-right > div#contactsmenu > .menu .contact .body .last-message {
/* TODO: don't use fixed width */
max-width: 204px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#header .header-right > div#contactsmenu > .menu .contact .body .last-message, #header .header-right > div#contactsmenu > .menu .contact .body .email-address {
color: var(--color-text-maxcontrast);
}
#header .header-right > div#contactsmenu > .menu .contact .top-action, #header .header-right > div#contactsmenu > .menu .contact .second-action, #header .header-right > div#contactsmenu > .menu .contact .other-actions {
width: 16px;
height: 16px;
opacity: 0.5;
cursor: pointer;
}
#header .header-right > div#contactsmenu > .menu .contact .top-action:not(button), #header .header-right > div#contactsmenu > .menu .contact .second-action:not(button), #header .header-right > div#contactsmenu > .menu .contact .other-actions:not(button) {
padding: 14px;
}
#header .header-right > div#contactsmenu > .menu .contact .top-action img, #header .header-right > div#contactsmenu > .menu .contact .second-action img, #header .header-right > div#contactsmenu > .menu .contact .other-actions img {
filter: var(--background-invert-if-dark);
}
#header .header-right > div#contactsmenu > .menu .contact .top-action:hover, #header .header-right > div#contactsmenu > .menu .contact .top-action:active, #header .header-right > div#contactsmenu > .menu .contact .top-action:focus, #header .header-right > div#contactsmenu > .menu .contact .second-action:hover, #header .header-right > div#contactsmenu > .menu .contact .second-action:active, #header .header-right > div#contactsmenu > .menu .contact .second-action:focus, #header .header-right > div#contactsmenu > .menu .contact .other-actions:hover, #header .header-right > div#contactsmenu > .menu .contact .other-actions:active, #header .header-right > div#contactsmenu > .menu .contact .other-actions:focus {
opacity: 1;
}
#header .header-right > div#contactsmenu > .menu .contact button.other-actions {
width: 44px;
}
#header .header-right > div#contactsmenu > .menu .contact button.other-actions:focus {
border-color: transparent;
box-shadow: 0 0 0 2px var(--color-main-text);
}
#header .header-right > div#contactsmenu > .menu .contact button.other-actions:focus-visible {
border-radius: var(--border-radius-pill);
}
#header .header-right > div#contactsmenu > .menu .contact .menu {
top: 47px;
margin-right: 13px;
}
#header .header-right > div#contactsmenu > .menu .contact .popovermenu::after {
right: 2px;
}
#contactsmenu-search {
width: calc(100% - 16px);
margin: 8px;
height: 34px;
}
/* ---- TOOLTIPS ---- */
.extra-data {
padding-right: 5px !important;

2
core/css/server.css.map
View file

File diff suppressed because one or more lines are too long

124
core/css/styles.css
View file

@ -846,130 +846,6 @@ span.ui-icon {
margin: 3px 7px 30px 0;
}
/* ---- CONTACTS MENU ---- */
#contactsmenu .menutoggle {
cursor: pointer;
}
#contactsmenu .menutoggle:before {
background-size: 20px 20px;
background-repeat: no-repeat;
background-position-x: 3px;
background-position-y: 4px;
padding: 14px;
content: " ";
background-image: var(--original-icon-contacts-white);
filter: var(--background-image-invert-if-bright);
}
#contactsmenu .menutoggle:hover, #contactsmenu .menutoggle:focus, #contactsmenu .menutoggle:active {
opacity: 1 !important;
}
#contactsmenu #contactsmenu-menu a {
padding: 2px;
}
#contactsmenu #contactsmenu-menu a:focus-visible {
box-shadow: inset 0 0 0 2px var(--color-main-text) !important;
}
#header .header-right > div#contactsmenu > .menu {
/* show 2.5 to 4.5 entries depending on the screen height */
height: calc(100vh - 150px);
max-height: 302px;
min-height: 175px;
width: 350px;
}
#header .header-right > div#contactsmenu > .menu .emptycontent {
margin-top: 5vh !important;
margin-bottom: 2vh;
}
#header .header-right > div#contactsmenu > .menu .emptycontent .icon-loading,
#header .header-right > div#contactsmenu > .menu .emptycontent .icon-search {
display: inline-block;
}
#header .header-right > div#contactsmenu > .menu .content {
/* fixed max height of the parent container without the search input */
height: calc(100vh - 150px - 50px);
max-height: 250px;
min-height: 125px;
overflow-y: auto;
}
#header .header-right > div#contactsmenu > .menu .content .footer {
text-align: center;
}
#header .header-right > div#contactsmenu > .menu .content .footer a {
display: block;
width: 100%;
padding: 12px 0;
opacity: 0.5;
}
#header .header-right > div#contactsmenu > .menu .contact {
display: flex;
position: relative;
align-items: center;
padding: 3px 3px 3px 10px;
/* actions menu */
}
#header .header-right > div#contactsmenu > .menu .contact .avatar {
height: 32px;
width: 32px;
display: inline-block;
}
#header .header-right > div#contactsmenu > .menu .contact .body {
flex-grow: 1;
padding-left: 8px;
}
#header .header-right > div#contactsmenu > .menu .contact .body div {
position: relative;
width: 100%;
}
#header .header-right > div#contactsmenu > .menu .contact .body .full-name, #header .header-right > div#contactsmenu > .menu .contact .body .last-message {
/* TODO: don't use fixed width */
max-width: 204px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#header .header-right > div#contactsmenu > .menu .contact .body .last-message, #header .header-right > div#contactsmenu > .menu .contact .body .email-address {
color: var(--color-text-maxcontrast);
}
#header .header-right > div#contactsmenu > .menu .contact .top-action, #header .header-right > div#contactsmenu > .menu .contact .second-action, #header .header-right > div#contactsmenu > .menu .contact .other-actions {
width: 16px;
height: 16px;
opacity: 0.5;
cursor: pointer;
}
#header .header-right > div#contactsmenu > .menu .contact .top-action:not(button), #header .header-right > div#contactsmenu > .menu .contact .second-action:not(button), #header .header-right > div#contactsmenu > .menu .contact .other-actions:not(button) {
padding: 14px;
}
#header .header-right > div#contactsmenu > .menu .contact .top-action img, #header .header-right > div#contactsmenu > .menu .contact .second-action img, #header .header-right > div#contactsmenu > .menu .contact .other-actions img {
filter: var(--background-invert-if-dark);
}
#header .header-right > div#contactsmenu > .menu .contact .top-action:hover, #header .header-right > div#contactsmenu > .menu .contact .top-action:active, #header .header-right > div#contactsmenu > .menu .contact .top-action:focus, #header .header-right > div#contactsmenu > .menu .contact .second-action:hover, #header .header-right > div#contactsmenu > .menu .contact .second-action:active, #header .header-right > div#contactsmenu > .menu .contact .second-action:focus, #header .header-right > div#contactsmenu > .menu .contact .other-actions:hover, #header .header-right > div#contactsmenu > .menu .contact .other-actions:active, #header .header-right > div#contactsmenu > .menu .contact .other-actions:focus {
opacity: 1;
}
#header .header-right > div#contactsmenu > .menu .contact button.other-actions {
width: 44px;
}
#header .header-right > div#contactsmenu > .menu .contact button.other-actions:focus {
border-color: transparent;
box-shadow: 0 0 0 2px var(--color-main-text);
}
#header .header-right > div#contactsmenu > .menu .contact button.other-actions:focus-visible {
border-radius: var(--border-radius-pill);
}
#header .header-right > div#contactsmenu > .menu .contact .menu {
top: 47px;
margin-right: 13px;
}
#header .header-right > div#contactsmenu > .menu .contact .popovermenu::after {
right: 2px;
}
#contactsmenu-search {
width: calc(100% - 16px);
margin: 8px;
height: 34px;
}
/* ---- TOOLTIPS ---- */
.extra-data {
padding-right: 5px !important;

2
core/css/styles.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["variables.scss","styles.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AACA;AAAA;EAEC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AACA;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;;AACA;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;AACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AACA;EACC;;;AAKH;AAEA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;;AAID;AAEA;EACC;EACA;;;AAID;AAEA;EACC;;;AAGD;AAEA;AAAA;EAEC;EACA;EACA;EACA;;AACA;AAAA;EACC;;AAED;AAAA;EACC;;AAED;AAAA;EACC;;AAED;AAAA;AAAA;AAAA;EAEC;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;;;AAKH;AAEA;EACC;;;AAGD;AAEA;AAEA;AAEA;EACC;EACA;EACA;EACA;EACA;;;AAGD;AAEA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AAED;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAIC;AAAA;AAAA;EACC;;AAED;AAAA;AAAA;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;;;AAGD;AAEA;EACC;EACA;EACA;EACA;EACA;;;AAIA;EACC;;;AAKD;EACC;EACA;;AACA;EACC;EACA;EACA;;AAGF;EACC;EACA;;;AAIF;EACC;EACA;;AACA;EACC;;;AAIF;EACC;;;AAGD;AACA;AAEA;AAEA;AAEA;EACC;EACA;;AACA;EACC;EACA;;;AAIF;EACC;;;AAGD;EACC;;;AAIA;AAAA;EAGC;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;;;AAIA;EACC;;;AAKD;EACC;;;AAKD;EACC;;;AAKD;EACC;;;AAIF;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AACA;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAED;EACC;;AAEA;EACC;;AAED;EACC;;AAGF;EACC;;AAID;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;;AAGA;EACC;;AAGD;AAAA;AAAA;EAGC;EACA;EACA;;AAGD;AAAA;EAEC;EACA;;;AAMJ;EACC;EACA;;;AAID;AACA;EACC;EACA;EACA;EACA;AAwBA;;AAtBA;EACC;;AAGD;AAAA;AAAA;EAGC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAIF;EACC;;AAGA;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;;AAGF;EACC;;AAGA;AAAA;AAAA;EAIC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;;;AAMJ;AAGC;AAAA;EACC;EACA;EACA;;AACA;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;AACA;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAGA;EACC;;AAED;EACC;;AAED;EACC;EACA;;AAKH;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAGC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AACA;EACC;EACA;;AAMH;EACC;EACA;EACA;EACA;AACA;AACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAED;AACC;EACA;EACA;;AAEC;EACC;EACA;;AACA;EACC;EACA;;AAIH;EACC;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAED;AAAA;AAAA;EAGC;;AAED;AAAA;EAEC;;AAGD;EACC;EACA;;AAED;EACC;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AACA;EACC;;AACA;EACC;EACA;EACA;;AAED;EACC;;AAIH;EACC;;AAED;EACC;;AAED;EAIC;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA,SAhBS;EAiBT;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA,aA/BU;EAgCV;;AACA;EACC;;AAGF;EACC;EACA;;AAED;EACC;;AAON;EACC;;;AAIF;EACC;;;AAGD;EACC;EACA;;;AAGD;AAGC;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;AAGD;EAGC;;AAKD;EACC;;AAEA;EACC;;;AAMJ;AACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AACA;AAAA;EAEC;;AAIF;AACC;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAEA;EACC;EACA;EACA;EACA;;AAKH;EACC;EACA;EACA;EACA;AA8DA;;AA5DA;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAEA;EACC;EACA;;AAGD;AACC;EACA;EACA;EACA;EACA;;AAED;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAED;EACC;;AAGD;EAGC;;AAIF;EACC;;AAEA;EACC;EACA;;AAGD;EACC;;AAKF;EACC;EACA;;AAED;EACC;;;AAMH;EACC;EACA;EACA;;;AAGD;AAEA;EACC;;;AAGD;AAGC;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;;AACA;EACC;;AAGF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AAGF;EACC;EACA;;;AAIF;AACA;EACC;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACA;EACC;;AAIA;EACC;;AAIF;EACC;EACA;;AACA;EACC;EACA;EACA;EACA;;AACA;EACC;;AAGF;EACC;;AAIH;EACC;;AACA;EACC;;AAGF;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;AAAA;AAAA;EAGC;;AAGF;EACC;EACA;;AAID;EACC;EACA;;AAEA;EACC;;AAGF;EACC;;AAEA;AAAA;AAAA;AAAA;AAAA;EAEC;;;AAKH;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;;AAIF;AAGC;EACC;EACA;;AAED;EACC;;;AAIF;AACA;EACC;;AAID;AAEA;EACC;EACA;EACA;EACA","file":"styles.css"}
{"version":3,"sourceRoot":"","sources":["variables.scss","styles.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AACA;AAAA;EAEC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AACA;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;;AACA;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;AACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AACA;EACC;;;AAKH;AAEA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;;AAID;AAEA;EACC;EACA;;;AAID;AAEA;EACC;;;AAGD;AAEA;AAAA;EAEC;EACA;EACA;EACA;;AACA;AAAA;EACC;;AAED;AAAA;EACC;;AAED;AAAA;EACC;;AAED;AAAA;AAAA;AAAA;EAEC;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;;;AAKH;AAEA;EACC;;;AAGD;AAEA;AAEA;AAEA;EACC;EACA;EACA;EACA;EACA;;;AAGD;AAEA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AAED;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAIC;AAAA;AAAA;EACC;;AAED;AAAA;AAAA;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;;;AAGD;AAEA;EACC;EACA;EACA;EACA;EACA;;;AAIA;EACC;;;AAKD;EACC;EACA;;AACA;EACC;EACA;EACA;;AAGF;EACC;EACA;;;AAIF;EACC;EACA;;AACA;EACC;;;AAIF;EACC;;;AAGD;AACA;AAEA;AAEA;AAEA;EACC;EACA;;AACA;EACC;EACA;;;AAIF;EACC;;;AAGD;EACC;;;AAIA;AAAA;EAGC;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;;;AAIA;EACC;;;AAKD;EACC;;;AAKD;EACC;;;AAKD;EACC;;;AAIF;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AACA;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAED;EACC;;AAEA;EACC;;AAED;EACC;;AAGF;EACC;;AAID;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;;AAGA;EACC;;AAGD;AAAA;AAAA;EAGC;EACA;EACA;;AAGD;AAAA;EAEC;EACA;;;AAMJ;EACC;EACA;;;AAID;AACA;EACC;EACA;EACA;EACA;AAwBA;;AAtBA;EACC;;AAGD;AAAA;AAAA;EAGC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAIF;EACC;;AAGA;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;;AAGF;EACC;;AAGA;AAAA;AAAA;EAIC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;;;AAMJ;AAGC;AAAA;EACC;EACA;EACA;;AACA;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;AACA;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAGA;EACC;;AAED;EACC;;AAED;EACC;EACA;;AAKH;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAGC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AACA;EACC;EACA;;AAMH;EACC;EACA;EACA;EACA;AACA;AACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAED;AACC;EACA;EACA;;AAEC;EACC;EACA;;AACA;EACC;EACA;;AAIH;EACC;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAED;AAAA;AAAA;EAGC;;AAED;AAAA;EAEC;;AAGD;EACC;EACA;;AAED;EACC;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AACA;EACC;;AACA;EACC;EACA;EACA;;AAED;EACC;;AAIH;EACC;;AAED;EACC;;AAED;EAIC;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA,SAhBS;EAiBT;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA,aA/BU;EAgCV;;AACA;EACC;;AAGF;EACC;EACA;;AAED;EACC;;AAON;EACC;;;AAIF;EACC;;;AAGD;EACC;EACA;;;AAGD;AAEA;EACC;;;AAGD;AAGC;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;;AACA;EACC;;AAGF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AAGF;EACC;EACA;;;AAIF;AACA;EACC;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACA;EACC;;AAIA;EACC;;AAIF;EACC;EACA;;AACA;EACC;EACA;EACA;EACA;;AACA;EACC;;AAGF;EACC;;AAIH;EACC;;AACA;EACC;;AAGF;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;AAAA;AAAA;EAGC;;AAGF;EACC;EACA;;AAID;EACC;EACA;;AAEA;EACC;;AAGF;EACC;;AAEA;AAAA;AAAA;AAAA;AAAA;EAEC;;;AAKH;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;;AAIF;AAGC;EACC;EACA;;AAED;EACC;;;AAIF;AACA;EACC;;AAID;AAEA;EACC;EACA;EACA;EACA","file":"styles.css"}

154
core/css/styles.scss
View file

@ -893,160 +893,6 @@ span.ui-icon {
margin: 3px 7px 30px 0;
}
/* ---- CONTACTS MENU ---- */
#contactsmenu {
.menutoggle {
cursor: pointer;
&:before {
background-size: 20px 20px;
background-repeat: no-repeat;
background-position-x: 3px;
background-position-y: 4px;
padding: 14px;
content: ' ';
// Force white
background-image: var(--original-icon-contacts-white);
filter: var(--background-image-invert-if-bright);
}
&:hover,
&:focus,
&:active {
opacity: 1 !important;
}
}
#contactsmenu-menu {
a {
padding: 2px;
&:focus-visible {
box-shadow: inset 0 0 0 2px var(--color-main-text) !important; // override rule in core/css/headers.scss #header a:focus-visible
}
}
}
}
#header .header-right > div#contactsmenu > .menu {
/* show 2.5 to 4.5 entries depending on the screen height */
height: calc(100vh - 50px * 3);
max-height: calc(50px * 6 + 2px);
min-height: calc(50px * 3.5);
width: 350px;
.emptycontent {
margin-top: 5vh !important;
margin-bottom: 2vh;
.icon-loading,
.icon-search {
display: inline-block;
}
}
.content {
/* fixed max height of the parent container without the search input */
height: calc(100vh - 50px * 3 - 50px);
max-height: calc(50px * 5);
min-height: calc(50px * 3.5 - 50px);
overflow-y: auto;
.footer {
text-align: center;
a {
display: block;
width: 100%;
padding: 12px 0;
opacity: .5;
}
}
}
.contact {
display: flex;
position: relative;
align-items: center;
padding: 3px 3px 3px 10px;
.avatar {
height: 32px;
width: 32px;
display: inline-block;
}
.body {
flex-grow: 1;
padding-left: 8px;
div {
position: relative;
width: 100%;
}
.full-name, .last-message {
/* TODO: don't use fixed width */
max-width: 204px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.last-message, .email-address {
color: var(--color-text-maxcontrast);
}
}
.top-action, .second-action, .other-actions {
width: 16px;
height: 16px;
opacity: .5;
cursor: pointer;
&:not(button) {
padding: 14px;
}
img {
filter: var(--background-invert-if-dark);
}
&:hover,
&:active,
&:focus {
opacity: 1;
}
}
button.other-actions {
width: 44px;
&:focus {
border-color: transparent;
box-shadow: 0 0 0 2px var(--color-main-text);
}
&:focus-visible {
border-radius: var(--border-radius-pill);
}
}
/* actions menu */
.menu {
top: 47px;
margin-right: 13px;
}
.popovermenu::after {
right: 2px;
}
}
}
#contactsmenu-search {
width: calc(100% - 16px);
margin: 8px;
height: 34px;
}
/* ---- TOOLTIPS ---- */
.extra-data {

2
core/js/tests/specs/contactsmenuSpec.js
View file

@ -32,7 +32,7 @@ describe('Contacts menu', function() {
* @returns {Promise}
*/
function openMenu() {
return menu._toggleVisibility(true);
return menu.loadContacts();
}
beforeEach(function(done) {

42
core/src/OC/contactsmenu.js
View file

@ -381,8 +381,7 @@ const ContactsMenuView = View.extend({
/**
* @param {Object} options
* @param {jQuery} options.el
* @param {jQuery} options.trigger
* @param {string} options.el
* @class ContactsMenu
* @memberOf OC
*/
@ -391,12 +390,9 @@ const ContactsMenu = function(options) {
}
ContactsMenu.prototype = {
/** @type {jQuery} */
/** @type {string} */
$el: undefined,
/** @type {jQuery} */
_$trigger: undefined,
/** @type {ContactsMenuView} */
_view: undefined,
@ -405,41 +401,19 @@ ContactsMenu.prototype = {
/**
* @param {Object} options
* @param {jQuery} options.el - the element to render the menu in
* @param {jQuery} options.trigger - the element to click on to open the menu
* @param {string} options.el - the selector of the element to render the menu in
* @returns {undefined}
*/
initialize: function(options) {
this.$el = options.el
this._$trigger = options.trigger
this.$el = $(options.el)
this._view = new ContactsMenuView({
el: this.$el
el: this.$el,
})
this._view.on('search', function(searchTerm) {
this._loadContacts(searchTerm)
this.loadContacts(searchTerm)
}, this)
OC.registerMenu(this._$trigger, this.$el, function() {
this._toggleVisibility(true)
}.bind(this), true)
this.$el.on('beforeHide', function() {
this._toggleVisibility(false)
}.bind(this))
},
/**
* @private
* @param {boolean} show
* @returns {Promise}
*/
_toggleVisibility: function(show) {
if (show) {
return this._loadContacts()
} else {
this.$el.html('')
return Promise.resolve()
}
},
/**
@ -461,7 +435,7 @@ ContactsMenu.prototype = {
* @param {string|undefined} searchTerm
* @returns {undefined}
*/
_loadContacts: function(searchTerm) {
loadContacts: function(searchTerm) {
var self = this
if (!self._contactsPromise) {

19
core/src/components/ContactsMenu.js
View file

@ -2,6 +2,7 @@
* @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
*
* @author Christoph Wurst <christoph@winzerhof-wurst.at>
* @author Christopher Ng <chrng8@gmail.com>
* @author John Molakvoæ <skjnldsv@protonmail.com>
*
* @license AGPL-3.0-or-later
@ -21,16 +22,20 @@
*
*/
import $ from 'jquery'
import OC from '../OC'
import Vue from 'vue'
import ContactsMenu from '../views/ContactsMenu.vue'
/**
* @todo move to contacts menu code https://github.com/orgs/nextcloud/projects/31#card-21213129
*/
export const setUp = () => {
// eslint-disable-next-line no-new
new OC.ContactsMenu({
el: $('#contactsmenu .menu'),
trigger: $('#contactsmenu .menutoggle'),
})
const mountPoint = document.getElementById('contactsmenu')
if (mountPoint) {
// eslint-disable-next-line no-new
new Vue({
el: mountPoint,
render: h => h(ContactsMenu),
})
}
}

198
core/src/views/ContactsMenu.vue Normal file
View file

@ -0,0 +1,198 @@
<!--
- @copyright 2023 Christopher Ng <chrng8@gmail.com>
-
- @author Christopher Ng <chrng8@gmail.com>
-
- @license AGPL-3.0-or-later
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
-
-->
<template>
<NcHeaderMenu id="contactsmenu"
:aria-label="t('core', 'Search contacts')"
@open="handleOpen">
<template #trigger>
<Contacts :size="20" />
</template>
<div id="contactsmenu-menu" />
</NcHeaderMenu>
</template>
<script>
import NcHeaderMenu from '@nextcloud/vue/dist/Components/NcHeaderMenu.js'
import Contacts from 'vue-material-design-icons/Contacts.vue'
import OC from '../OC/index.js'
export default {
name: 'ContactsMenu',
components: {
Contacts,
NcHeaderMenu,
},
data() {
return {
contactsMenu: null,
}
},
mounted() {
// eslint-disable-next-line no-new
this.contactsMenu = new OC.ContactsMenu({
el: '#contactsmenu-menu',
})
},
methods: {
handleOpen() {
this.contactsMenu?.loadContacts()
},
},
}
</script>
<style lang="scss" scoped>
#contactsmenu-menu {
/* show 2.5 to 4.5 entries depending on the screen height */
height: calc(100vh - 50px * 3);
max-height: calc(50px * 6 + 2px);
min-height: calc(50px * 3.5);
width: 350px;
&:deep {
.emptycontent {
margin-top: 5vh !important;
margin-bottom: 1.5vh;
.icon-loading,
.icon-search {
display: inline-block;
}
}
#contactsmenu-search {
width: calc(100% - 16px);
margin: 8px;
height: 34px;
}
.content {
/* fixed max height of the parent container without the search input */
height: calc(100vh - 50px * 3 - 50px);
max-height: calc(50px * 5);
min-height: calc(50px * 3.5 - 50px);
overflow-y: auto;
.footer {
text-align: center;
a {
display: block;
width: 100%;
padding: 12px 0;
opacity: .5;
}
}
}
a {
padding: 2px;
&:focus-visible {
box-shadow: inset 0 0 0 2px var(--color-main-text) !important; // override rule in core/css/headers.scss #header a:focus-visible
}
}
.contact {
display: flex;
position: relative;
align-items: center;
padding: 3px 3px 3px 10px;
.avatar {
height: 32px;
width: 32px;
display: inline-block;
}
.body {
flex-grow: 1;
padding-left: 8px;
div {
position: relative;
width: 100%;
}
.full-name, .last-message {
/* TODO: don't use fixed width */
max-width: 204px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.last-message, .email-address {
color: var(--color-text-maxcontrast);
}
}
.top-action, .second-action, .other-actions {
width: 16px;
height: 16px;
opacity: .5;
cursor: pointer;
&:not(button) {
padding: 14px;
}
img {
filter: var(--background-invert-if-dark);
}
&:hover,
&:active,
&:focus {
opacity: 1;
}
}
button.other-actions {
width: 44px;
&:focus {
border-color: transparent;
box-shadow: 0 0 0 2px var(--color-main-text);
}
&:focus-visible {
border-radius: var(--border-radius-pill);
}
}
/* actions menu */
.menu {
top: 47px;
margin-right: 13px;
}
.popovermenu::after {
right: 2px;
}
}
}
}
</style>

9
core/templates/layout.user.php
View file

@ -69,14 +69,7 @@ $getUserAvatar = static function (int $size) use ($_): string {
<div class="header-right">
<div id="unified-search"></div>
<div id="notifications"></div>
<div id="contactsmenu">
<div class="menutoggle" tabindex="0" role="button"
aria-haspopup="true" aria-controls="contactsmenu-menu" aria-expanded="false">
<span class="hidden-visually"><?php p($l->t('Contacts'));?></span>
</div>
<div id="contactsmenu-menu" class="menu"
aria-label="<?php p($l->t('Contacts menu'));?>"></div>
</div>
<div id="contactsmenu"></div>
<div id="settings">
<div id="expand" tabindex="0" role="button" class="menutoggle"
aria-label="<?php p($l->t('Open settings menu'));?>"

4
dist/core-common.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/core-common.js.LICENSE.txt vendored
View file

@ -362,6 +362,8 @@
/*! For license information please see NcDatetimePicker.js.LICENSE.txt */
/*! For license information please see NcHeaderMenu.js.LICENSE.txt */
/*! For license information please see NcHighlight.js.LICENSE.txt */
/*! For license information please see NcModal.js.LICENSE.txt */

2
dist/core-common.js.map vendored
View file

File diff suppressed because one or more lines are too long

4
dist/core-login.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/core-login.js.map vendored
View file

File diff suppressed because one or more lines are too long

4
dist/core-main.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/core-main.js.map vendored
View file

File diff suppressed because one or more lines are too long

5
tests/acceptance/features/bootstrap/ContactsMenuContext.php
View file

@ -31,7 +31,7 @@ class ContactsMenuContext implements Context, ActorAwareInterface {
* @return Locator
*/
public static function contactsMenuButton() {
return Locator::forThe()->xpath("//*[@id = 'header']//*[@id = 'contactsmenu']")->
return Locator::forThe()->xpath("//*[@id = 'header']//*[@id = 'contactsmenu']//*[@class = 'header-menu__trigger']")->
describedAs("Contacts menu button");
}
@ -39,8 +39,7 @@ class ContactsMenuContext implements Context, ActorAwareInterface {
* @return Locator
*/
public static function contactsMenu() {
return Locator::forThe()->css(".menu")->
descendantOf(self::contactsMenuButton())->
return Locator::forThe()->xpath("//*[@id = 'header']//*[@id = 'contactsmenu']//*[@id = 'contactsmenu-menu']")->
describedAs("Contacts menu");
}