Commit 44bcef03 authored by BrokenEagle's avatar BrokenEagle Committed by evazion

Add additional styles for embedded notes

- Use CSS classes instead of applying the styles to the elements.
-- Allows a user to override any of the default styles being applied.
- Remove the borders and handles when not hovering over the box.
- Increase the opacity for embedded notes to full to avoid conflicts with
  the text underneath.
- Decrease the opacity a little when editing embedded notes.
-- Allows for better seeing of the text underneath while still being able
   to see the translation text above.
-- Compensated for by showing full opacity when hovering over the note box.
parent be661410
......@@ -9,17 +9,6 @@ let Note = {
var $inner_border = $('<div/>');
$inner_border.addClass("note-box-inner-border");
var opacity = 0;
if (Note.embed) {
opacity = 0.95
} else {
opacity = 0.5
}
$inner_border.css({
opacity: opacity,
});
var $note_box = $('<div/>');
$note_box.addClass("note-box");
......@@ -125,12 +114,14 @@ let Note = {
$this.resizable("enable");
$this.draggable("enable");
}
$note_box.addClass("hovering");
} else if (e.type === "mouseout") {
Note.Body.hide($note_box_inner.data("id"));
if (Note.editing) {
$this.resizable("disable");
$this.draggable("disable");
}
$note_box.removeClass("hovering");
}
e.stopPropagation();
......@@ -378,10 +369,7 @@ let Note = {
$(".note-box").resizable("disable");
$(".note-box").draggable("disable");
if (Note.embed) {
$(".note-box").css("opacity", "0.5");
}
$(".note-box").addClass("editing");
let $textarea = $('<textarea></textarea>');
$textarea.css({
......@@ -426,10 +414,7 @@ let Note = {
Note.editing = false;
$(".note-box").resizable("enable");
$(".note-box").draggable("enable");
if (Note.embed) {
$(".note-box").css("opacity", "0.95");
}
$(".note-box").removeClass("editing");
});
$textarea.selectEnd();
......
......@@ -80,6 +80,7 @@ div#note-container {
cursor: move;
background: var(--note-box-background);
line-height: 1.25;
opacity: 0.5;
div.note-box-inner-border {
border: var(--note-box-inner-border);
......@@ -92,6 +93,28 @@ div#note-container {
&.embedded {
color: var(--note-body-text-color);
border: 1px solid transparent;
opacity: 1;
&.hovering {
border: var(--note-box-border);
&.editing {
opacity: 1;
}
div.ui-resizable-handle {
display: block;
}
div.note-box-inner-border {
border: var(--note-box-inner-border);
}
}
&.editing {
opacity: 0.4;
}
div.bg {
height: 100%;
......@@ -100,10 +123,15 @@ div#note-container {
vertical-align: middle;
}
div.ui-resizable-handle {
display: none;
}
div.note-box-inner-border {
text-align: center;
display: table-cell;
vertical-align: middle;
border: 1px solid transparent;
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment