1
0
mirror of https://github.com/salexdv/bsl_console.git synced 2024-11-28 08:48:48 +02:00

Выбор серьезности замечания +верстка

This commit is contained in:
salexdv 2023-12-13 15:24:09 +03:00
parent 659dbb2788
commit dc57efb602
6 changed files with 313 additions and 24 deletions

View File

@ -124,23 +124,39 @@ div:has(> .add-review) {
}
.review-body {
border: 1px solid #ddd;
padding: 10px;
border: 1px solid #ddd;
box-sizing: border-box;
background-color: #f6f8fa;
overflow: hidden;
}
.review-buttons {
float: right;
.review-text {
padding: 0 10px;
overflow: hidden;
}
.review-header {
margin: 5px;
display: flex;
}
.review-header > .review-title {
font-size: 11px;
font-weight: bold;
line-height: 20px;
}
.review-header > div {
display: inline-block;
}
.review-buttons > div {
display: inline-block;
height: 16px;
width: 16px;
background-size: contain;
background-repeat: no-repeat;
float: right;
margin: 5px 5px 10px 5px;
margin-right: 10px;
cursor: pointer;
opacity: 0.5;
}
@ -149,6 +165,31 @@ div:has(> .add-review) {
opacity: 1;
}
.review-image {
height: 18px;
width: 18px;
background-size: contain !important;
background-repeat: no-repeat !important;
opacity: 1 !important;
cursor: auto !important;
}
.review-error .review-image {
background: url("media/bug.svg");
}
.review-warning .review-image {
background: url("media/warning.svg");
}
.review-info .review-image {
background: url("media/info.svg");
}
.review-hint .review-image {
background: url("media/hint.svg");
}
.review-modify {
background: url("media/pencil.svg");
}
@ -157,6 +198,58 @@ div:has(> .add-review) {
background: url("media/trash.svg");
}
.review-edit {
padding: 10px;
}
.review-edit button {
display: inline-block;
cursor: pointer;
padding: 0.375em .75em;
position: relative;
margin-right: 5px;
letter-spacing: .05em;
color: #1e1e1e;
text-align: center;
font-size: 14px;
transition: background-color .5s ease;
border-radius: 5px;
border: 1px solid #9b9b9b;
opacity: 0.9;
}
.review-edit button:hover {
opacity: 1;
}
.review-edit button.review-save {
background-color: #5cb85c;
}
.close.review-error {
background-color: #f2dede;
color: #a94442;
border-color: #ebccd1;
}
.close.review-warning {
background-color: #fdf1dd;
color: #8a6d3b;
border-color: #faebcc
}
.close.review-info {
background-color: #d9edf7;
color: #31708f;
border-color: #bce8f1
}
.close.review-hint {
background-color: #dff0d8;
color: #3c763d;
border-color: #d6e9c6
}
.review-body textarea.required {
border: 1px solid #990000;
}
@ -174,6 +267,69 @@ div:has(> .add-review) {
border-color: #007acc;
}
.severity div {
display: flex;
flex-wrap: wrap;
margin-bottom: 0.5rem;
justify-content: left;
}
.severity .error {
background-color: #fa8072;
}
.severity .warning {
background-color: #f0ad4e;
}
.severity .info {
background-color: #87ceeb;
}
.severity .hint {
background-color: #5cb85c;
}
.severity input[type="radio"] {
clip: rect(0 0 0 0);
clip-path: inset(100%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.severity input[type="radio"]:checked+span {
box-shadow: 0 0 0 0.1em #292929;
z-index: 1;
text-decoration: underline;
color: #000000;
}
.severity label span {
display: block;
cursor: pointer;
padding: 0.375em .75em;
position: relative;
margin-left: .0625em;
box-shadow: 0 0 0 0.0625em #b5bfd9;
letter-spacing: .05em;
color: #1e1e1e;
text-align: center;
font-size: 14px;
font-family: monospace, monospace;
transition: background-color .5s ease;
}
.severity label:first-child span {
border-radius: .375em 0 0 .375em;
}
.severity label:last-child span {
border-radius: 0 .375em .375em 0;
}
.diff-navi {
border-left: 3px solid;
width: 3px !important;

View File

@ -3370,10 +3370,22 @@ define(['bslGlobals', 'bslMetadata', 'snippets', 'bsl_language', 'vs/editor/edit
getId: function () {
return widgetId;
},
removeSeverity() {
this.domNode.classList.remove('review-error');
this.domNode.classList.remove('review-warning');
this.domNode.classList.remove('review-info');
this.domNode.classList.remove('review-hint');
},
setSeverity() {
let className = this.domNode.querySelector('input:checked').nextSibling.className;
this.removeSeverity();
this.domNode.classList.add("review-" + className);
},
close: function () {
let height = editor.getOption(monaco.editor.EditorOption.lineHeight) * 4 + 'px'
let widget = reviewWidgets.get(this.widgetId);
this.domNode.getElementsByClassName("review-buttons")[0].style.display = 'block';
this.domNode.classList.add('close');
this.domNode.getElementsByClassName("review-header")[0].style.display = 'flex';
this.domNode.getElementsByClassName("review-text")[0].style.display = 'block';
this.domNode.getElementsByClassName("review-edit")[0].style.display = 'none'
this.domNode.style.height = height;
@ -3383,12 +3395,26 @@ define(['bslGlobals', 'bslMetadata', 'snippets', 'bsl_language', 'vs/editor/edit
});
},
save: function () {
let widget = reviewWidgets.get(this.widgetId);
let textarea = this.domNode.getElementsByTagName('textarea')[0];
let reviewText = this.domNode.getElementsByClassName("review-text")[0];
if (textarea.value) {
let widget = reviewWidgets.get(this.widgetId);
let reviewText = this.domNode.getElementsByClassName("review-text")[0];
widget.message = textarea.value;
reviewText.innerHTML = textarea.value;
let reviewTitle = this.domNode.getElementsByClassName("review-title")[0];
let date = new Date(Date.now());
function addZero(num) {
return ("0" + num).slice(-2)
}
let year = date.getFullYear(),
month = addZero(date.getMonth() + 1),
day = addZero(date.getDate()),
hours = addZero(date.getHours()),
minutes = addZero(date.getMinutes());
let title = `${day}.${month}.${year} ${hours}:${minutes}`;
if (!reviewTitle.innerHTML)
reviewTitle.innerHTML = title;
this.setSeverity();
this.close();
}
else {
@ -3411,11 +3437,17 @@ define(['bslGlobals', 'bslMetadata', 'snippets', 'bsl_language', 'vs/editor/edit
this.delete();
},
edit: function () {
let height = editor.getOption(monaco.editor.EditorOption.lineHeight) * 8 + 'px'
this.domNode.getElementsByClassName("review-buttons")[0].style.display = 'none';
let widget = reviewWidgets.get(this.widgetId);
let height = editor.getOption(monaco.editor.EditorOption.lineHeight) * 9 + 'px'
this.domNode.classList.remove('close');
this.domNode.getElementsByClassName("review-header")[0].style.display = 'none';
this.domNode.getElementsByClassName("review-text")[0].style.display = 'none';
this.domNode.getElementsByClassName("review-edit")[0].style.display = 'block';
this.domNode.style.height = height;
document.querySelector('[monaco-view-zone="' + widget.zone + '"]').style.height = height;
getActiveEditor().changeViewZones(function (changeAccessor) {
changeAccessor.layoutZone(widget.zone);
});
},
getDomNode: function () {
@ -3424,27 +3456,39 @@ define(['bslGlobals', 'bslMetadata', 'snippets', 'bsl_language', 'vs/editor/edit
this.domNode = document.createElement('div');
this.domNode.classList.add('review-body');
let header = document.createElement('div');
header.classList.add('review-header');
header.style.display = 'none';
let buttons = document.createElement('div');
buttons.classList.add('review-buttons');
buttons.style.display = 'none';
header.appendChild(buttons);
title = document.createElement('div');
title.classList.add('review-title');
header.appendChild(title);
let button = document.createElement('div');
button.classList.add('review-image');
buttons.appendChild(button);
button = document.createElement('div');
button.classList.add('review-modify');
button.setAttribute('widgetid', widgetId);
button.onclick = function() {
reviewWidgets.get(this.getAttribute("widgetid")).widget.edit();
}
buttons.appendChild(button);
button = document.createElement('div');
button.classList.add('review-delete');
button.setAttribute('widgetid', widgetId);
button.onclick = function() {
if (confirm("Удалить замечание?"))
reviewWidgets.get(this.getAttribute("widgetid")).widget.delete();
}
buttons.appendChild(button);
button = document.createElement('div');
button.setAttribute('widgetid', widgetId);
button.classList.add('review-modify');
button.onclick = function() {
reviewWidgets.get(this.getAttribute("widgetid")).widget.edit();
}
buttons.appendChild(button);
this.domNode.appendChild(buttons);
buttons.appendChild(button);
this.domNode.appendChild(header);
let text = document.createElement('div');
text.classList.add('review-text');
@ -3453,6 +3497,59 @@ define(['bslGlobals', 'bslMetadata', 'snippets', 'bsl_language', 'vs/editor/edit
let editGroup = document.createElement('div');
editGroup.classList.add('review-edit');
div = document.createElement('div');
div.classList.add('severity');
let group = document.createElement('div');
div.appendChild(group)
let label = document.createElement('label');
group.appendChild(label);
let input = document.createElement('input');
input.setAttribute('name', 'radio');
input.setAttribute('type', 'radio');
input.setAttribute('checked', '');
label.appendChild(input);
let span = document.createElement('span');
span.classList.add('error');
span.innerHTML = 'Ошибка';
label.appendChild(span);
label = document.createElement('label');
group.appendChild(label);
input = document.createElement('input');
input.setAttribute('name', 'radio');
input.setAttribute('type', 'radio');
label.appendChild(input);
span = document.createElement('span');
span.classList.add('warning');
span.innerHTML = 'Предупреждение';
label.appendChild(span);
label = document.createElement('label');
group.appendChild(label);
input = document.createElement('input');
input.setAttribute('name', 'radio');
input.setAttribute('type', 'radio');
label.appendChild(input);
span = document.createElement('span');
span.classList.add('info');
span.innerHTML = 'Информация';
label.appendChild(span);
label = document.createElement('label');
group.appendChild(label);
input = document.createElement('input');
input.setAttribute('name', 'radio');
input.setAttribute('type', 'radio');
label.appendChild(input);
span = document.createElement('span');
span.classList.add('hint');
span.innerHTML = 'Подсказка';
label.appendChild(span);
editGroup.appendChild(div);
let textarea = document.createElement('textarea');
textarea.oninput = function() {
@ -3463,7 +3560,7 @@ define(['bslGlobals', 'bslMetadata', 'snippets', 'bsl_language', 'vs/editor/edit
button = document.createElement('button');
button.setAttribute('widgetid', widgetId);
button.classList.add('review-add');
button.classList.add('review-save');
button.innerHTML = "Сохранить"
button.onclick = function() {
reviewWidgets.get(this.getAttribute("widgetid")).widget.save();
@ -3497,7 +3594,7 @@ define(['bslGlobals', 'bslMetadata', 'snippets', 'bsl_language', 'vs/editor/edit
zone_id = changeAccessor.addZone({
afterLineNumber: lineNumber,
afterColumn: 1,
heightInLines: 8,
heightInLines: 9,
domNode: domNode,
widget: reviewWidget,
onDomNodeTop: function (top) {

24
src/media/bug.svg Normal file
View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg height="800px" width="800px" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512" xml:space="preserve">
<style type="text/css">
.st0{fill:#000000;}
</style>
<g>
<path class="st0" d="M426.641,282.818l85.355-49.028l-10.362-20.043l-77.836,44.694l-61.896-9.506
c0.138-5.487-0.137-10.92-0.794-16.261c13.586-0.948,26.332-6.213,36.082-15.963c11.951-11.951,17.163-28.388,15.94-45.344
c36.878-11.462,37.917-37.626,37.886-50.724c-0.046-14.252-13.265-9.384-14.672-5.594c-8.344,21.075-23.811,23.91-36.113,19.715
c-2.965-4.432-6.404-8.673-10.362-12.632c-3.958-3.951-8.207-7.397-12.639-10.369c-4.187-12.295-1.36-27.761,19.73-36.113
c3.775-1.398,8.65-14.618-5.609-14.657c-13.097-0.038-39.262,1.002-50.724,37.871c-16.949-1.207-33.394,3.996-45.344,15.94
c-9.75,9.758-15.008,22.504-15.971,36.091c-5.334-0.665-10.759-0.932-16.245-0.802l-9.506-61.888l44.688-77.844L278.214,0
l-49.028,85.371l10.408,67.741c-10.683,2.453-21.274,6.396-31.453,11.798l-36.846-28.831l-95.427-23.566l-7.305,22.718
l90.964,22.474l27.234,21.312c-4.02,3.218-7.947,6.672-11.691,10.424c-5.242,5.242-9.949,10.804-14.152,16.567l-72.136-4.035
L0.003,249.7l9.736,20.403l82.589-44.412l55.079,3.079c-19.516,41.944-14.901,89.688,15.619,120.208
c30.52,30.513,78.264,35.128,120.2,15.612l3.088,55.079l-44.412,82.597L262.304,512l47.728-88.778l-4.034-72.135
c5.761-4.211,11.309-8.91,16.567-14.152c3.744-3.752,7.198-7.672,10.422-11.692l21.305,27.22l22.481,90.979l22.711-7.306
l-23.567-95.434l-28.823-36.839c5.394-10.179,9.337-20.778,11.798-31.452L426.641,282.818z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

2
src/media/hint.svg Normal file
View File

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"><path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 4H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h3.172a2 2 0 0 1 1.414.586l1.707 1.707a1 1 0 0 0 1.414 0l1.707-1.707A2 2 0 0 1 15.828 18H19a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"/></svg>

After

Width:  |  Height:  |  Size: 479 B

4
src/media/info.svg Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="none">
<path fill="#000000" fill-rule="evenodd" d="M10 3a7 7 0 100 14 7 7 0 000-14zm-9 7a9 9 0 1118 0 9 9 0 01-18 0zm8-4a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1zm.01 8a1 1 0 102 0V9a1 1 0 10-2 0v5z"/>
</svg>

After

Width:  |  Height:  |  Size: 427 B

6
src/media/warning.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="17" r="1" fill="#000000"/>
<path d="M12 10L12 14" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3.44722 18.1056L10.2111 4.57771C10.9482 3.10361 13.0518 3.10362 13.7889 4.57771L20.5528 18.1056C21.2177 19.4354 20.2507 21 18.7639 21H5.23607C3.7493 21 2.78231 19.4354 3.44722 18.1056Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 659 B