Fix small UI issues and IE issues
parent
b7b560fcb8
commit
b0dba481d8
|
@ -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',
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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; }
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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; }
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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 {
|
||||
|
|
|
@ -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++) {
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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());
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -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 ||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
Loading…
Reference in New Issue