diff --git a/src/packages/CSS/Controls/Drawing/DSFRdrawingStyle.css b/src/packages/CSS/Controls/Drawing/DSFRdrawingStyle.css index 0909b3bad..6dd4afe9d 100644 --- a/src/packages/CSS/Controls/Drawing/DSFRdrawingStyle.css +++ b/src/packages/CSS/Controls/Drawing/DSFRdrawingStyle.css @@ -1,4 +1,83 @@ .gpf-btn-icon-drawing::after { -webkit-mask: url("img/modifier.svg") center no-repeat; mask: url("img/modifier.svg") center no-repeat; -} \ No newline at end of file +} + +.gp-label-div, +.gp-styling-div { + width: 370px; + transform: translateY(20px); +} + +.gp-label-div textarea { + max-width: 100%; + margin-bottom: 1rem; +} + +.gp-label-div input { + width: 100%; +} + +.gp-styling-button.closer { + display: none; +} + +.gp-styling-option.fr-range--sm[data-fr-js-range]::before, +.gp-styling-option.fr-range--sm[data-fr-js-range]::after { + top: 1.74rem; +} + +.drawing-tool { + width: 40px; +} + +.drawing-tool-active { + background-color: var(--hover-tint); +} + +/* +* Drawing tools +*/ +button[id^=drawing-tool-point-]::after { + -webkit-mask: url("img/dsfr/create-point.svg") center no-repeat; + mask: url("img/dsfr/create-point.svg") center no-repeat; +} + + +button[id^=drawing-tool-line-]::after { + -webkit-mask: url("img/dsfr/create-line.svg") center no-repeat; + mask: url("img/dsfr/create-line.svg") center no-repeat; +} + +button[id^=drawing-tool-polygon-]::after { + -webkit-mask: url("img/dsfr/create-polygon.svg") center no-repeat; + mask: url("img/dsfr/create-polygon.svg") center no-repeat; +} + +button[id^=drawing-tool-text-]::after { + -webkit-mask: url("img/dsfr/create-label.svg") center no-repeat; + mask: url("img/dsfr/create-label.svg") center no-repeat; +} + +/* +* Editing tools +*/ +button[id^=drawing-tool-edit-]::after { + -webkit-mask: url("img/dsfr/edit-geom.svg") center no-repeat; + mask: url("img/dsfr/edit-geom.svg") center no-repeat; +} + +button[id^=drawing-tool-display]::after { + -webkit-mask: url("img/dsfr/edit-style.svg") center no-repeat; + mask: url("img/dsfr/edit-style.svg") center no-repeat; +} + +button[id^=drawing-tool-tooltip]::after { + -webkit-mask: url("img/dsfr/edit-text.svg") center no-repeat; + mask: url("img/dsfr/edit-text.svg") center no-repeat; +} + +button[id^=drawing-tool-remove]::after { + -webkit-mask: url("img/dsfr/delete.svg") center no-repeat; + mask: url("img/dsfr/delete.svg") center no-repeat; +} diff --git a/src/packages/CSS/Controls/Drawing/GPFdrawing.css b/src/packages/CSS/Controls/Drawing/GPFdrawing.css index 534c67cb6..7814b23c6 100644 --- a/src/packages/CSS/Controls/Drawing/GPFdrawing.css +++ b/src/packages/CSS/Controls/Drawing/GPFdrawing.css @@ -55,9 +55,10 @@ div[id^=GPdrawingBasicPanel-] { text-transform: uppercase; } -ul.drawing-tools-flex-display { +div.drawing-tools-flex-display { justify-content: center; padding : 0; + margin: 12px 0; } .drawing-tools-flex-display { align-items: center; @@ -68,102 +69,3 @@ ul.drawing-tools-flex-display { margin-right: 10px; } -.drawing-tool { - border-radius: 10px; - cursor: pointer; - display: block; - height: 40px; - width: 40px; -} - -.drawing-tool { - background-image: url("img/drawing-tools.svg"); - background-size: 720px 40px; -} - -.drawing-tool { - background-color: #e9edf0; -} - -.drawing-tool-active { - background-color: #002a50; -} - - -/* -* Drawing tools -*/ -li[id^=drawing-tool-point-] { - background-position: 0 0; -} - -li[id^=drawing-tool-point-].drawing-tool-active { - background-position: -40px 0; -} - -li[id^=drawing-tool-line-].drawing-tool-active { - background-position: -120px 0; -} - -li[id^=drawing-tool-line-] { - background-position: -80px 0; -} - -li[id^=drawing-tool-holes-] { - background-position: -640px 0; -} - -li[id^=drawing-tool-holes-].drawing-tool-active { - background-position: -680px 0; -} - -li[id^=drawing-tool-polygon-] { - background-position: -160px 0; -} - -li[id^=drawing-tool-polygon-].drawing-tool-active { - background-position: -200px 0; -} - -li[id^=drawing-tool-text-] { - background-position: -240px 0; -} - -li[id^=drawing-tool-text-].drawing-tool-active { - background-position: -280px 0; -} - -/* -* Editing tools -*/ -li[id^=drawing-tool-edit-] { - background-position: -320px 0; -} - -li[id^=drawing-tool-edit-].drawing-tool-active { - background-position: -360px 0; -} - -li[id^=drawing-tool-display] { - background-position: -400px 0; -} - -li[id^=drawing-tool-display-].drawing-tool-active { - background-position: -440px 0; -} - -li[id^=drawing-tool-tooltip] { - background-position: -480px 0; -} - -li[id^=drawing-tool-tooltip-].drawing-tool-active { - background-position: -520px 0; -} - -li[id^=drawing-tool-remove] { - background-position: -560px 0; -} - -li[id^=drawing-tool-remove-].drawing-tool-active { - background-position: -600px 0; -} diff --git a/src/packages/CSS/Controls/Drawing/GPFdrawingStyle.css b/src/packages/CSS/Controls/Drawing/GPFdrawingStyle.css index 4611b65d3..8e1f174a1 100644 --- a/src/packages/CSS/Controls/Drawing/GPFdrawingStyle.css +++ b/src/packages/CSS/Controls/Drawing/GPFdrawingStyle.css @@ -35,7 +35,101 @@ input.marker-input-radio:checked + label { border: 1px solid red; } +/* drawing tools */ +.drawing-tool { + border-radius: 10px; + cursor: pointer; + display: block; + height: 40px; + width: 40px; + background-image: url("img/drawing-tools.svg"); + background-size: 720px 40px; + background-color: #e9edf0; + border: unset; +} + +.drawing-tool-active { + background-color: #002a50; +} + + +/* +* Drawing tools +*/ +button[id^=drawing-tool-point-] { + background-position: 0 0; +} + +button[id^=drawing-tool-point-].drawing-tool-active { + background-position: -40px 0; +} + +button[id^=drawing-tool-line-].drawing-tool-active { + background-position: -120px 0; +} + +button[id^=drawing-tool-line-] { + background-position: -80px 0; +} + +button[id^=drawing-tool-holes-] { + background-position: -640px 0; +} + +button[id^=drawing-tool-holes-].drawing-tool-active { + background-position: -680px 0; +} + +button[id^=drawing-tool-polygon-] { + background-position: -160px 0; +} + +button[id^=drawing-tool-polygon-].drawing-tool-active { + background-position: -200px 0; +} +button[id^=drawing-tool-text-] { + background-position: -240px 0; +} + +button[id^=drawing-tool-text-].drawing-tool-active { + background-position: -280px 0; +} + +/* +* Editing tools +*/ +button[id^=drawing-tool-edit-] { + background-position: -320px 0; +} + +button[id^=drawing-tool-edit-].drawing-tool-active { + background-position: -360px 0; +} + +button[id^=drawing-tool-display] { + background-position: -400px 0; +} + +button[id^=drawing-tool-display-].drawing-tool-active { + background-position: -440px 0; +} + +button[id^=drawing-tool-tooltip] { + background-position: -480px 0; +} + +button[id^=drawing-tool-tooltip-].drawing-tool-active { + background-position: -520px 0; +} + +button[id^=drawing-tool-remove] { + background-position: -560px 0; +} + +button[id^=drawing-tool-remove-].drawing-tool-active { + background-position: -600px 0; +} /* section d'export */ @@ -83,6 +177,7 @@ button[id^=drawing-export-] { background-color: #FFF; box-shadow: 0 0 5px #000; box-sizing: border-box; + border: unset; } .gp-label-div::before, @@ -207,12 +302,6 @@ button[id^=drawing-export-] { background-position: center; } -.gp-styling-div ul { - list-style-type: none; - padding: 0; - margin: 0; -} - .gp-styling-option { font-size: 11px; position: relative; diff --git a/src/packages/CSS/Controls/Drawing/img/dsfr/create-label.svg b/src/packages/CSS/Controls/Drawing/img/dsfr/create-label.svg new file mode 100644 index 000000000..34de4edcb --- /dev/null +++ b/src/packages/CSS/Controls/Drawing/img/dsfr/create-label.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/packages/CSS/Controls/Drawing/img/dsfr/create-line.svg b/src/packages/CSS/Controls/Drawing/img/dsfr/create-line.svg new file mode 100644 index 000000000..eeea6d595 --- /dev/null +++ b/src/packages/CSS/Controls/Drawing/img/dsfr/create-line.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/packages/CSS/Controls/Drawing/img/dsfr/create-point.svg b/src/packages/CSS/Controls/Drawing/img/dsfr/create-point.svg new file mode 100644 index 000000000..34f94ec9d --- /dev/null +++ b/src/packages/CSS/Controls/Drawing/img/dsfr/create-point.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/packages/CSS/Controls/Drawing/img/dsfr/create-polygon.svg b/src/packages/CSS/Controls/Drawing/img/dsfr/create-polygon.svg new file mode 100644 index 000000000..41ea144df --- /dev/null +++ b/src/packages/CSS/Controls/Drawing/img/dsfr/create-polygon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/packages/CSS/Controls/Drawing/img/dsfr/delete.svg b/src/packages/CSS/Controls/Drawing/img/dsfr/delete.svg new file mode 100644 index 000000000..072c67fff --- /dev/null +++ b/src/packages/CSS/Controls/Drawing/img/dsfr/delete.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/packages/CSS/Controls/Drawing/img/dsfr/edit-geom.svg b/src/packages/CSS/Controls/Drawing/img/dsfr/edit-geom.svg new file mode 100644 index 000000000..4fb2e7ab6 --- /dev/null +++ b/src/packages/CSS/Controls/Drawing/img/dsfr/edit-geom.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/packages/CSS/Controls/Drawing/img/dsfr/edit-style.svg b/src/packages/CSS/Controls/Drawing/img/dsfr/edit-style.svg new file mode 100644 index 000000000..9e4981c01 --- /dev/null +++ b/src/packages/CSS/Controls/Drawing/img/dsfr/edit-style.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/packages/CSS/Controls/Drawing/img/dsfr/edit-text.svg b/src/packages/CSS/Controls/Drawing/img/dsfr/edit-text.svg new file mode 100644 index 000000000..11a1dc74f --- /dev/null +++ b/src/packages/CSS/Controls/Drawing/img/dsfr/edit-text.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/packages/Controls/Drawing/DrawingDOM.js b/src/packages/Controls/Drawing/DrawingDOM.js index ee8fe59a1..b11a15e02 100644 --- a/src/packages/Controls/Drawing/DrawingDOM.js +++ b/src/packages/Controls/Drawing/DrawingDOM.js @@ -1,7 +1,12 @@ import Logger from "../../Utils/LoggerByDefault"; +import checkDsfr from "../Utils/CheckDsfr"; var logger = Logger.getLogger("DrawingDOM"); +/** + * DrawingDOM + * @type {Object} + */ var DrawingDOM = { /** @@ -283,7 +288,7 @@ var DrawingDOM = { p.innerHTML = sectionLabel; container.appendChild(p); - var ul = document.createElement("ul"); + var ul = document.createElement("div"); ul.className = "drawing-tools-flex-display fr-m-1w"; var context = this; // li click handler function @@ -297,8 +302,8 @@ var DrawingDOM = { if (this.dtOptions[type].panel !== panelType) { continue; } - var li = document.createElement("li"); - li.className = "drawing-tool fr-m-1w"; + var li = document.createElement("button"); + li.className = "drawing-tool fr-m-1w fr-btn fr-btn--tertiary gpf-btn--tertiary"; li.id = this._addUID("drawing-tool-" + this.dtOptions[type].id); li.title = this.dtOptions[type].label; li.addEventListener("click", liClickHandler); @@ -350,7 +355,7 @@ var DrawingDOM = { * @returns {DOMElement} - created li element */ _createMarkersChooser : function (options) { - var li = document.createElement("li"); + var li = document.createElement("div"); li.className = options.className; for (var i = 0; i < this.options.markersList.length; i++) { // radio bouton pour la selection @@ -389,7 +394,7 @@ var DrawingDOM = { * @returns {DOMElement} - created li element */ _createStylingElement : function (options) { - var li = document.createElement("li"); + var li = document.createElement("div"); li.className = options.className; var textNode = document.createTextNode(options.label); li.appendChild(textNode); @@ -400,6 +405,19 @@ var DrawingDOM = { // ie 11 input type== color ne marche pas... inputElem.type = "text"; } + if (options.type === "range") { + // For DSFR + li.dataset.frJsRange = "true"; + li.title = options.label; + + var value = options.defaultValue; + value = Math.round(((value - options.min) / (options.max - options.min)) * 100); + li.style.setProperty("--progress-right", value + "%"); + + inputElem.addEventListener("change", (e) => { + e.target.parentNode.style.setProperty("--progress-right", `${((e.target.value - options.min) / (options.max - options.min)) * 100}%`); + }); + } inputElem.id = options.id; inputElem.value = options.defaultValue; if (options.title) { @@ -434,9 +452,55 @@ var DrawingDOM = { * @returns {DOMElement} DOM element created */ _createStylingDiv : function (options) { + var dialog = document.createElement("dialog"); + dialog.className = "gp-styling-div gpf-panel fr-modal gpf-visible GPelementVisible"; + var mainDiv = document.createElement("div"); + mainDiv.className = "gpf-modal__body fr-modal__body"; + dialog.appendChild(mainDiv); + + // header DSFR + if (checkDsfr()) { + var header = document.createElement("div"); + header.className = "GPpanelHeader gpf-panel__header fr-modal__header fr-m-1w"; + + var divTitle = document.createElement("div"); + divTitle.className = "GPpanelTitle gpf-panel__title fr-modal__title fr-pt-4w"; + divTitle.innerHTML = "Modifier le style"; + header.appendChild(divTitle); + + var divClose = document.createElement("button"); + divClose.id = this._addUID("GPdrawingStylePanelClose"); + divClose.className = "GPpanelClose GPdrawingStylePanelClose gpf-btn gpf-btn-icon-close fr-btn--close fr-btn fr-btn--tertiary-no-outline fr-m-1w"; + divClose.title = "Fermer le panneau"; + + // Link panel close / visibility checkbox + var dtObj = this; + if (divClose.addEventListener) { + divClose.addEventListener("click", function () { + options.applyFunc.call(this, "cancel"); + }, false); + } else if (divClose.attachEvent) { + divClose.attachEvent("onclick", function () { + options.applyFunc.call(this, "cancel"); + }); + } + + var span = document.createElement("span"); + span.className = "GPelementHidden gpf-visible"; // afficher en dsfr + span.innerText = "Fermer"; + + divClose.appendChild(span); + + header.appendChild(divClose); + + mainDiv.appendChild(header); + } + var div = document.createElement("div"); - div.className = "gp-styling-div"; - var ul = document.createElement("ul"); + div.className = "gpf-modal__content fr-modal__content"; + mainDiv.appendChild(div); + + var ul = document.createElement("div"); var li = null; /* * TODO : finir de remplir la div pour tous les styles éditables. @@ -453,7 +517,7 @@ var DrawingDOM = { ul.appendChild(li); li = this._createStylingElement({ type : "range", - className : "gp-styling-option", + className : "gp-styling-option fr-range fr-range--sm", label : this.options.labels.markerSize, title : "petit, moyen ou grand", id : this._addUID("markerSize"), @@ -529,7 +593,7 @@ var DrawingDOM = { ul.appendChild(li); li = this._createStylingElement({ type : "range", - className : "gp-styling-option", + className : "gp-styling-option fr-range fr-range--sm", label : this.options.labels.strokeWidth, title : "1 à 10 pixels", id : this._addUID("strokeWidth"), @@ -551,7 +615,7 @@ var DrawingDOM = { ul.appendChild(li); li = this._createStylingElement({ type : "range", - className : "gp-styling-option", + className : "gp-styling-option fr-range fr-range--sm", label : this.options.labels.strokeWidth, title : "1 à 10 pixels", id : this._addUID("strokeWidth"), @@ -571,7 +635,7 @@ var DrawingDOM = { ul.appendChild(li); li = this._createStylingElement({ type : "range", - className : "gp-styling-option", + className : "gp-styling-option fr-range fr-range--sm", label : this.options.labels.fillOpacity, title : "0 (transparent) à 100% (opaque)", id : this._addUID("fillOpacity"), @@ -589,7 +653,7 @@ var DrawingDOM = { // apply button var applyButton = document.createElement("input"); applyButton.type = "button"; - applyButton.className = "gp-styling-button"; + applyButton.className = "gp-styling-button fr-btn fr-btn--tertiary"; applyButton.value = this.options.labels.applyToObject; /** click sur applyButton */ applyButton.onclick = function () { @@ -600,7 +664,7 @@ var DrawingDOM = { var setDefaultButton = document.createElement("input"); setDefaultButton.type = "button"; setDefaultButton.value = this.options.labels.setAsDefault; - setDefaultButton.className = "gp-styling-button"; + setDefaultButton.className = "gp-styling-button fr-btn fr-btn--tertiary"; /** click sur set Default Button */ setDefaultButton.onclick = function () { options.applyFunc.call(this, "default"); @@ -616,7 +680,7 @@ var DrawingDOM = { options.applyFunc.call(this, "cancel"); }; div.appendChild(cancelButton); - return div; + return dialog; }, /** @@ -634,18 +698,61 @@ var DrawingDOM = { * @private */ _createLabelDiv : function (options) { - var popup = document.createElement("div"); - popup.className = "gp-label-div"; + var popup = document.createElement("dialog"); + popup.className = "gp-label-div gpf-panel fr-modal gpf-visible GPelementVisible"; + var mainDiv = document.createElement("div"); + mainDiv.className = "gpf-modal__body fr-modal__body"; + popup.appendChild(mainDiv); + // header DSFR + if (checkDsfr()) { + var header = document.createElement("div"); + header.className = "GPpanelHeader gpf-panel__header fr-modal__header fr-m-1w"; + + var divTitle = document.createElement("div"); + divTitle.className = "GPpanelTitle gpf-panel__title fr-modal__title fr-pt-4w"; + divTitle.innerHTML = "Texte de l'annotation"; + header.appendChild(divTitle); + + var divClose = document.createElement("button"); + divClose.id = this._addUID("GPdrawingStylePanelClose"); + divClose.className = "GPpanelClose GPdrawingStylePanelClose gpf-btn gpf-btn-icon-close fr-btn--close fr-btn fr-btn--tertiary-no-outline fr-m-1w"; + divClose.title = "Fermer le panneau"; + + // Link panel close / visibility checkbox + var dtObj = this; + if (divClose.addEventListener) { + divClose.addEventListener("click", function () { + options.applyFunc.call(this, "cancel"); + }, false); + } else if (divClose.attachEvent) { + divClose.attachEvent("onclick", function () { + options.applyFunc.call(this, "cancel"); + }); + } + + var span = document.createElement("span"); + span.className = "GPelementHidden gpf-visible"; // afficher en dsfr + span.innerText = "Fermer"; + + divClose.appendChild(span); + + header.appendChild(divClose); + + mainDiv.appendChild(header); + } + var div = document.createElement("div"); + div.className = "gpf-modal__content fr-modal__content"; + mainDiv.appendChild(div); var inputLabel = null; if (options.geomType === "Text") { inputLabel = document.createElement("input"); inputLabel.type = "text"; - inputLabel.className = "gp-input-label-style"; + inputLabel.className = "gp-input-label-style fr-input"; } else { inputLabel = document.createElement("textArea"); inputLabel.rows = 2; inputLabel.cols = 40; - inputLabel.className = "gp-textarea-att-label-style"; + inputLabel.className = "gp-textarea-att-label-style fr-input"; } if (options.text) { @@ -655,11 +762,7 @@ var DrawingDOM = { inputLabel.autocomplete = "off"; inputLabel.placeholder = options.placeholder; inputLabel.id = options.inputId; - popup.appendChild(inputLabel); - // blur - inputLabel.onblur = function () { - options.applyFunc.call(this, options.key, inputLabel.value, true); - }; + div.appendChild(inputLabel); // keyup inputLabel.onkeyup = function (evtk) { if (options.geomType === "Text" && evtk.keyCode === 13) { @@ -676,20 +779,20 @@ var DrawingDOM = { inputMeasure.readonly = true; inputMeasure.className = "gp-input-measure-style"; inputMeasure.value = options.measure; - popup.appendChild(inputMeasure); + div.appendChild(inputMeasure); } if (options.geomType !== "Text") { // apply button var applyButton = document.createElement("input"); applyButton.type = "button"; - applyButton.className = "gp-styling-button"; + applyButton.className = "gp-styling-button fr-btn fr-btn--tertiary"; applyButton.value = this.options.labels.saveDescription; /** click sur applyButton */ applyButton.onclick = function () { options.applyFunc.call(this, options.key, inputLabel.value, true); }; - popup.appendChild(applyButton); + div.appendChild(applyButton); // cancel Button var cancelButton = document.createElement("input"); cancelButton.type = "button"; @@ -698,7 +801,7 @@ var DrawingDOM = { cancelButton.onclick = function () { options.applyFunc.call(this, options.key, inputLabel.value, false); }; - popup.appendChild(cancelButton); + div.appendChild(cancelButton); } return popup; @@ -717,15 +820,15 @@ var DrawingDOM = { var li = document.getElementById(availToolId); // ce n'est pas l'outil selectionne : on le desactive (s'il ne l'était pas déjà). if (availToolId !== toolId) { - li.className = "drawing-tool"; + li.className = "drawing-tool fr-m-1w fr-btn fr-btn--tertiary gpf-btn--tertiary"; context.dtOptions[availType].active = false; continue; } // ici, c'est le l'outil selectionne if (context.dtOptions[availType].active) { - li.className = "drawing-tool"; + li.className = "drawing-tool fr-m-1w fr-btn fr-btn--tertiary gpf-btn--tertiary"; } else { - li.className = "drawing-tool drawing-tool-active"; + li.className = "drawing-tool drawing-tool-active fr-m-1w fr-btn fr-btn--tertiary gpf-btn--tertiary"; } context.dtOptions[availType].active = !context.dtOptions[availType].active; }