Fix small UI issues and IE issues

This commit is contained in:
yflory 2018-03-02 18:33:43 +01:00
parent b7b560fcb8
commit b0dba481d8
14 changed files with 126 additions and 68 deletions

View File

@ -756,10 +756,14 @@ define([
Pages['/whiteboard/'] = Pages['/whiteboard/index.html'] = function () {
return [
appToolbar(),
h('div#cp-app-whiteboard-canvas-area', h('canvas#cp-app-whiteboard-canvas', {
width: 600,
height: 600
})),
h('div#cp-app-whiteboard-canvas-area',
h('div#cp-app-whiteboard-container',
h('canvas#cp-app-whiteboard-canvas', {
width: 600,
height: 600
})
)
),
h('div#cp-app-whiteboard-controls', {
style: {
display: 'block',

View File

@ -25,6 +25,7 @@
text-align: center;
font: @colortheme_app-font;
width: 100%;
outline: none;
& > div {
width: 60vw;
max-width: 100%;
@ -88,6 +89,10 @@
&:hover {
background: darken(@colortheme_loading-bg, 5%);
}
&.cp-creation-button-selected {
color: darken(@colortheme_loading-bg, 10%);
background: @colortheme_loading-color;
}
}
}

View File

@ -0,0 +1,32 @@
@import (once) "./colortheme-all.less";
.help_main (@color, @bg-color) {
.cp-help-container {
position: relative;
background-color: lighten(@bg-color, 15%);
&.cp-help-hidden {
display: none;
}
.cp-help-close {
position: absolute;
top: 5px;
right: 5px;
}
.cp-help-text {
color: @color;
margin: 0;
padding: 15px;
h1 {
font-size: 20px;
}
h2 {
font-size: 18px;
}
h3 {
font-size: 16px;
}
ul, ol, p { margin: 0; }
}
}
}

View File

@ -0,0 +1,20 @@
@import (once) "./colortheme-all.less";
.markdownToolbar_main (@color, @bg-color) {
.cp-markdown-toolbar {
height: @toolbar_line-height;
background-color: lighten(@bg-color, 20%);
display: none;
button {
height: @toolbar_line-height !important;
outline: 0;
color: @color;
.toolbar_button;
font: normal normal normal 14px/1 FontAwesome;
&:hover {
background-color: lighten(@bg-color, 8%);
}
&.cp-markdown-help { float: right; }
}
}
}

View File

@ -8,6 +8,8 @@
@import (once) "./tools.less";
@import (once) "./icons.less";
@import (once) "./modal.less";
@import (once) "./markdown-toolbar.less";
@import (once) "./help.less";
.toolbar_main (
@color: @colortheme_default-color, // Color of the text for the toolbar
@ -24,6 +26,8 @@
.ckeditor_fix();
.history_main();
.iconColors_main();
.markdownToolbar_main(@color, @bg-color);
.help_main(@color, @bg-color);
.cp-toolbar-container {
display: flex;
@ -239,55 +243,6 @@
}
}
// TODO(cjd) This ought to be in a less file for markdown-based editors
.cp-markdown-toolbar {
height: @toolbar_line-height;
background-color: lighten(@bg-color, 20%);
display: none;
button {
height: @toolbar_line-height !important;
outline: 0;
color: @color;
.toolbar_button;
font: normal normal normal 14px/1 FontAwesome;
&:hover {
background-color: lighten(@bg-color, 8%);
}
&.cp-markdown-help { float: right; }
}
}
// TODO put in a different less file
.cp-help-container {
position: relative;
background-color: lighten(@bg-color, 15%);
&.cp-help-hidden {
display: none;
}
.cp-help-close {
position: absolute;
top: 5px;
right: 5px;
}
.cp-help-text {
color: @color;
margin: 0;
padding: 15px;
h1 {
font-size: 20px;
}
h2 {
font-size: 18px;
}
h3 {
font-size: 16px;
}
ul, ol, p { margin: 0; }
}
}
.cp-toolbar-userlist-drawer {
background-color: @bg-color;
color: @color;
@ -450,6 +405,7 @@
font-size: @colortheme_app-font-size;
flex: 1;
max-width: none;
line-height: calc(@toolbar_line-height - 12px); // padding + border
}
}
}
@ -615,7 +571,7 @@
}
input {
max-width: ~"calc(100% - 40px)";
flex: 1;
//flex: 1;
vertical-align: middle;
box-sizing: border-box;
cursor: auto;
@ -623,6 +579,7 @@
font-size: 20px;
padding: 5px 5px;
height: 40px;
line-height: 28px; // padding + border
}
}
.cp-toolbar-link, .cp-toolbar-new {

View File

@ -668,7 +668,6 @@ define([
position: 'bottom',
distance: 0,
performance: true,
dynamicTitle: true,
delay: [delay, 0],
sticky: true
});
@ -691,6 +690,9 @@ define([
mutations.forEach(function(mutation) {
if (mutation.type === "childList") {
for (var i = 0; i < mutation.addedNodes.length; i++) {
if ($(mutation.addedNodes[i]).attr('title')) {
addTippy(0, mutation.addedNodes[i]);
}
$(mutation.addedNodes[i]).find('[title]').each(addTippy);
}
for (var j = 0; j < mutation.removedNodes.length; j++) {

View File

@ -588,7 +588,6 @@ define([
return;
});
});
});
break;
case 'present':
@ -1777,7 +1776,7 @@ define([
var $body = $('body');
var $creationContainer = $('<div>', { id: 'cp-creation-container' }).appendTo($body);
var $creation = $('<div>', { id: 'cp-creation' }).appendTo($creationContainer);
var $creation = $('<div>', { id: 'cp-creation', tabindex: 1 }).appendTo($creationContainer);
var setHTML = function (e, html) {
e.innerHTML = html;
@ -1980,6 +1979,29 @@ define([
$ok[0],
$spinner[0]
])).appendTo($creation);
var selected = -1;
var next = function () {
selected = ++selected % $creation.find('button').length;
$creation.find('button').removeClass('cp-creation-button-selected');
$($creation.find('button').get(selected)).addClass('cp-creation-button-selected');
};
$creation.keydown(function (e) {
if (e.which === 9) {
e.preventDefault();
e.stopPropagation();
next();
return;
}
if (e.which === 13) {
if ($creation.find('.cp-creation-button-selected').length === 1) {
$creation.find('.cp-creation-button-selected').click();
}
return;
}
});
$creation.focus();
};
UIElements.onServerError = function (common, err, toolbar, cb) {

View File

@ -116,6 +116,7 @@ define([
/* remove listeners from the DOM */
var removeListeners = function (root) {
if (!root) { return; }
slice(root.attributes).map(function (attr) {
if (/^on/i.test(attr.name)) {
console.log('removing attribute', attr.name, root.attributes[attr.name]);
@ -171,7 +172,9 @@ define([
return mt + '</media-tag>';
});
var safe_newHtmlFixed = domFromHTML(unsafe_newHtmlFixed).body.outerHTML;
var newDomFixed = domFromHTML(unsafe_newHtmlFixed);
if (!newDomFixed || !newDomFixed.body) { return; }
var safe_newHtmlFixed = newDomFixed.body.outerHTML;
var $div = $('<div>', {id: id}).append(safe_newHtmlFixed);
var Dom = domFromHTML($('<div>').append($div).html());

View File

@ -318,7 +318,7 @@ define([
$span.append($rightCol);
} else {
Common.displayAvatar($span, data.avatar, name, function ($img) {
if (data.avatar && $img.length) {
if (data.avatar && $img && $img.length) {
avatars[data.avatar] = $img[0].outerHTML;
}
$span.append($rightCol);
@ -610,7 +610,7 @@ define([
});
});
$('.cp-toolbar-top').append($msg);
UI.addTooltips();
//UI.addTooltips();
});
};

View File

@ -13,7 +13,6 @@
#cke_1_top {
overflow: visible;
padding: 0px;
display: flex;
}
.cke_toolbox_main {
background-color: @colortheme_pad-toolbar-bg;
@ -23,10 +22,7 @@
}
}
.cke_wysiwyg_frame {
min-width: 60%;
}
#cke_1_toolbox {
flex: 1;
width: 100%;
}
#cke_editor1 {
display: flex;

View File

@ -629,7 +629,6 @@ define([
'max-width: 50em; padding: 20px 30px; margin: 0 auto; min-height: 100%;'+
'box-sizing: border-box; overflow: auto;'+
'}' +
'html.cke_body_width { overflow: hidden; }' +
'.cke_body_width body > *:first-child { margin-top: 0; }';
Ckeditor.addCss(newCss);
Ckeditor.plugins.addExternal('mediatag','/pad/', 'mediatag-plugin.js');

View File

@ -820,6 +820,7 @@ define([
var checkDeletedCells = function () {
// faster than forEach?
var c;
if (!APP.proxy || !APP.proxy.content) { return; }
for (var k in APP.proxy.content.cells) {
c = Render.getCoordinates(k);
if (APP.proxy.content.colsOrder.indexOf(c[0]) === -1 ||

View File

@ -42,6 +42,13 @@
display: none;
}
#cp-app-whiteboard-container {
flex: 1;
display: flex;
flex-flow: column;
overflow: auto;
}
// created in the html
#cp-app-whiteboard-canvas-area {
flex: 1;
@ -51,6 +58,8 @@
.cp-app-whiteboard-canvas-container {
margin: auto;
background: white;
flex: 1;
min-height: 0;
& > canvas {
border: 1px solid black;
}
@ -71,7 +80,7 @@
border-top: 1px solid black;
background: white;
padding: 1em;
padding: 10px;
& > * + * {
margin: 0;
@ -127,7 +136,7 @@
display: flex;
justify-content: space-between;
padding: 1em;
padding: 10px;
span.cp-app-whiteboard-palette-color {
height: 4vw;

View File

@ -454,6 +454,14 @@ define([
var $properties = common.createButton('properties', true);
toolbar.$drawer.append($properties);
if (Messages.whiteboardHelp) {
var $appContainer = $('#cp-app-whiteboard-container');
var helpMenu = common.createHelpMenu();
$appContainer.prepend(helpMenu.menu);
$(helpMenu.text).html(Messages.whiteboardHelp);
toolbar.$drawer.append(helpMenu.button);
}
if (!readOnly) {
makeColorButton($rightside);