Merge pull request #1290 from cryptpad/toolbar

Toolbar accessibility improvements
This commit is contained in:
yflory 2023-12-13 15:08:55 +01:00 committed by GitHub
commit 16b5539ba8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 627 additions and 394 deletions

View file

@ -128,9 +128,9 @@
}
}
div:focus {
outline: none;
}
//div:focus {
// outline: none;
//}
.fa {
font-family: FontAwesome;
@ -507,6 +507,9 @@
}
}
#cp-app-drive-content {
&:focus {
outline: none;
}
box-sizing: border-box;
background: @cp_sidebar-right-bg;
color: @cp_sidebar-right-fg;
@ -547,7 +550,7 @@
}
li {
cursor: default;
&:not(.cp-app-drive-element-header) {
&:not(.cp-app-drive-element-header):not([role="menuitem"]) {
&:hover {
&:not(.-cp-app-drive-element-selected, .cp-app-drive-element-selected-tmp) {
background-color: @cp_drive-icon-hover;

View file

@ -77,66 +77,72 @@
&.cp-dropdown-left {
right: 0;
margin-right: 5px;
}
&:hover {
display: block;
}
& > a, & > span {
color: @cp_dropdown-fg;
border-radius: @variables_radius;
padding: 5px;
text-decoration: none;
display: flex;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
float: none;
text-align: left;
line-height: 1em;
align-items: center;
li:not([class]) {
padding: 0;
& > a, & > span {
color: @cp_dropdown-fg;
border-radius: @variables_radius;
padding: 5px;
text-decoration: none;
display: flex;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
float: none;
text-align: left;
line-height: 1em;
align-items: center;
&:not(.fa) {
font: @dropdown_font;
}
&.fa, &.cptools {
font-size: 18px;
&::before {
width: 40px;
margin-left: -10px;
text-align: center;
}
* {
&:not(.fa) {
font: @dropdown_font;
}
}
&.fa, &.cptools {
font-size: 18px;
&::before {
width: 40px;
margin-left: -10px;
text-align: center;
}
* {
font: @dropdown_font;
}
}
.fa, .cptools {
width: 20px;
text-align: center;
margin-right: 5px !important;
}
.fa, .cptools {
width: 20px;
text-align: center;
margin-right: 5px !important;
}
&:hover {
background-color: @cp_dropdown-bg-hover;
&.cp-dropdown-element-active {
background-color: @cp_dropdown-bg-active;
color: @cp_dropdown-fg;
}
&.cp-app-hidden {
display: none;
}
&.cp-app-disabled {
cursor: not-allowed !important;
opacity: 0.5;
}
}
}
li[role="menuitem"] {
border-radius: @variables_radius;
&:hover, &:focus {
background-color: @cp_dropdown-bg-hover !important;
color: @cp_dropdown-fg;
}
&.cp-dropdown-element-active {
background-color: @cp_dropdown-bg-active;
color: @cp_dropdown-fg;
}
&.cp-app-hidden {
display: none;
}
&.cp-app-disabled {
cursor: not-allowed !important;
opacity: 0.5;
}
}
&> span {
box-sizing: border-box;
@ -173,6 +179,9 @@
display: none;
}
}
[role="separator"] + [role="separator"] {
display: none;
}
p {
min-width: 160px;

View file

@ -17,8 +17,9 @@
width: 300px;
display: flex;
flex-flow: column;
padding-left: 0;
& hr {
margin: 0px !important;
margin: 0 !important;
}
.cp-notification {
min-height: @notif-height;
@ -71,10 +72,13 @@
}
}
.cp-notifications-gotoapp {
padding: 0 !important;
justify-content: center !important;
p {
padding: 10px 0 !important;
text-align: center !important;
font-weight: bold;
font-size: 14px !important;
font-weight: bold !important;
cursor: pointer;
&:hover {
background-color: @cp_dropdown-bg-hover;

View file

@ -367,12 +367,14 @@
* {
outline-width: 0;
&:focus {
outline-width: 0;
outline-width: 1rem;
// color shows on chrome/edge, but not firefox
outline-color: grey; // XXX temporary color to change
}
}
box-sizing: border-box;
padding: 0px;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
@ -443,13 +445,6 @@
screen and (max-height: 500px) {
flex-wrap: wrap;
height: @toolbar_line-height;
.cp-pad-not-pinned {
line-height: 32px;
flex: unset;
padding: 0;
align-self: auto;
margin: 0 5px;
}
.cp-toolbar-top-filler {
height: 32px;
}
@ -582,41 +577,6 @@
position: relative;
width: 100%;
.cp-pad-not-pinned {
order: 4;
flex: 1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: @toolbar_top-height;
padding: 0;
margin: 0 5px;
font-size: @colortheme_app-font-size;
color: @cp_toolbar-warn;
.cp-pnp-msg {
padding-left: 5px;
font-family: @colortheme_font;
font-size: @colortheme_app-font-size;
a {
font-size: @colortheme_app-font-size;
font-family: @colortheme_font;
font-weight: bold;
color: @cp_toolbar-warn;
&:hover {
text-decoration: underline;
}
}
@media screen and (max-width: (@browser_media-not-big)) {
display: none;
}
}
@media screen and (max-width: (@browser_media-not-big)) {
overflow: visible;
max-width: 20px;
}
}
.cp-toolbar-top-filler {
height: @toolbar_top-height;
display: inline-block;
@ -795,6 +755,15 @@
}
}
}
.cp-toolbar-notifications {
.cp-notifications-container {
padding: 0 5px;;
li {
margin: 0 -5px;
padding: 0;
}
}
}
.cp-toolbar-link {
display: inline-flex;
align-items: center;
@ -867,7 +836,6 @@
text-align: center;
.cp-dropdown-content {
margin: 0;
padding-bottom: 10px;
}
& > button {
@ -913,14 +881,22 @@
margin-left: 10px;
}
}
p.cp-toolbar-account {
div.cp-toolbar-account {
&> span {
font-weight: bold;
span {
font-weight: normal;
}
}
min-width: 160px;
padding: 5px;
margin: 0;
white-space: normal;
text-align: left;
color: @cryptpad_text_col;
font-size: 14px;
}
.cp-toolbar-backup {
margin: 0;
border-radius: 0;
@ -1265,3 +1241,4 @@
}
}

View file

@ -3447,6 +3447,7 @@ Example
icon = h('span', { class: iconClass });
}
var $category = $(h('div', {
'tabindex': 0,
'class': 'cp-sidebarlayout-category'
}, [
icon,
@ -3456,16 +3457,18 @@ Example
$category.addClass('cp-leftside-active');
}
$category.click(function () {
if (!Array.isArray(categories[key]) && categories[key].onClick) {
categories[key].onClick();
return;
$category.on('click keypress', function (event) {
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
if (!Array.isArray(categories[key]) && categories[key].onClick) {
categories[key].onClick();
return;
}
active = key;
common.setHash(key);
$categories.find('.cp-leftside-active').removeClass('cp-leftside-active');
$category.addClass('cp-leftside-active');
showCategories(categories[key]);
}
active = key;
common.setHash(key);
$categories.find('.cp-leftside-active').removeClass('cp-leftside-active');
$category.addClass('cp-leftside-active');
showCategories(categories[key]);
});
});

View file

@ -767,8 +767,8 @@ define([
options: options, // Entries displayed in the menu
common: common,
buttonCls: 'btn btn-default fa fa-gear small cp-calendar-actions',
ariaLabel: Messages.calendar_settings,
};
buttonTitle: Messages.calendar_settings,
};
return UIElements.createDropdown(dropdownConfig)[0];
};
var makeCalendarEntry = function (id, teamId) {
@ -1270,9 +1270,7 @@ ICS ==> create a new event with the same UID and a RECURRENCE-ID field (with a v
};
var $block = UIElements.createDropdown(dropdownConfig);
$block.setValue(view || 'week');
var $views = $block.find('a');
$views.click(function () {
var mode = $(this).attr('data-value');
$block.onChange.reg((name, mode) => {
cal.changeView(mode);
updateDateRange();
updateRecurring();
@ -1973,9 +1971,7 @@ APP.recurrenceRule = {
var $block = UIElements.createDropdown(dropdownConfig);
$block.setValue('minutes');
var $types = $block.find('a');
$types.click(function () {
var mode = $(this).attr('data-value');
$block.onChange.reg((name, mode) => {
var max = mode === "minutes" ? 60 : 24;
$number.attr('max', max);
if ($number.val() > max) { $number.val(max); }

View file

@ -573,9 +573,7 @@ define([
if (!$blockContainer || !$blockContainer.length) {
var id = '';
if (cfg.id) { id = '#'+cfg.id; }
$blockContainer = $(h('div.cp-modal-container'+id, {
tabindex: 1
}));
$blockContainer = $(h('div.cp-modal-container'+id, {}));
}
var deleted = false;
var hide = function () {
@ -877,6 +875,7 @@ define([
opts = opts || {};
var attributes = merge({
type: 'password',
tabindex: '1',
autocomplete: 'one-time-code', // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
}, opts);

View file

@ -24,18 +24,17 @@ define([
};
Msg.initSelector = function ($select, sfcommon) {
var selector = $select || $('#cp-language-selector');
var $selector = $select || $('#cp-language-selector');
if (!selector.length) { return; }
if (!$selector.length) { return; }
var language = Messages._getLanguage();
// Select the current language in the list
selector.setValue(language || 'en');
$selector.setValue(language || 'en');
// Listen for language change
$(selector).find('a.cp-language-value').on('click', function () {
var newLanguage = $(this).attr('data-value');
$selector.onChange.reg((prettyName, newLanguage) => {
Msg.setLanguage(newLanguage, sfcommon && sfcommon.getSframeChannel(), function () {
if (newLanguage !== language) {
if (sfcommon) {
@ -46,6 +45,7 @@ define([
}
});
});
};
Msg.applyTranslation = function () {

View file

@ -1497,14 +1497,20 @@ define([
if (config.buttonContent) {
$button = $(h('button', {
class: config.buttonCls || '',
'aria-label': config.ariaLabel || '',
'aria-haspopup': 'menu',
'aria-expanded': 'false',
'title': config.buttonTitle || '',
'aria-label': config.buttonTitle || '',
}, [
h('span.cp-dropdown-button-title', config.buttonContent),
]));
} else {
$button = $('<button>', {
'class': config.buttonCls || '',
'aria-label': config.ariaLabel || '',
'aria-haspopup': 'menu',
'aria-expanded': 'false',
'title': config.buttonTitle || '',
'aria-label': config.buttonTitle || '',
}).append($('<span>', {'class': 'cp-dropdown-button-title'}).text(config.text || ""));
}
@ -1521,19 +1527,30 @@ define([
}
// Menu
var $innerblock = $('<div>', {'class': 'cp-dropdown-content'});
var $innerblock = $('<ul>', {'class': 'cp-dropdown-content', 'role': 'menu'});
if (config.left) { $innerblock.addClass('cp-dropdown-left'); }
var hide = function () {
window.setTimeout(function () { $innerblock.hide(); }, 0);
};
// When the menu is collapsed, update aria-expanded
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.attributeName !== 'style') { return; }
if ($innerblock[0].style.display === 'none') {
$button.attr('aria-expanded', 'false');
}
});
});
observer.observe($innerblock[0], { attributes: true });
// Add the dropdown content
var setOptions = function (options) {
options.forEach(function (o) {
if (!isValidOption(o)) { return; }
if (isElement(o)) { return $innerblock.append(o); }
if (isElement(o)) { return void $innerblock.append(o); }
var $el = $(h(o.tag, (o.attributes || {})));
if (typeof(o.content) === 'string' || (o.content instanceof Element)) {
o.content = [o.content];
}
@ -1546,16 +1563,49 @@ define([
$el[0].appendChild(document.createTextNode(item));
}
});
// array of elements or text nodes
}
$el.appendTo($innerblock);
if (typeof(o.action) === 'function') {
$el.click(function (e) {
var close = o.action(e);
if (close) { hide(); }
});
// Everything is added as an "li" tag
// Links and items with action are focusable
// Add correct "role" attribute
var $li = $(h('li'));
if (o.tag === 'a') {
$el.attr('tabindex', '-1');
$li.attr('role', 'menuitem');
$li.attr('tabindex', '0');
} else if (o.tag === 'li') {
$li = $el;
$li.attr('role', 'menuitem');
$li.attr('tabindex', '0');
} else if (o.tag === 'hr') {
$li.attr('role', 'separator');
} else {
$li.attr('role', 'none');
}
$li.append($el);
$li.appendTo($innerblock);
// Action can be triggered with a click or keyboard event
if (o.tag !== 'a' && o.tag !== 'li') { return; }
$li.on('mouseenter', (e) => {
e.stopPropagation();
$li.focus();
});
var onAction = function (e) {
if (config.isSelect) { return; }
if (e.type === 'click' || (e.type === 'keydown' && e.keyCode === 13) || (e.type === 'keydown' && e.keyCode === 32)) {
e.stopPropagation();
if (typeof(o.action) === "function") {
var close = o.action(e);
if (close) { hide(); }
} else {
// Click on <a> with an href
if (e.type === 'keydown'){ $el.get(0).click(); }
}
}
};
$li.on('click keydown', onAction);
});
};
setOptions(config.options);
@ -1572,6 +1622,11 @@ define([
if ($el.length !== 1) { return; }
$innerblock.find('.cp-dropdown-element-active').removeClass('cp-dropdown-element-active');
$el.addClass('cp-dropdown-element-active');
$el.closest('li').focus();
};
var setFocus = function ($el) {
if ($el.length !== 1) { return; }
$el.focus();
var scroll = $el.position().top + $innerblock.scrollTop();
if (scroll < $innerblock.scrollTop()) {
$innerblock.scrollTop(scroll);
@ -1584,6 +1639,7 @@ define([
var wh = $(window).height();
var button = $button[0].getBoundingClientRect();
var topPos = button.bottom;
$button.attr('aria-expanded', 'true');
$innerblock.css('bottom', '');
if (config.noscroll) {
var h = $innerblock.outerHeight();
@ -1595,15 +1651,19 @@ define([
}
$innerblock.show();
$innerblock.find('.cp-dropdown-element-active').removeClass('cp-dropdown-element-active');
if (config.isSelect && value) {
// We use JSON.stringify here to escape quotes
if (typeof(value) === "object") { value = JSON.stringify(value); }
var $val = $innerblock.find('[data-value='+JSON.stringify(value)+']');
setActive($val);
try {
$innerblock.scrollTop($val.position().top + $innerblock.scrollTop());
} catch (e) {}
}
setTimeout(() => {
if (config.isSelect && value) {
// We use JSON.stringify here to escape quotes
if (typeof(value) === "object") { value = JSON.stringify(value); }
var $val = $innerblock.find('[data-value='+JSON.stringify(value)+']');
setActive($val);
try {
$innerblock.scrollTop($val.position().top + $innerblock.scrollTop());
} catch (e) {}
} else {
setFocus($innerblock.find('[role="menuitem"]').first());
}
});
if (config.feedback) { Feedback.send(config.feedback); }
};
@ -1614,7 +1674,9 @@ define([
var $c = $container.closest('.cp-toolbar-drawer-content');
$c.removeClass('cp-dropdown-visible');
if (!state) { $c.addClass('cp-dropdown-visible'); }
if (!state) {
$c.addClass('cp-dropdown-visible');
}
try {
$('iframe').each(function (idx, ifrw) {
@ -1631,71 +1693,14 @@ define([
});
if (config.isSelect) {
var pressed = '';
var to;
$container.onChange = Util.mkEvent();
$container.on('click', 'a', function () {
value = $(this).data('value');
var $val = $(this);
$container.on('click', 'li', function () {
var $val = $(this).find('a');
value = $val.data('value');
var textValue = $val.text() || value;
$button.find('.cp-dropdown-button-title').text(textValue);
$container.onChange.fire(textValue, value);
});
$container.keydown(function (e) {
var $value = $innerblock.find('[data-value].cp-dropdown-element-active:visible');
if (!$value.length) {
$value = $innerblock.find('[data-value]').first();
}
if (e.which === 38) { // Up
e.preventDefault();
e.stopPropagation();
if ($value.length) {
$value.mouseleave();
var $prev = $value.prev();
$prev.mouseenter();
setActive($prev);
}
}
if (e.which === 40) { // Down
e.preventDefault();
e.stopPropagation();
if ($value.length) {
$value.mouseleave();
var $next = $value.next();
$next.mouseenter();
setActive($next);
}
}
if (e.which === 13) { //Enter
e.preventDefault();
e.stopPropagation();
if ($value.length) {
$value.click();
hide();
}
}
if (e.which === 27) { // Esc
e.preventDefault();
e.stopPropagation();
$value.mouseleave();
hide();
}
});
$container.keypress(function (e) {
window.clearTimeout(to);
var c = String.fromCharCode(e.which);
pressed += c;
// We use JSON.stringify here to escape quotes
var $value = $innerblock.find('[data-value^='+JSON.stringify(pressed)+']:first');
if ($value.length) {
setActive($value);
$innerblock.scrollTop($value.position().top + $innerblock.scrollTop());
}
to = window.setTimeout(function () {
pressed = '';
}, 1000);
});
$container.setValue = function (val, name, sync) {
value = val;
// We use JSON.stringify here to escape quotes
@ -1713,6 +1718,130 @@ define([
};
}
var pressed = '';
var to;
var findItem = function () {
var $value = $();
$innerblock.find('[role="menuitem"]').each((i, el) => {
var $el = $(el);
var $item = $el.find('> *');
if ($item.length && !$item.is(':visible')) { return false; }
var text = $el.text().toLowerCase();
var p = pressed.toLowerCase();
if (text.indexOf(p) === 0) {
$value = $el;
return false;
}
});
return $value;
};
var getAll = () => {
return $innerblock.find('[role="menuitem"]').filter((i, el) => {
var $item = $(el).find('> *');
return !$item.length || $item.is(':visible');
});
};
var getPrev = ($el) => {
var $all = getAll();
if (!$all.length) { return $(); }
var idx = $all.index($el[0]);
if (idx === -1) { return $(); }
var prev = (idx - 1 + $all.length) % $all.length;
return $($all.get(prev));
};
var getNext = ($el) => {
var $all = getAll();
if (!$all.length) { return $(); }
var idx = $all.index($el[0]);
if (idx === -1) { return $(); }
var next = (idx + 1) % $all.length;
return $($all.get(next));
};
$container.keydown(function (e) {
e.stopPropagation(); // don't propagate event to window if the dropdown is focused
var visible = $innerblock.is(':visible');
var $value = $innerblock.find('li:focus');
if (!visible && [38,40].includes(e.which) && !config.isSelect) {
$container.click();
visible = true;
}
if (!visible) { return; }
if (e.which === 38) { // Up
e.preventDefault();
var $prev;
if (!$value.length) {
$prev = getAll().last();
} else {
$prev = getPrev($value);
}
$value.mouseleave();
$prev.mouseenter();
setTimeout(() => {
setFocus($prev);
});
}
if (e.which === 40) { // Down
e.preventDefault();
var $next;
if (!$value.length) {
$next = getAll().first();
} else {
$next = getNext($value);
}
$value.mouseleave();
$next.mouseenter();
setTimeout(() => {
setFocus($next);
});
}
if (e.which === 13 || e.which === 32) { //Enter or space
e.preventDefault();
if ($value.length) {
$value.click();
hide();
$button.focus();
} else {
setFocus(getAll().first());
}
}
if (e.which === 27) { // Esc
e.preventDefault();
$value.mouseleave();
hide();
$button.focus();
}
if (e.which === 9) { // Tab
hide();
if (e.shiftKey) {
$button.focus();
} else {
$innerblock.find('[role="menuitem"]').last().focus();
}
}
});
$container.keypress(function (e) {
e.stopPropagation(); // Don't propagate to window
window.clearTimeout(to);
var c = String.fromCharCode(e.which);
pressed += c;
// We use JSON.stringify here to escape quotes
var $value;
if (config.isSelect) {
$value = $innerblock.find('[data-value^='+JSON.stringify(pressed)+']:first').closest('li');
} else {
$value = findItem();
}
if ($value.length) {
setFocus($value);
$innerblock.scrollTop($value.position().top + $innerblock.scrollTop());
}
to = window.setTimeout(function () {
pressed = '';
}, 1000);
});
return $container;
};
@ -1825,7 +1954,7 @@ define([
]));
}
options.push({
tag: 'p',
tag: 'div',
attributes: {'class': 'cp-toolbar-account'},
content: userAdminContent,
});
@ -1849,7 +1978,7 @@ define([
options.push({
tag: 'a',
attributes: {
'class': 'fa fa-hdd-o'
'class': 'fa fa-hdd-o',
},
content: h('span', Messages.type.drive),
action: function () {
@ -1861,7 +1990,7 @@ define([
options.push({
tag: 'a',
attributes: {
'class': 'fa fa-users'
'class': 'fa fa-users',
},
content: h('span', Messages.type.teams),
action: function () {
@ -1885,7 +2014,7 @@ define([
options.push({
tag: 'a',
attributes: {
'class': 'fa fa-address-book'
'class': 'fa fa-address-book',
},
content: h('span', Messages.type.contacts),
action: function () {
@ -1930,7 +2059,7 @@ define([
'target': '_blank',
'rel': 'noopener',
'href': 'https://docs.cryptpad.org',
'class': 'fa fa-book'
'class': 'fa fa-book',
},
content: h('span', Messages.docs_link)
});
@ -1963,7 +2092,7 @@ define([
options.push({
tag: 'a',
attributes: {
'class': 'fa fa-home'
'class': 'fa fa-home',
},
content: h('span', Messages.homePage),
action: function () {
@ -2004,7 +2133,7 @@ define([
options.push({
tag: 'a',
attributes: {
'class': 'fa fa-gift'
'class': 'fa fa-gift',
},
content: h('span', Messages.crowdfunding_button2),
action: function () {
@ -2101,6 +2230,7 @@ define([
options: options, // Entries displayed in the menu
left: true, // Open to the left of the button
container: config.$initBlock, // optional
buttonTitle: config.buttonTitle,
feedback: "USER_ADMIN",
common: Common
};

View file

@ -646,7 +646,7 @@ define([
var $trashTreeContextMenu = $("#cp-app-drive-context-trashtree");
var $trashContextMenu = $("#cp-app-drive-context-trash");
$content.attr("tabindex", "0");
var splitter = h('div.cp-splitter', [
h('i.fa.fa-ellipsis-v')
]);
@ -2814,7 +2814,7 @@ define([
var content = h('div', [
h('h4', Messages.sharedFolders_create),
h('label', {for: 'cp-app-drive-sf-name'}, Messages.sharedFolders_create_name),
h('input#cp-app-drive-sf-name', {type: 'text', placeholder: Messages.fm_newFolder}),
h('input#cp-app-drive-sf-name', {type: 'text', placeholder: Messages.fm_newFolder,tabindex:'1'}),
h('label', {for: 'cp-app-drive-sf-password'}, Messages.fm_shareFolderPassword),
UI.passwordInput({id: 'cp-app-drive-sf-password'}),
h('span', {
@ -2884,9 +2884,9 @@ define([
]);
var content = h('p', [
h('label', {for: 'cp-app-drive-link-name'}, Messages.fm_link_name),
name = h('input#cp-app-drive-link-name', { autocomplete: 'off', placeholder: Messages.fm_link_name_placeholder }),
name = h('input#cp-app-drive-link-name', { autocomplete: 'off', placeholder: Messages.fm_link_name_placeholder, tabindex:'1'}),
h('label', {for: 'cp-app-drive-link-url'}, Messages.fm_link_url),
url = h('input#cp-app-drive-link-url', { type: 'url', autocomplete: 'off', placeholder: Messages.form_input_ph_url }),
url = h('input#cp-app-drive-link-url', { type: 'url', autocomplete: 'off', placeholder: Messages.form_input_ph_url,tabindex:'1'}),
warning,
]);
@ -2959,29 +2959,56 @@ define([
refresh();
};
$block.find('a.cp-app-drive-new-folder, li.cp-app-drive-new-folder')
.click(function () {
manager.addFolder(currentPath, null, onCreated);
});
.on('click keypress', function (event) {
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
event.preventDefault();
manager.addFolder(currentPath, null, onCreated);
}
});
if (!APP.disableSF && !manager.isInSharedFolder(currentPath)) {
$block.find('a.cp-app-drive-new-shared-folder, li.cp-app-drive-new-shared-folder')
.click(function () {
addSharedFolderModal(function (obj) {
if (!obj) { return; }
manager.addSharedFolder(currentPath, obj, refresh);
.on('click keypress', function (event) {
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
event.preventDefault();
addSharedFolderModal(function (obj) {
if (!obj) { return; }
manager.addSharedFolder(currentPath, obj, refresh);
});
}
});
});
}
$block.find('a.cp-app-drive-new-fileupload, li.cp-app-drive-new-fileupload').click(showUploadFilesModal);
$block.find('a.cp-app-drive-new-folderupload, li.cp-app-drive-new-folderupload').click(showUploadFolderModal);
$block.find('a.cp-app-drive-new-link, li.cp-app-drive-new-link').click(showLinkModal);
$block.find('a.cp-app-drive-new-fileupload, li.cp-app-drive-new-fileupload')
.on('click keypress', function (event) {
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
event.preventDefault();
showUploadFilesModal();
}
});
$block.find('a.cp-app-drive-new-folderupload, li.cp-app-drive-new-folderupload')
.on('click keypress', function (event) {
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
event.preventDefault();
showUploadFolderModal();
}
});
$block.find('a.cp-app-drive-new-link, li.cp-app-drive-new-link')
.on('click keypress', function (event) {
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
event.preventDefault();
showLinkModal();
}
});
}
$block.find('a.cp-app-drive-new-doc, li.cp-app-drive-new-doc')
.on('click auxclick', function (e) {
e.preventDefault();
var type = $(this).attr('data-type') || 'pad';
var path = manager.isPathIn(currentPath, [TRASH]) ? '' : currentPath;
openIn(type, path, APP.team);
});
.on('click auxclick keypress', function (event) {
if (event.type === 'click' || event.type === 'auxclick' || (event.type === 'keypress' && event.which === 13))
{
event.preventDefault();
var type = $(this).attr('data-type') || 'pad';
var path = manager.isPathIn(currentPath, [TRASH]) ? '' : currentPath;
openIn(type, path, APP.team);
}
});
};
var getNewPadOptions = function (isInRoot) {
var options = [];
@ -3064,18 +3091,24 @@ define([
// Create dropdown
var options = getNewPadOptions(isInRoot).map(function (obj) {
if (obj.separator) { return { tag: 'hr' }; }
if (obj.separator) {
return { tag: 'hr', };
}
var newObj = {
tag: 'a',
attributes: { 'class': obj.class },
content: [ obj.icon, obj.name ]
attributes: { 'class': obj.class, href: '#' },
content: [obj.icon, obj.name]
};
if (obj.type) {
newObj.attributes['data-type'] = obj.type;
newObj.attributes['href'] = APP.origin + Hash.hashToHref('', obj.type);
}
return newObj;
});
var dropdownConfig = {
buttonContent: [
h('i.fa.fa-plus'),
@ -3089,13 +3122,13 @@ define([
var $block = UIElements.createDropdown(dropdownConfig);
// Custom style:
$block.find('button').addClass('cp-app-drive-toolbar-new');
// actions for +New menu button
var menuButton = $block.find('button');
menuButton.addClass('cp-app-drive-toolbar-new');
addNewPadHandlers($block, isInRoot);
$container.append($block);
};
var createFilterButton = function (isTemplate, $container) {
if (!APP.loggedIn) { return; }
@ -3106,6 +3139,7 @@ define([
tag: 'a',
attributes: {
'class': 'cp-app-drive-rm-filter',
'href': '#'
},
content: [
h('i.fa.fa-times'),
@ -3133,7 +3167,7 @@ define([
attributes: attributes,
content: [
getIcon(type)[0],
Messages.type[type],
Messages.type[type]
],
});
});
@ -3143,11 +3177,12 @@ define([
tag: 'a',
attributes: {
'class': 'cp-app-drive-filter-doc',
'data-type': 'link'
'data-type': 'link',
'href': '#'
},
content: [
getIcon('link')[0],
Messages.fm_link_type,
Messages.fm_link_type
],
});
options.push({
@ -3159,7 +3194,7 @@ define([
},
content: [
getIcon('file')[0],
Messages.type['file'],
Messages.type['file']
],
});
}
@ -3277,6 +3312,7 @@ define([
h('i.fa.fa-minus'),
Messages.fm_type,
],
action: function (e) { onSortByClick.call($(e.target).find('a')[0]); }
},{
tag: 'a',
attributes: {'class': 'cp-app-drive-element-atime'},
@ -3284,6 +3320,7 @@ define([
h('i.fa.fa-minus'),
Messages.fm_lastAccess,
],
action: function (e) { onSortByClick.call($(e.target).find('a')[0]); }
},{
tag: 'a',
attributes: {'class': 'cp-app-drive-element-ctime'},
@ -3291,6 +3328,7 @@ define([
h('i.fa.fa-minus'),
Messages.fm_creation,
],
action: function (e) { onSortByClick.call($(e.target).find('a')[0]); }
}];
var dropdownConfig = {
text: '', // Button initial text
@ -3302,7 +3340,6 @@ define([
};
var $sortBlock = UIElements.createDropdown(dropdownConfig);
$sortBlock.find('button').append(h('span.fa.fa-sort-amount-desc')).append(h('span', Messages.fm_sort));
$sortBlock.on('click', 'a', onSortByClick);
return $fhSort;
};
var getFolderListHeader = function (clickable, small) {
@ -3482,16 +3519,16 @@ define([
// Create the ghost icon to add pads/folders
var createNewPadIcons = function ($block, isInRoot) {
var $container = $('<div>');
var $container = $('<ul>');
getNewPadOptions(isInRoot).forEach(function (obj) {
if (obj.separator) { return; }
var $element = $('<li>', {
'class': obj.class + ' cp-app-drive-element-row ' +
'cp-app-drive-element-grid'
'cp-app-drive-element-grid',
'tabindex': 1
}).prepend(obj.icon).appendTo($container);
$element.append($('<span>', { 'class': 'cp-app-drive-new-name' })
.text(obj.name));
$element.append($('<span>', { 'class': 'cp-app-drive-new-name' }).text(obj.name));
if (obj.type) {
$element.attr('data-type', obj.type);
@ -4318,9 +4355,12 @@ define([
$icon.css("color", isSharedFolder ? getFolderColor(path.slice(0, -1)) : getFolderColor(path));
var $collapse;
if (collapsable) {
$collapse = $expandIcon.clone();
$collapse = $expandIcon.clone().attr('tabindex', 0);
}
var $elementRow = $('<span>', {'class': 'cp-app-drive-element-row'}).append($collapse).append($icon).append($name).click(function (e) {
var $elementRow = $('<span>', {'class': 'cp-app-drive-element-row', 'tabindex': 0}).append($collapse).append($icon).append($name).on('click keypress', function (e) {
if (e.type === 'keypress' && e.which !== 13) {
return;
}
e.stopPropagation();
if (isSharedFolder && !manager.folders[isSharedFolder]) {
UI.warn(Messages.fm_deletedFolder);
@ -4343,7 +4383,10 @@ define([
if (draggable) { $elementRow.attr('draggable', true); }
if (collapsable) {
$element.addClass('cp-app-drive-element-collapsed');
$collapse.click(function(e) {
$collapse.on('click keypress', function(e) {
if (e.type === 'keypress' && e.which !== 13) {
return;
}
e.stopPropagation();
if ($element.hasClass('cp-app-drive-element-collapsed')) {
// It is closed, open it

View file

@ -74,7 +74,7 @@ define([
h('div.cp-app-contacts-category-content')
]),
h('div.cp-app-contacts-friends.cp-app-contacts-category', [
h('button.cp-app-contacts-muted-button',[
h('button.cp-app-contacts-muted-button', {tabindex:0},[
h('i.fa.fa-bell-slash'),
Messages.contacts_manageMuted
]),
@ -520,6 +520,7 @@ define([
markup.room = function (id, room, userlist) {
var roomEl = h('div.cp-app-contacts-friend.cp-avatar', {
'tabindex': '0',
'data-key': id,
'data-user': room.isFriendChat ? userlist[0].curvePublic : '',
});
@ -561,8 +562,10 @@ define([
var friendData = room.isFriendChat ? userlist[0] : {};
var $room = $(roomEl).click(function () {
display(id);
var $room = $(roomEl).on('click keypress', function (event) {
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
display(id);
}
}).dblclick(function () {
if (friendData.profile) { window.open(origin + '/profile/#' + friendData.profile); }
});

View file

@ -757,6 +757,7 @@ define([
Util.fixFileName(suggestion), function (filename)
{
if (!(typeof(filename) === 'string' && filename)) { return; }
console.error(filename);
var ext = $select.getValue();
filename = filename + ext;
if (async) {

View file

@ -373,10 +373,10 @@ define([
$block.find('button').attr('title', Messages.languageButtonTitle);
var isHovering = false;
var $aLanguages = $block.find('a');
var $aLanguages = $block.find('li');
$aLanguages.mouseenter(function () {
isHovering = true;
setMode($(this).attr('data-value'));
setMode($(this).find('a').attr('data-value'));
});
$aLanguages.mouseleave(function () {
if (isHovering) {
@ -385,7 +385,7 @@ define([
});
$aLanguages.click(function () {
isHovering = false;
var mode = $(this).attr('data-value');
var mode = $(this).find('a').attr('data-value');
setMode(mode, onModeChanged);
onLocal();
});
@ -435,10 +435,10 @@ define([
setTheme(lastTheme, $block);
var isHovering = false;
var $aThemes = $block.find('a');
var $aThemes = $block.find('li');
$aThemes.mouseenter(function () {
isHovering = true;
var theme = $(this).attr('data-value');
var theme = $(this).find('a').attr('data-value');
setTheme(theme, $block);
});
$aThemes.mouseleave(function () {
@ -449,7 +449,7 @@ define([
});
$aThemes.click(function () {
isHovering = false;
var theme = $(this).attr('data-value');
var theme = $(this).find('a').attr('data-value');
setTheme(theme, $block);
Common.setAttribute(themeKey, theme);
});

View file

@ -89,13 +89,19 @@ define([
});
}
var order = -Math.floor((Util.find(data, ['content', 'msg', 'ctime']) || 0) / 1000);
notif = h('div.cp-notification', {
const tabIndexValue = undefined;//data.content.isDismissible ? undefined : '0';
notif = h('li.cp-notification', {
role: 'menuitem',
tabindex: '0',
style: 'order:'+order+';',
'data-hash': data.content.hash
}, [
avatar,
h('div.cp-notification-content',
h('p', formatData(data)))
h('div.cp-notification-content', {
tabindex: tabIndexValue
}, [
h('p', formatData(data))
])
]);
if (typeof(data.content.getFormatText) === "function") {
@ -111,17 +117,29 @@ define([
}
}
$(notif).mouseenter((e) => {
e.stopPropagation();
$(notif).focus();
});
if (data.content.isClickable) {
$(notif).find('.cp-notification-content').addClass("cp-clickable")
.click(data.content.handler);
$(notif).find('.cp-notification-content').addClass("cp-clickable").on('click keypress', function (event) {
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
data.content.handler();
}
});
}
if (data.content.isDismissible) {
var dismissIcon = h('span.fa.fa-times');
var dismiss = h('div.cp-notification-dismiss', {
title: Messages.notifications_dismiss
title: Messages.notifications_dismiss,
}, dismissIcon);
$(dismiss).addClass("cp-clickable")
.click(data.content.dismissHandler);
.on('click keypress', function (event) {
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
data.content.dismissHandler();
}
});
$(notif).append(dismiss);
}
return notif;

View file

@ -65,6 +65,51 @@ MessengerUI, Messages, Pages) {
return 'cp-toolbar-uid-' + String(Math.random()).substring(2);
};
var observeChildren = function ($content) {
var reorderDOM = Util.throttle(function ($content, observer) {
if (!$content.length) { return; }
// List all children based on their "order" property
var map = {};
$content[0].childNodes.forEach((node) => {
try {
if (!node.attributes) { return; }
var order = getComputedStyle(node).getPropertyValue("order");
var a = map[order] = map[order] || [];
a.push(node);
} catch (e) { console.error(e, node); }
});
// Disconnect the observer while we're reordering to avoid infinite loop
observer.disconnect();
Object.keys(map).sort(function (a, b) {
return Number(a) - Number(b);
}).forEach(function (k) {
var arr = map[k];
if (!Number(k)) { return; } // No need to "append" if order is 0
// Reorder
arr.forEach(function (node) {
$content.append(node);
});
});
observer.start();
}, 100);
let observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
reorderDOM($content, observer);
}
});
});
observer.start = function () {
observer.observe($content[0], {
childList: true
});
};
observer.start();
};
var createRealtimeToolbar = function (config) {
if (!config.$container) { return; }
var $container = config.$container;
@ -107,10 +152,7 @@ MessengerUI, Messages, Pages) {
h('i.fa.fa-file-o'),
h('span.cp-button-name', Messages.toolbar_file)
])).appendTo($file).hide();
var $drawerContent = $('<div>', {
'class': DRAWER_CLS,
'tabindex': 1
}).hide();
var $drawerContent = $(h('div.'+ DRAWER_CLS, {tabindex: 1})).hide();
UI.createDrawer($drawer, $drawerContent);
}
@ -684,7 +726,8 @@ MessengerUI, Messages, Pages) {
// Buttons
var $text = $('<span>', {
'class': 'cp-toolbar-title-value'
'class': 'cp-toolbar-title-value',
tabindex: 0
}).appendTo($hoverable);
var $pencilIcon = $('<span>', {
'class': 'cp-toolbar-title-edit',
@ -703,7 +746,7 @@ MessengerUI, Messages, Pages) {
.text('('+Messages.readonly+')'));
var $input = $('<input>', {
type: 'text',
placeholder: placeholder
placeholder: placeholder,
}).appendTo($hoverable).hide();
if (config.readOnly !== 1) {
$text.attr("title", Messages.clickToEdit);
@ -775,63 +818,19 @@ MessengerUI, Messages, Pages) {
$pencilIcon.hide();
$saveIcon.show();
};
$text.on('click', displayInput);
$pencilIcon.on('click', displayInput);
$text.on('click keypress', function (event) {
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
displayInput();
}
});
$pencilIcon.on('click keypress', function (event) {
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
displayInput();
}
});
return $titleContainer;
};
var createUnpinnedWarning0 = function (toolbar, config) {
if (true) { return; } // stub this call since it won't make it into the next release
if (Common.isLoggedIn()) { return; }
var pd = config.metadataMgr.getPrivateData();
var o = pd.origin;
var cid = pd.channel;
Common.sendAnonRpcMsg('IS_CHANNEL_PINNED', cid, function (x) {
if (x.error || !Array.isArray(x.response)) { return void console.log(x); }
if (x.response[0] === true) {
$('.cp-pad-not-pinned').remove();
return;
}
if (typeof(ApiConfig.inactiveTime) !== 'number') {
$('.cp-pad-not-pinned').remove();
return;
}
if ($('.cp-pad-not-pinned').length) { return; }
var pnpTitle = Messages._getKey('padNotPinnedVariable', ['','','','', ApiConfig.inactiveTime]);
var pnpMsg = Messages._getKey('padNotPinnedVariable', [
'<a href="' + o + '/login" class="cp-pnp-login" target="blank" title>',
'</a>',
'<a href="' + o + '/register" class="cp-pnp-register" target="blank" title>',
'</a>',
ApiConfig.inactiveTime
]);
var $msg = $('<span>', {
'class': 'cp-pad-not-pinned'
}).append([
$('<span>', {'class': 'fa fa-exclamation-triangle', 'title': pnpTitle}),
$('<span>', {'class': 'cp-pnp-msg'}).append(pnpMsg)
]);
$msg.find('a.cp-pnp-login').click(function (ev) {
ev.preventDefault();
Common.setLoginRedirect('login');
});
$msg.find('a.cp-pnp-register').click(function (ev) {
ev.preventDefault();
Common.setLoginRedirect('register');
});
$('.cp-toolbar-top').append($msg);
//UI.addTooltips();
});
};
var createUnpinnedWarning = function (toolbar, config) {
config.metadataMgr.onChange(function () {
createUnpinnedWarning0(toolbar, config);
});
createUnpinnedWarning0(toolbar, config);
};
var createPageTitle = function (toolbar, config) {
if (!config.pageTitle) { return; }
@ -844,9 +843,13 @@ MessengerUI, Messages, Pages) {
var $hoverable = $('<span>', {'class': 'cp-toolbar-title-hoverable'}).appendTo($titleContainer);
// Buttons
$('<span>', {
var $b = $('<span>', {
'class': 'cp-toolbar-title-value cp-toolbar-title-value-page'
}).appendTo($hoverable).text(config.pageTitle);
toolbar.updatePageTitle = function (title) {
$b.text(title);
};
};
var createLinkToMain = function (toolbar, config) {
@ -870,7 +873,8 @@ MessengerUI, Messages, Pages) {
href: href,
title: buttonTitle,
'class': "cp-toolbar-link-logo",
'aria-label': buttonTitle,
'role': 'button',
'aria-label': buttonTitle
}).append(UI.getIcon(privateData.app));
var onClick = function (e) {
@ -1008,6 +1012,7 @@ MessengerUI, Messages, Pages) {
var $userAdmin = toolbar.$userAdmin.find('.'+USERADMIN_CLS).show();
var userMenuCfg = {
$initBlock: $userAdmin,
buttonTitle: Messages.userAccountButton,
};
if (!config.hideDisplayName) {
$.extend(true, userMenuCfg, {
@ -1020,12 +1025,6 @@ MessengerUI, Messages, Pages) {
userMenuCfg.displayChangeName = 1;
}
Common.createUserAdminMenu(userMenuCfg);
$userAdmin.find('> button').attr({
title: Messages.userAccountButton,
alt: Messages.userAccountButton,
'aria-label': Messages.userAccountButton,
});
return $userAdmin;
};
@ -1079,44 +1078,59 @@ MessengerUI, Messages, Pages) {
var createNotifications = function (toolbar, config) {
var $notif = toolbar.$top.find('.'+NOTIFICATIONS_CLS).show();
var openNotifsApp = h('div.cp-notifications-gotoapp', h('p', Messages.openNotificationsApp || "Open notifications App"));
$(openNotifsApp).click(function () {
Common.openURL("/notifications/");
});
var div = h('div.cp-notifications-container', [
h('div.cp-notifications-empty', Messages.notifications_empty)
]);
var pads_options = [div];
var options = [];
if (Common.isLoggedIn()) {
options.push({
tag: 'a',
attributes: { 'class':'cp-notifications-gotoapp' },
content: h('p', Messages.openNotificationsApp),
action: () => {
Common.openURL("/notifications/");
}
});
options.push({ tag: 'hr' });
}
var metadataMgr = config.metadataMgr;
var privateData = metadataMgr.getPrivateData();
if (!privateData.notifications) {
var allowNotif = h('div.cp-notifications-gotoapp', h('p', Messages.allowNotifications));
pads_options.unshift(h("hr"));
pads_options.unshift(allowNotif);
var $allow = $(allowNotif).click(function () {
Common.getSframeChannel().event('Q_ASK_NOTIFICATION', null, function (e, allow) {
if (!allow) { return; }
$(allowNotif).remove();
});
options.push({
tag: 'a',
attributes: { 'class':'cp-notifications-gotoapp cp-notifications-allow' },
content: h('p', Messages.allowNotifications),
action: function (ev) {
Common.getSframeChannel().query('Q_ASK_NOTIFICATION', null, function (e, allow) {
console.error(e, allow);
if (!allow) { return; }
$(ev.target).closest('li').remove();
});
}
});
options.push({ tag: 'hr' });
var onChange = function () {
var privateData = metadataMgr.getPrivateData();
if (!privateData.notifications) { return; }
$allow.remove();
$('.cp-notifications-allow').closest('li').remove();
metadataMgr.off('change', onChange);
};
metadataMgr.onChange(onChange);
}
var div = h('ul.cp-notifications-container', [
h('li.cp-notifications-empty', Messages.notifications_empty)
]);
options.push({
tag: 'div',
content: div
});
if (Common.isLoggedIn()) {
pads_options.unshift(h("hr"));
pads_options.unshift(openNotifsApp);
}
var dropdownConfig = {
text: '', // Button initial text
options: pads_options, // Entries displayed in the menu
options: options, // Entries displayed in the menu
container: $notif,
left: true,
common: Common
@ -1124,11 +1138,21 @@ MessengerUI, Messages, Pages) {
var $newPadBlock = UIElements.createDropdown(dropdownConfig);
var $button = $newPadBlock.find('button');
$button.attr('title', Messages.notificationsPage);
$button.attr('aria-haspopup', 'menu');
$button.attr("aria-expanded", "false");
$button.click(function() {
if ($button.attr("aria-expanded") === "true") {
$button.attr("aria-expanded", "false");
} else {
$button.attr("aria-expanded", "true");
}
});
$button.addClass('fa fa-bell-o cp-notifications-bell');
$button.addClass('fa fa-bell-o cp-notifications-bell');
$button.attr('aria-label', Messages.notificationsPage);
var $n = $button.find('.cp-dropdown-button-title').hide();
var $empty = $(div).find('.cp-notifications-empty');
observeChildren($(div));
var refresh = function () {
updateUserList(toolbar, config);
@ -1157,6 +1181,14 @@ MessengerUI, Messages, Pages) {
if (el) {
$(div).prepend(el);
}
$(el).on('keydown', function (e) {
if (![13,32,46].includes(e.which)) { return; }
e.stopPropagation();
if (e.which === 46) {
return $(el).find('.cp-notification-dismiss').click();
}
$(el).find('.cp-notification-content').click();
});
refresh();
},
onViewed: function () {
@ -1335,6 +1367,17 @@ MessengerUI, Messages, Pages) {
toolbar.$drawer = $toolbar.find('.'+Bar.constants.drawer);
toolbar.$top = $toolbar.find('.'+Bar.constants.top);
toolbar.$history = $toolbar.find('.'+Bar.constants.history);
toolbar.$user = $toolbar.find('.'+Bar.constants.userAdmin);
observeChildren(toolbar.$drawer);
observeChildren(toolbar.$bottomL);
observeChildren(toolbar.$bottomM);
observeChildren(toolbar.$bottomR);
observeChildren(toolbar.$top);
observeChildren(toolbar.$user);
if (config.$contentContainer) {
observeChildren(config.$contentContainer);
}
toolbar.$userAdmin = $toolbar.find('.'+Bar.constants.userAdmin);
@ -1349,14 +1392,10 @@ MessengerUI, Messages, Pages) {
tb['title'] = createTitle;
tb['pageTitle'] = createPageTitle;
//tb['request'] = createRequest;
tb['lag'] = $.noop;
tb['spinner'] = createSpinner;
tb['state'] = $.noop;
tb['limit'] = createLimit; // TODO
tb['upgrade'] = $.noop;
tb['newpad'] = createNewPad;
tb['useradmin'] = createUserAdmin;
tb['unpinnedWarning'] = createUnpinnedWarning;
tb['notifications'] = createNotifications;
tb['maintenance'] = createMaintenance;
@ -1366,7 +1405,7 @@ MessengerUI, Messages, Pages) {
'chat',
'collapse',
'userlist', 'title', 'useradmin', 'spinner',
'newpad', 'share', 'access', 'limit', 'unpinnedWarning',
'newpad', 'share', 'access', 'limit',
'notifications'
], {});
};

View file

@ -59,7 +59,7 @@ define([
}
var Title = common.createTitle({});
var displayed = ['useradmin', 'newpad', 'limit', 'upgrade', 'notifications'];
var displayed = ['useradmin', 'newpad', 'limit', 'upgrade', 'notifications', 'pageTitle'];
if (!uploadMode) {
displayed.push('fileshare');
displayed.push('access');
@ -68,12 +68,9 @@ define([
displayed: displayed,
$container: $bar,
metadataMgr: metadataMgr,
pageTitle: Messages.upload_title,
sfCommon: common,
};
if (uploadMode) {
displayed.push('pageTitle');
configTb.pageTitle = Messages.upload_title;
}
var toolbar = APP.toolbar = Toolbar.create(configTb);
if (!uploadMode) {
@ -140,10 +137,9 @@ define([
common.setPadAttribute('fileType', metadata.type);
}
toolbar.addElement(['pageTitle'], {
pageTitle: title,
title: Title.getTitleConfig(),
});
if (toolbar.updatePageTitle) {
toolbar.updatePageTitle(title);
}
toolbar.$drawer.append(common.createButton('forget', true));
toolbar.$drawer.append(common.createButton('properties', true));
if (common.isLoggedIn()) {

View file

@ -71,7 +71,7 @@ define([
var notifsPanel, notifsList, dismissAll;
notifsPanel = h("div.cp-app-notifications-panel", [
h('div.cp-app-notifications-panel-titlebar', [
h("span.cp-app-notifications-panel-title",
h("h5.cp-app-notifications-panel-title",
(Messages.notificationsPage || "Notifications") + " - " + categoryName),
h("div.cp-app-notifications-panel-titlebar-buttons", [
dismissAll = h("div.cp-app-notifications-dismissall.cp-clickable", { title: Messages.notifications_dismissAll || "Dismiss All" }, h("span.fa.fa-trash")),

View file

@ -2189,6 +2189,7 @@ define([
}
var $category = $(h('div.cp-sidebarlayout-category', {
'tabindex': 0,
'data-category': key
}, [
icon,
@ -2200,16 +2201,18 @@ define([
$category.addClass('cp-leftside-active');
}
$category.click(function() {
if (!Array.isArray(categories[key]) && categories[key].onClick) {
categories[key].onClick();
return;
$category.on('click keypress', function (event) {
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
if (!Array.isArray(categories[key]) && categories[key].onClick) {
categories[key].onClick();
return;
}
active = key;
common.setHash(key);
$categories.find('.cp-leftside-active').removeClass('cp-leftside-active');
$category.addClass('cp-leftside-active');
showCategories(categories[key]);
}
active = key;
common.setHash(key);
$categories.find('.cp-leftside-active').removeClass('cp-leftside-active');
$category.addClass('cp-leftside-active');
showCategories(categories[key]);
});
});
showCategories(categories[active]);

View file

@ -241,7 +241,7 @@ define([
Object.keys(categories).forEach(function (key) {
if (key === 'admin' && !teamAdmin) { return; }
var $category = $('<div>', {'class': 'cp-sidebarlayout-category cp-team-cat-'+key}).appendTo($categories);
var $category = $('<div>', {'class': 'cp-sidebarlayout-category cp-team-cat-'+key, 'tabindex': 0}).appendTo($categories);
if (key === 'general') { $category.append($('<span>', {'class': 'fa fa-info-circle'})); }
if (key === 'list') { $category.append($('<span>', {'class': 'fa fa-list cp-team-cat-list'})); }
if (key === 'create') { $category.append($('<span>', {'class': 'fa fa-plus-circle'})); }
@ -256,7 +256,8 @@ define([
$category.addClass('cp-leftside-active');
}
$category.click(function () {
$category.on('click keypress', function (event) {
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
if (!Array.isArray(categories[key]) && categories[key].onClick) {
categories[key].onClick(common);
return;
@ -277,7 +278,7 @@ define([
$categories.find('.cp-leftside-active').removeClass('cp-leftside-active');
$category.addClass('cp-leftside-active');
showCategories(categories[key]);
});
}});
$category.append(h('span.cp-sidebarlayout-category-name', Messages['team_cat_'+key] || key));
});
@ -473,20 +474,26 @@ define([
created++;
}
if (team.empty) {
var createTeamDiv = h('div.cp-team-list-team.empty'+createCls, [
var createTeamDiv = h('div.cp-team-list-team.empty'+createCls,{
tabindex: '0'
}, [
h('span.cp-team-list-name.empty', Messages.team_listSlot),
createBtn
]);
list.push(createTeamDiv);
if (createCls) {
$(createTeamDiv).click(function () {
$('div.cp-team-cat-create').click();
$(createTeamDiv).on('click keypress', function (event) {
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
$('div.cp-team-cat-create').click();
}
});
}
return;
}
var avatar = h('span.cp-avatar');
var teamDiv = h('div.cp-team-list-team', [
var teamDiv = h('div.cp-team-list-team',{
tabindex: '0'
}, [
h('span.cp-team-list-avatar', avatar),
h('span.cp-team-list-name', {
title: team.metadata.name
@ -494,12 +501,14 @@ define([
]);
list.push(teamDiv);
common.displayAvatar($(avatar), team.metadata.avatar, team.metadata.name);
$(teamDiv).click(function () {
if (team.error) {
UI.warn(Messages.error); // FIXME better error message - roster bug, can't load the team for now
return;
$(teamDiv).on('click keypress', function (event) {
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
if (team.error) {
UI.warn(Messages.error); // FIXME better error message - roster bug, can't load the team for now
return;
}
openTeam(common, id, team);
}
openTeam(common, id, team);
});
});
content.push(h('div.cp-team-list-container', list));