open-dsi
/
nextcloud-server
mirror of https://github.com/nextcloud/server
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Augment keyboard accessibility of contacts menu

Browse Source 
Signed-off-by: Christopher Ng <chrng8@gmail.com>
pull/32736/head
Christopher Ng 4 years ago
parent dcf25d6c77
commit c1054ea5eb
10 changed files with 85 additions and 26 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 25
      core/css/server.css
  2. 2
      core/css/server.css.map
  3. 25
      core/css/styles.css
  4. 2
      core/css/styles.css.map
  5. 36
      core/css/styles.scss
  6. 9
      core/src/OC/contactsmenu/contact.handlebars
  7. 4
      dist/core-login.js
  8. 2
      dist/core-login.js.map
  9. 4
      dist/core-main.js
  10. 2
      dist/core-main.js.map

25
core/css/server.css
Unescape View File

@ -957,6 +957,12 @@ span.ui-icon {
#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 */
@ -997,9 +1003,6 @@ span.ui-icon {
border-bottom: 1px solid var(--color-border);
/* actions menu */
}
#header .header-right > div#contactsmenu > .menu .contact :last-of-type {
border-bottom: none;
}
#header .header-right > div#contactsmenu > .menu .contact .avatar {
height: 32px;
width: 32px;
@ -1026,13 +1029,25 @@ span.ui-icon {
#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;
padding: 14px;
opacity: 0.5;
cursor: pointer;
}
#header .header-right > div#contactsmenu > .menu .contact .top-action :hover, #header .header-right > div#contactsmenu > .menu .contact .second-action :hover, #header .header-right > div#contactsmenu > .menu .contact .other-actions :hover {
#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: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 {
margin: 5px;
}
#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;

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

File diff suppressed because one or more lines are too long

25
core/css/styles.css
Unescape View File

@ -956,6 +956,12 @@ span.ui-icon {
#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 */
@ -996,9 +1002,6 @@ span.ui-icon {
border-bottom: 1px solid var(--color-border);
/* actions menu */
}
#header .header-right > div#contactsmenu > .menu .contact :last-of-type {
border-bottom: none;
}
#header .header-right > div#contactsmenu > .menu .contact .avatar {
height: 32px;
width: 32px;
@ -1025,13 +1028,25 @@ span.ui-icon {
#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;
padding: 14px;
opacity: 0.5;
cursor: pointer;
}
#header .header-right > div#contactsmenu > .menu .contact .top-action :hover, #header .header-right > div#contactsmenu > .menu .contact .second-action :hover, #header .header-right > div#contactsmenu > .menu .contact .other-actions :hover {
#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: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 {
margin: 5px;
}
#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;

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

File diff suppressed because one or more lines are too long

36
core/css/styles.scss
Unescape View File

@ -1015,6 +1015,16 @@ span.ui-icon {
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 {
@ -1059,10 +1069,6 @@ span.ui-icon {
padding: 3px 3px 3px 10px;
border-bottom: 1px solid var(--color-border);
:last-of-type {
border-bottom: none;
}
.avatar {
height: 32px;
width: 32px;
@ -1093,15 +1099,33 @@ span.ui-icon {
.top-action, .second-action, .other-actions {
width: 16px;
height: 16px;
padding: 14px;
opacity: .5;
cursor: pointer;
:hover {
&:not(button) {
padding: 14px;
}
&:hover,
&:active,
&:focus {
opacity: 1;
}
}
button.other-actions {
margin: 5px;
&: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;

9
core/src/OC/contactsmenu/contact.handlebars
Unescape View File

@ -27,8 +27,13 @@
<div class="email-address">{{contact.emailAddresses}}</div>
</a>
{{/if}}
{{#if contact.topAction}}
<a class="top-action" href="{{contact.topAction.hyperlink}}" title="{{contact.topAction.title}}">
<img src="{{contact.topAction.icon}}" alt="{{contact.topAction.title}}">
</a>
{{/if}}
{{else if contact.topAction}}
<a class="body" href="{{contact.topAction.hyperlink}}">
<a class="body" href="{{contact.topAction.hyperlink}}">
<div class="full-name">{{contact.fullName}}</div>
<div class="last-message">{{contact.lastMessage}}</div>
<div class="email-address">{{contact.emailAddresses}}</div>
@ -49,7 +54,7 @@
</a>
{{/if}}
{{#if contact.hasManyActions}}
<span class="other-actions icon-more"></span>
<button class="other-actions icon-more"></button>
<div class="menu popovermenu">
<ul>
{{#each contact.actions}}

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
Write Preview
Loading…
Cancel
Save