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

Better UI for whiteboard controls

Browse Source
This commit is contained in:
yflory
2020-03-25 17:23:29 +01:00
parent fbdb8e547e
commit f780087ac7
2 changed files with 106 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
www/whiteboard/app-whiteboard.less
View File

@@ -1,5 +1,6 @@
@import (reference) '../../customize/src/less2/include/tools.less';
@import (reference) "../../customize/src/less2/include/framework.less";
@import (reference) "../../customize/src/less2/include/buttons.less";
&.cp-app-whiteboard {
@@ -36,6 +37,7 @@
flex: 1;
display: flex;
overflow: auto;
flex-flow: column;
}
// created in the html
@@ -74,6 +76,8 @@
padding: 10px;
.buttons_main();
& > * + * {
margin: 0;
margin-left: 1em;
@@ -82,10 +86,27 @@
#cp-app-whiteboard-width, #cp-app-whiteboard-opacity {
.middle;
}
#cp-app-whiteboard-clear, #cp-app-whiteboard-delete, #cp-app-whiteboard-toggledraw {
#cp-app-whiteboard-clear {
display: inline;
vertical-align: middle;
}
#cp-app-whiteboard-delete {
min-width: 40px;
}
.cp-whiteboard-type {
button {
min-width: 40px;
text-align: center;
&:not(:first-child) {
margin-left: -1px;
}
&.btn-primary:hover {
cursor: default;
}
}
}
.cp-app-whiteboard-selected {
display: flex;
align-items: center;
@@ -96,27 +117,30 @@
height: 100px;
}
.cp-app-whiteboard-range-group {
.cp-whiteboard-brush {
display: flex;
flex-direction: column;
position: relative;
input[type="range"] {
background-color: inherit;
}
& > span {
cursor: default;
position: absolute;
top: 0;
right: 0;
}
}
.cp-app-whiteboard-range-group:first-of-type {
margin-left: 2em;
}
.cp-app-whiteboard-range-group:last-of-type {
margin-right: 1em;
.cp-app-whiteboard-range-group {
display: flex;
align-items: center;
position: relative;
label {
margin-bottom: 0;
margin-right: 5px;
}
input[type="range"] {
background-color: inherit;
margin-right: 5px;
}
& > span {
cursor: default;
}
}
}
}
@@ -125,14 +149,9 @@
.middle;
z-index: 100;
background: white;
justify-content: space-between;
display: flex;
flex-shrink: 1;
flex-wrap: wrap;
min-width: 0;
max-width: 300px;
padding: 10px;
max-width: 320px;
span.cp-app-whiteboard-palette-color {
height: 30px;