web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'staging' of github.com:xwiki-labs/cryptpad into staging

Browse Source
This commit is contained in:
yflory
2017-04-10 11:44:17 +02:00
parent 126498585e 108ab7e9de
commit 33e19d5918
11 changed files with 303 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
www/whiteboard/index.html
View File

@@ -11,82 +11,7 @@
id="favicon" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/customize/main.css" />
<style>
html, body{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body {
display: flex;
flex-flow: column;
height: 100%;
background: url('/customize/bg3.jpg') no-repeat center center;
background-size: cover;
background-position: center;
}
#canvas-area {
flex: 1;
display: flex;
}
.canvas-container {
border: 5px solid black;
margin: auto;
background: white;
}
#clear, #toggleDraw {
display: inline;
vertical-align: middle;
}
#colors {
z-index: 100;
border: 3px solid black;
padding: 5px;
vertical-align: top;
background: white;
}
.selected {
margin-left: 20px;
display: inline-block;
height: 100px;
}
.selected img {
vertical-align: middle;
}
#copy {
padding-left: 75px;
}
span.palette-color {
height: 4vw;
width: 4vw;
display: inline-block;
margin: 5px;
border: 2px solid black;
vertical-align: top;
}
#controls {
display: block;
position: relative;
border: 3px solid black;
background: white;
height: 100px;
line-height: 100px;
}
#width, #colors {
position: relative;
vertical-align: middle;
}
#color-picker {
display: block;
}
#pickers {
visibility: hidden;
position: absolute;
width: 0;
height: 0;
z-index: -5;
}
</style>
<link rel="stylesheet" href="whiteboard.css" />
</head>
<body>
<div id="toolbar" class="toolbar-container"></div>

15
www/whiteboard/main.js
View File

@@ -106,10 +106,9 @@ define([
var $picker = $('<input>', {
type: 'color',
value: '#FFFFFF',
})
.css({
visibility: 'hidden'
})
})
// TODO confirm that this is safe to remove
//.css({ visibility: 'hidden' })
.on('change', function () {
var color = this.value;
cb(color);
@@ -242,6 +241,7 @@ define([
};
var addColorToPalette = function (color, i) {
if (readOnly) { return; }
var $color = $('<span>', {
'class': 'palette-color',
})
@@ -252,7 +252,6 @@ define([
var c = rgb2hex($color.css('background-color'));
setColor(c);
})
// FIXME double click doesn't seem to work in chromium currently
.on('dblclick', function (e) {
e.preventDefault();
pickColor(rgb2hex($color.css('background-color')), function (c) {
@@ -263,19 +262,17 @@ define([
config.onLocal();
setColor(c);
});
// TODO commit chosen color to pad metadata:
// json.metadata.palette[i]
});
$colors.append($color);
};
palette.forEach(addColorToPalette);
var updatePalette = function (newPalette) {
palette = newPalette;
$colors.html('&nbsp;');
$colors.html('<div class="hidden">&nbsp;</div>');
palette.forEach(addColorToPalette);
};
updatePalette(palette);
var suggestName = function (fallback) {
if (document.title === defaultName) {

82
www/whiteboard/whiteboard.css Normal file
View File

@@ -0,0 +1,82 @@
.hidden {
display: none;
}
html,
body {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body {
display: flex;
flex-flow: column;
height: 100%;
background: url('/customize/bg3.jpg') no-repeat center center;
background-size: cover;
background-position: center;
}
#canvas-area {
flex: 1;
display: flex;
}
.canvas-container {
border: 1px solid black;
margin: auto;
background: white;
}
#controls {
display: block;
position: relative;
border-top: 1px solid black;
background: white;
height: 100px;
line-height: 100px;
padding-bottom: 5px;
}
#controls #width {
position: relative;
vertical-align: middle;
}
#controls #clear,
#controls #toggleDraw {
display: inline;
vertical-align: middle;
}
#controls .selected {
margin-left: 20px;
display: inline-block;
height: 135px;
width: 135px;
z-index: 9001;
text-align: center;
}
#controls .selected img {
vertical-align: middle;
}
/* Colors */
#colors {
position: relative;
vertical-align: middle;
z-index: 100;
background: white;
display: flex;
justify-content: space-between;
}
#colors span.palette-color {
height: 4vw;
width: 4vw;
display: inline-block;
margin: 5px;
border: 1px solid black;
vertical-align: top;
}
#color-picker {
display: block;
}
#pickers {
visibility: hidden;
position: absolute;
width: 0;
height: 0;
z-index: -5;
}

97
www/whiteboard/whiteboard.less Normal file
View File

@@ -0,0 +1,97 @@
.middle () {
position: relative;
vertical-align: middle;
}
.hidden {
display: none;
}
html, body{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body {
display: flex;
flex-flow: column;
height: 100%;
background: url('/customize/bg3.jpg') no-repeat center center;
background-size: cover;
background-position: center;
}
// created in the html
#canvas-area {
flex: 1;
display: flex;
}
// created by fabricjs. styled so defaults don't break anything
.canvas-container {
border: 1px solid black;
margin: auto;
background: white;
}
// contains user tools
#controls {
display: block;
position: relative;
border-top: 1px solid black;
background: white;
height: 100px;
line-height: 100px;
padding-bottom: 5px;
#width {
.middle;
}
#clear, #toggleDraw {
display: inline;
vertical-align: middle;
}
.selected {
margin-left: 20px;
display: inline-block;
height: 135px;
width: 135px;
z-index: 9001;
text-align: center;
img {
vertical-align: middle;
}
}
}
/* Colors */
#colors {
.middle;
z-index: 100;
background: white;
display: flex;
justify-content: space-between;
span.palette-color {
height: 4vw;
width: 4vw;
display: inline-block;
margin: 5px;
border: 1px solid black;
vertical-align: top;
}
}
// used in the toolbar if supported
#color-picker {
display: block;
}
// input[type=color] must exist in the dom to work correctly
// styled so that they don't break layouts
#pickers {
visibility: hidden;
position: absolute;
width: 0;
height: 0;
z-index: -5;
}