vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-09-21 11:40:07 +02:00
Code Issues Packages Projects Releases Wiki Activity

Format CSS and TSX files.

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2022-07-09 20:56:01 -07:00
parent 0f4a8ee087
commit ae02780a1a
56 changed files with 17369 additions and 4610 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
libraries/bootstrap/css/bootstrap-colorpicker.css vendored
View File

@ -13,7 +13,7 @@
width: 100px;
height: 100px;
cursor: crosshair;
background-image: url("../img/bootstrap-colorpicker/saturation.png");
background-image: url('../img/bootstrap-colorpicker/saturation.png');
}
.colorpicker-saturation i {
@ -64,12 +64,12 @@
}
.colorpicker-hue {
background-image: url("../img/bootstrap-colorpicker/hue.png");
background-image: url('../img/bootstrap-colorpicker/hue.png');
}
.colorpicker-alpha {
display: none;
background-image: url("../img/bootstrap-colorpicker/alpha.png");
background-image: url('../img/bootstrap-colorpicker/alpha.png');
}
.colorpicker {
@ -89,7 +89,7 @@
.colorpicker:after {
display: table;
line-height: 0;
content: "";
content: '';
}
.colorpicker:after {
@ -135,7 +135,7 @@
height: 10px;
margin-top: 5px;
clear: both;
background-image: url("../img/bootstrap-colorpicker/alpha.png");
background-image: url('../img/bootstrap-colorpicker/alpha.png');
background-position: 0 100%;
}
@ -194,11 +194,11 @@
}
.colorpicker.colorpicker-horizontal .colorpicker-hue {
background-image: url("../img/bootstrap-colorpicker/hue-horizontal.png");
background-image: url('../img/bootstrap-colorpicker/hue-horizontal.png');
}
.colorpicker.colorpicker-horizontal .colorpicker-alpha {
background-image: url("../img/bootstrap-colorpicker/alpha-horizontal.png");
background-image: url('../img/bootstrap-colorpicker/alpha-horizontal.png');
}
.colorpicker.colorpicker-hidden {

178
libraries/bootstrap/css/bootstrap-colorpicker.min.css vendored
View File

@ -6,4 +6,180 @@
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0.txt
*
*/.colorpicker-saturation{float:left;width:100px;height:100px;cursor:crosshair;background-image:url("../img/bootstrap-colorpicker/saturation.png")}.colorpicker-saturation i{position:absolute;top:0;left:0;display:block;width:5px;height:5px;margin:-4px 0 0 -4px;border:1px solid #000;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.colorpicker-saturation i b{display:block;width:5px;height:5px;border:1px solid #fff;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.colorpicker-hue,.colorpicker-alpha{float:left;width:15px;height:100px;margin-bottom:4px;margin-left:4px;cursor:row-resize}.colorpicker-hue i,.colorpicker-alpha i{position:absolute;top:0;left:0;display:block;width:100%;height:1px;margin-top:-1px;background:#000;border-top:1px solid #fff}.colorpicker-hue{background-image:url("../img/bootstrap-colorpicker/hue.png")}.colorpicker-alpha{display:none;background-image:url("../img/bootstrap-colorpicker/alpha.png")}.colorpicker{top:0;left:0;z-index:2500;min-width:130px;padding:4px;margin-top:1px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;*zoom:1}.colorpicker:before,.colorpicker:after{display:table;line-height:0;content:""}.colorpicker:after{clear:both}.colorpicker:before{position:absolute;top:-7px;left:6px;display:inline-block;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-left:7px solid transparent;border-bottom-color:rgba(0,0,0,0.2);content:''}.colorpicker:after{position:absolute;top:-6px;left:7px;display:inline-block;border-right:6px solid transparent;border-bottom:6px solid #fff;border-left:6px solid transparent;content:''}.colorpicker div{position:relative}.colorpicker.colorpicker-with-alpha{min-width:140px}.colorpicker.colorpicker-with-alpha .colorpicker-alpha{display:block}.colorpicker-color{height:10px;margin-top:5px;clear:both;background-image:url("../img/bootstrap-colorpicker/alpha.png");background-position:0 100%}.colorpicker-color div{height:10px}.colorpicker-element .input-group-addon i{display:block;width:16px;height:16px;cursor:pointer}.colorpicker.colorpicker-inline{position:relative;display:inline-block;float:none}.colorpicker.colorpicker-horizontal{width:110px;height:auto;min-width:110px}.colorpicker.colorpicker-horizontal .colorpicker-saturation{margin-bottom:4px}.colorpicker.colorpicker-horizontal .colorpicker-color{width:100px}.colorpicker.colorpicker-horizontal .colorpicker-hue,.colorpicker.colorpicker-horizontal .colorpicker-alpha{float:left;width:100px;height:15px;margin-bottom:4px;margin-left:0;cursor:col-resize}.colorpicker.colorpicker-horizontal .colorpicker-hue i,.colorpicker.colorpicker-horizontal .colorpicker-alpha i{position:absolute;top:0;left:0;display:block;width:1px;height:15px;margin-top:0;background:#fff;border:0}.colorpicker.colorpicker-horizontal .colorpicker-hue{background-image:url("../img/bootstrap-colorpicker/hue-horizontal.png")}.colorpicker.colorpicker-horizontal .colorpicker-alpha{background-image:url("../img/bootstrap-colorpicker/alpha-horizontal.png")}.colorpicker.colorpicker-hidden{display:none}.colorpicker.colorpicker-visible{display:block}.colorpicker-inline.colorpicker-visible{display:inline-block}
*/
.colorpicker-saturation {
float: left;
width: 100px;
height: 100px;
cursor: crosshair;
background-image: url('../img/bootstrap-colorpicker/saturation.png');
}
.colorpicker-saturation i {
position: absolute;
top: 0;
left: 0;
display: block;
width: 5px;
height: 5px;
margin: -4px 0 0 -4px;
border: 1px solid #000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.colorpicker-saturation i b {
display: block;
width: 5px;
height: 5px;
border: 1px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.colorpicker-hue,
.colorpicker-alpha {
float: left;
width: 15px;
height: 100px;
margin-bottom: 4px;
margin-left: 4px;
cursor: row-resize;
}
.colorpicker-hue i,
.colorpicker-alpha i {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 1px;
margin-top: -1px;
background: #000;
border-top: 1px solid #fff;
}
.colorpicker-hue {
background-image: url('../img/bootstrap-colorpicker/hue.png');
}
.colorpicker-alpha {
display: none;
background-image: url('../img/bootstrap-colorpicker/alpha.png');
}
.colorpicker {
top: 0;
left: 0;
z-index: 2500;
min-width: 130px;
padding: 4px;
margin-top: 1px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
*zoom: 1;
}
.colorpicker:before,
.colorpicker:after {
display: table;
line-height: 0;
content: '';
}
.colorpicker:after {
clear: both;
}
.colorpicker:before {
position: absolute;
top: -7px;
left: 6px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.colorpicker:after {
position: absolute;
top: -6px;
left: 7px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
border-left: 6px solid transparent;
content: '';
}
.colorpicker div {
position: relative;
}
.colorpicker.colorpicker-with-alpha {
min-width: 140px;
}
.colorpicker.colorpicker-with-alpha .colorpicker-alpha {
display: block;
}
.colorpicker-color {
height: 10px;
margin-top: 5px;
clear: both;
background-image: url('../img/bootstrap-colorpicker/alpha.png');
background-position: 0 100%;
}
.colorpicker-color div {
height: 10px;
}
.colorpicker-element .input-group-addon i {
display: block;
width: 16px;
height: 16px;
cursor: pointer;
}
.colorpicker.colorpicker-inline {
position: relative;
display: inline-block;
float: none;
}
.colorpicker.colorpicker-horizontal {
width: 110px;
height: auto;
min-width: 110px;
}
.colorpicker.colorpicker-horizontal .colorpicker-saturation {
margin-bottom: 4px;
}
.colorpicker.colorpicker-horizontal .colorpicker-color {
width: 100px;
}
.colorpicker.colorpicker-horizontal .colorpicker-hue,
.colorpicker.colorpicker-horizontal .colorpicker-alpha {
float: left;
width: 100px;
height: 15px;
margin-bottom: 4px;
margin-left: 0;
cursor: col-resize;
}
.colorpicker.colorpicker-horizontal .colorpicker-hue i,
.colorpicker.colorpicker-horizontal .colorpicker-alpha i {
position: absolute;
top: 0;
left: 0;
display: block;
width: 1px;
height: 15px;
margin-top: 0;
background: #fff;
border: 0;
}
.colorpicker.colorpicker-horizontal .colorpicker-hue {
background-image: url('../img/bootstrap-colorpicker/hue-horizontal.png');
}
.colorpicker.colorpicker-horizontal .colorpicker-alpha {
background-image: url('../img/bootstrap-colorpicker/alpha-horizontal.png');
}
.colorpicker.colorpicker-hidden {
display: none;
}
.colorpicker.colorpicker-visible {
display: block;
}
.colorpicker-inline.colorpicker-visible {
display: inline-block;
}

48
libraries/bootstrap/css/bootstrap-theme.css vendored
View File

@ -10,9 +10,9 @@
.btn-info,
.btn-warning,
.btn-danger {
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
}
.btn-default:active,
.btn-primary:active,
@ -26,8 +26,8 @@
.btn-info.active,
.btn-warning.active,
.btn-danger.active {
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn:active,
.btn.active {
@ -145,8 +145,8 @@
}
.thumbnail,
.img-thumbnail {
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
@ -172,20 +172,20 @@
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
}
.navbar-default .navbar-nav > .active > a {
background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f3f3f3 100%);
background-image: linear-gradient(to bottom, #ebebeb 0%, #f3f3f3 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff3f3f3', GradientType=0);
background-repeat: repeat-x;
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
}
.navbar-brand,
.navbar-nav > li > a {
text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.navbar-inverse {
background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222 100%);
@ -199,12 +199,12 @@
background-image: linear-gradient(to bottom, #222 0%, #282828 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff282828', GradientType=0);
background-repeat: repeat-x;
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25);
}
.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-nav > li > a {
text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.navbar-static-top,
.navbar-fixed-top,
@ -212,9 +212,9 @@
border-radius: 0;
}
.alert {
text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.alert-success {
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
@ -282,8 +282,8 @@
}
.list-group {
border-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
}
.list-group-item.active,
.list-group-item.active:hover,
@ -296,8 +296,8 @@
border-color: #3278b3;
}
.panel {
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.panel-default > .panel-heading {
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
@ -341,7 +341,7 @@
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);
background-repeat: repeat-x;
border-color: #dcdcdc;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
}
/*# sourceMappingURL=bootstrap-theme.css.map */

341
libraries/bootstrap/css/bootstrap-theme.min.css vendored
View File

File diff suppressed because one or more lines are too long

1024
libraries/bootstrap/css/bootstrap.css vendored
View File

File diff suppressed because it is too large Load Diff

6046
libraries/bootstrap/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
packages/editor/src/bootstrap-fixes.css vendored
View File

@ -15,6 +15,6 @@
top: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.5);
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}

6053
packages/editor/src/bootstrap-prefix.min.css vendored
View File

File diff suppressed because one or more lines are too long

17
packages/editor/src/components/toolbar/global-styled.css
View File

@ -1,9 +1,9 @@
div#header {
width: 100%;
height:50px;
height: 50px;
position: absolute;
top: 0;
z-index:1000;
z-index: 1000;
}
div#headerNotifier {
@ -33,13 +33,13 @@ div#toolbarRight {
display: inline;
}
#account >img {
#account > img {
width: 36x;
height: 36px;
}
#accountSettingsPanel{
padding:10px 10px;
#accountSettingsPanel {
padding: 10px 10px;
}
#share {
@ -64,7 +64,8 @@ div#toolbarRight {
}
.actionButton:hover {
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
div#toolbar {
@ -85,7 +86,7 @@ div#toolbar .buttonContainer {
border-left: 1px solid lightgray;
}
div#mapName >span {
div#mapName > span {
border-radius: 4px;
float: left;
padding: 8px;
@ -165,7 +166,7 @@ div#toolbar .buttonExtActive {
div#toolbar .buttonExtOn {
opacity: 0.8;
cursor: pointer
cursor: pointer;
}
div#toolbar .buttonExtOff {

33
packages/editor/src/components/toolbar/index.tsx
View File

@ -56,7 +56,9 @@ export default function Toolbar({
</ToolbarButton>
</div>
)}
{(editorMode === 'edition-editor' || editorMode === 'edition-owner' || editorMode === 'showcase') && (
{(editorMode === 'edition-editor' ||
editorMode === 'edition-owner' ||
editorMode === 'showcase') && (
<>
<div id="edit" className="buttonContainer">
<ToolbarButton id="undoEdition" className="buttonOn">
@ -118,36 +120,22 @@ export default function Toolbar({
</>
)}
<ToolbarRightContainer>
<ToolbarButton
id="export"
className="buttonOn"
onClick={() => onAction('export')}
>
<ToolbarButton id="export" className="buttonOn" onClick={() => onAction('export')}>
<img src={ExportSvg} />
</ToolbarButton>
{(editorMode === 'edition-owner' || editorMode === 'edition-editor' || editorMode === 'edition-viewer') && (
<ToolbarButton
id="print"
className="buttonOn"
onClick={() => onAction('print')}
>
{(editorMode === 'edition-owner' ||
editorMode === 'edition-editor' ||
editorMode === 'edition-viewer') && (
<ToolbarButton id="print" className="buttonOn" onClick={() => onAction('print')}>
<img src={PrintSvg} />
</ToolbarButton>
)}
<ToolbarButton
id="info"
className="buttonOn"
onClick={() => onAction('info')}
>
<ToolbarButton id="info" className="buttonOn" onClick={() => onAction('info')}>
<img src={InfoSvg} />
</ToolbarButton>
{editorMode === 'edition-owner' && (
<>
<ToolbarButton
id="history"
className="buttonOn"
onClick={() => onAction('history')}
>
<ToolbarButton id="history" className="buttonOn" onClick={() => onAction('history')}>
<img src={HistorySvg} />
</ToolbarButton>
<ToolbarButton
@ -168,7 +156,6 @@ export default function Toolbar({
<ActionButton onClick={() => onAction('share')}>
{intl.formatMessage({ id: 'action.share', defaultMessage: 'Share' })}
</ActionButton>
)}
</ToolbarRightContainer>
</div>

15
packages/editor/src/global-styled.css
View File

@ -1,8 +1,8 @@
/********************************************************************************/
/* Header & Toolbar Styles */
/********************************************************************************/
@import "bootstrap-prefix.min.css";
@import "bootstrap-fixes.css";
@import 'bootstrap-prefix.min.css';
@import 'bootstrap-fixes.css';
html {
/* avoid bootstrap overriding font-size and breaking Mui */
@ -32,7 +32,8 @@ div#mindplot {
overflow: hidden;
opacity: 1;
background-color: #f2f2f2;
background-image: linear-gradient(#ebe9e7 1px, transparent 1px), linear-gradient(to right, #ebe9e7 1px, #f2f2f2 1px);
background-image: linear-gradient(#ebe9e7 1px, transparent 1px),
linear-gradient(to right, #ebe9e7 1px, #f2f2f2 1px);
background-size: 50px 50px;
}
@ -124,7 +125,7 @@ div.shareModalDialog {
height: 20px;
margin-left: 4px;
margin-top: 3px;
cursor: pointer
cursor: pointer;
}
.panelIcon:hover {
@ -158,7 +159,7 @@ div#position {
background-position: center;
background-repeat: no-repeat;
background-size: 40px 40px;
background-color: #FFF;
background-color: #fff;
border-radius: 8px;
}
@ -176,7 +177,7 @@ div#position {
background-size: 40px 40px;
background-position: center;
cursor: pointer;
background-color: #FFF;
background-color: #fff;
}
#zoom-plus {
@ -187,7 +188,7 @@ div#position {
border-radius: 0 0 8px 8px;
}
div#shotcuts > img{
div#shotcuts > img {
margin: 20px 0;
width: 40px;
height: 40px;

2
packages/editor/test/playground/map-render/css/viewmode.css
View File

@ -25,7 +25,7 @@ div#footer-logo {
}
div#mindplot {
top:0;
top: 0;
}
#toolbar {

5
packages/editor/test/playground/map-render/js/editor.tsx
View File

@ -21,7 +21,6 @@ import Editor, { EditorOptions } from '../../../../src/index';
import { LocalStorageManager, Designer } from '@wisemapping/mindplot';
const initialization = (designer: Designer) => {
designer.addEvent('loadSuccess', () => {
const elem = document.getElementById('mindplot');
if (elem) {
@ -35,10 +34,10 @@ const mapId = 'welcome';
const options: EditorOptions = {
zoom: 0.8,
locked: false,
mapTitle: "Develop WiseMapping",
mapTitle: 'Develop WiseMapping',
mode: 'edition-owner',
locale: 'en',
enableKeyboardEvents: true
enableKeyboardEvents: true,
};
ReactDOM.render(

6
packages/editor/test/playground/map-render/js/viewmode.tsx
View File

@ -5,7 +5,6 @@ import Editor, { EditorOptions } from '../../../../src/index';
import { LocalStorageManager, Designer } from '@wisemapping/mindplot';
const initialization = (designer: Designer) => {
designer.addEvent('loadSuccess', () => {
const elem = document.getElementById('mindplot');
if (elem) {
@ -25,7 +24,6 @@ const initialization = (designer: Designer) => {
option.selected = option.value === mapId;
});
}
});
};
@ -36,10 +34,10 @@ const persistence = new LocalStorageManager('samples/{id}.wxml', false);
const options: EditorOptions = {
zoom: 0.8,
locked: false,
mapTitle: "Develop WiseMapping",
mapTitle: 'Develop WiseMapping',
mode: 'viewonly',
locale: 'en',
enableKeyboardEvents: true
enableKeyboardEvents: true,
};
ReactDOM.render(

5
packages/web2d/test/playground/styles.css
View File

@ -1,5 +1,4 @@
body
{
body {
font-size: 1em !important;
color: #000 !important;
font-family: Arial !important;
@ -22,4 +21,4 @@ tbody tr td:first-child {
.eventForm {
float: left;
margin: 10px;
}
}

5
packages/webapp/src/classes/client/client-health-sentinel/index.tsx
View File

@ -26,10 +26,7 @@ const ClientHealthSentinel = (): React.ReactElement => {
fullWidth={true}
>
<DialogTitle>
<FormattedMessage
id="expired.title"
defaultMessage="Your session has expired"
/>
<FormattedMessage id="expired.title" defaultMessage="Your session has expired" />
</DialogTitle>
<DialogContent>

26
packages/webapp/src/components/editor-page/index.tsx
View File

@ -40,13 +40,15 @@ const EditorPage = ({ isTryMode }: EditorPropsType): React.ReactElement => {
}
if (!fetchResult.map) {
throw new Error(`Map info could not be loaded. Info not present: ${JSON.stringify(fetchResult)}`);
throw new Error(
`Map info could not be loaded. Info not present: ${JSON.stringify(fetchResult)}`,
);
}
result = `edition-${fetchResult.map.role}`;
}
}
return result;
}
};
// What is the role ?
const mapId = EditorOptionsBuilder.loadMapId();
@ -69,22 +71,24 @@ const EditorPage = ({ isTryMode }: EditorPropsType): React.ReactElement => {
defaultLocale={Locales.EN.code}
messages={userLocale.message as Record<string, string>}
>
<Editor onAction={setActiveDialog}
<Editor
onAction={setActiveDialog}
options={options}
persistenceManager={persistence}
mapId={mapId} />
{
activeDialog &&
mapId={mapId}
/>
{activeDialog && (
<ActionDispatcher
action={activeDialog}
onClose={() => setActiveDialog(null)}
mapsId={[mapId]}
fromEditor
/>
}
</IntlProvider>) : <></>
}
)}
</IntlProvider>
) : (
<></>
);
};
export default EditorPage;

15
packages/webapp/src/components/forgot-password-page/index.tsx
View File

@ -31,7 +31,7 @@ const ForgotPassword = () => {
onError: (error) => {
setError(error);
},
}
},
);
const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>) => {
@ -55,7 +55,7 @@ const ForgotPassword = () => {
<GlobalError error={error} />
<form onSubmit={handleOnSubmit}>
<input type='hidden' value={getCsrfToken()} name={getCsrfTokenParameter()} />
<input type="hidden" value={getCsrfToken()} name={getCsrfTokenParameter()} />
<Input
type="email"
name="email"
@ -79,8 +79,15 @@ const ForgotPassword = () => {
const ForgotPasswordPage = (): React.ReactElement => {
const intl = useIntl();
useEffect(() => {
document.title = intl.formatMessage({ id: 'forgot.page-title', defaultMessage: 'Forgot Password | WiseMapping' });
ReactGA.send({ hitType: 'pageview', page: window.location.pathname, title: 'ForgotPassword:Init' });
document.title = intl.formatMessage({
id: 'forgot.page-title',
defaultMessage: 'Forgot Password | WiseMapping',
});
ReactGA.send({
hitType: 'pageview',
page: window.location.pathname,
title: 'ForgotPassword:Init',
});
}, []);
return (

11
packages/webapp/src/components/forgot-password-success-page/index.tsx
View File

@ -12,8 +12,15 @@ const ForgotPasswordSuccessPage = (): React.ReactElement => {
const intl = useIntl();
useEffect(() => {
document.title = intl.formatMessage({ id: 'forgotsuccess.page-title', defaultMessage: 'Password Recovered | WiseMapping' });
ReactGA.send({ hitType: 'pageview', page: window.location.pathname, title: 'ForgotPassword:Success' });
document.title = intl.formatMessage({
id: 'forgotsuccess.page-title',
defaultMessage: 'Password Recovered | WiseMapping',
});
ReactGA.send({
hitType: 'pageview',
page: window.location.pathname,
title: 'ForgotPassword:Success',
});
});
return (

4
packages/webapp/src/components/form/input/index.tsx
View File

@ -13,8 +13,8 @@ type InputProps = {
autoComplete?: string;
fullWidth?: boolean;
disabled?: boolean;
maxLength?: number,
rows?: number
maxLength?: number;
rows?: number;
};
const Input = ({

15
packages/webapp/src/components/layout/footer/index.tsx
View File

@ -28,10 +28,7 @@ const Footer = (): React.ReactElement => {
</div>
<div>
<a href="https://www.wisemapping.com/termsofuse.html">
<FormattedMessage
id="footer.termsandconditions"
defaultMessage="Term And Conditions"
/>
<FormattedMessage id="footer.termsandconditions" defaultMessage="Term And Conditions" />
</a>
</div>
</div>
@ -61,18 +58,12 @@ const Footer = (): React.ReactElement => {
</h4>
<div>
<a href="https://www.paypal.com/donate/?hosted_button_id=CF7GJ7T6E4RS4">
<FormattedMessage
id="footer.donations"
defaultMessage="Donations"
/>
<FormattedMessage id="footer.donations" defaultMessage="Donations" />
</a>
</div>
<div>
<a href="http://www.wisemapping.org/">
<FormattedMessage
id="footer.opensource"
defaultMessage="Open Source"
/>
<FormattedMessage id="footer.opensource" defaultMessage="Open Source" />
</a>
</div>
</div>

10
packages/webapp/src/components/layout/header/index.tsx
View File

@ -19,10 +19,7 @@ export const Header = ({ type }: HeaderProps): React.ReactElement => {
text = (
<span className="header-area-content-span">
<span>
<FormattedMessage
id="header.donthaveaccount"
defaultMessage="Don't have an account ?"
/>
<FormattedMessage id="header.donthaveaccount" defaultMessage="Don't have an account ?" />
</span>
</span>
);
@ -31,10 +28,7 @@ export const Header = ({ type }: HeaderProps): React.ReactElement => {
text = (
<span className="header-area-content-span">
<span>
<FormattedMessage
id="header.haveaccount"
defaultMessage="Already have an account?"
/>
<FormattedMessage id="header.haveaccount" defaultMessage="Already have an account?" />
</span>
</span>
);

12
packages/webapp/src/components/login-page/index.tsx
View File

@ -69,7 +69,10 @@ const LoginPage = (): React.ReactElement => {
const intl = useIntl();
useEffect(() => {
document.title = intl.formatMessage({ id: 'login.page-title', defaultMessage: 'Login | WiseMapping' });
document.title = intl.formatMessage({
id: 'login.page-title',
defaultMessage: 'Login | WiseMapping',
});
ReactGA.send({ hitType: 'pageview', page: window.location.pathname, title: 'Login' });
}, []);
@ -90,7 +93,7 @@ const LoginPage = (): React.ReactElement => {
<FormControl>
<form action="/c/perform-login" method="POST">
<input type='hidden' value={getCsrfToken()} name={getCsrfTokenParameter()} />
<input type="hidden" value={getCsrfToken()} name={getCsrfTokenParameter()} />
<Input
name="username"
type="email"
@ -114,10 +117,7 @@ const LoginPage = (): React.ReactElement => {
<div>
<input name="remember-me" id="remember-me" type="checkbox" />
<label htmlFor="remember-me">
<FormattedMessage
id="login.remberme"
defaultMessage="Remember me"
/>
<FormattedMessage id="login.remberme" defaultMessage="Remember me" />
</label>
</div>
<SubmitButton

9
packages/webapp/src/components/maps-page/account-menu/account-info-dialog/index.tsx
View File

@ -45,7 +45,7 @@ const AccountInfoDialog = ({ onClose }: AccountInfoDialogProps): React.ReactElem
onError: (error) => {
setError(error);
},
}
},
);
const mutationRemove = useMutation<void, ErrorInfo, void>(
@ -60,7 +60,7 @@ const AccountInfoDialog = ({ onClose }: AccountInfoDialogProps): React.ReactElem
onError: (error) => {
setError(error);
},
}
},
);
const account = fetchAccount();
@ -168,7 +168,10 @@ const AccountInfoDialog = ({ onClose }: AccountInfoDialogProps): React.ReactElem
color="primary"
/>
}
label={intl.formatMessage({ id: 'accountinfo.deleteaccount', defaultMessage: 'Delete Account' })}
label={intl.formatMessage({
id: 'accountinfo.deleteaccount',
defaultMessage: 'Delete Account',
})}
/>
</FormGroup>
</FormControl>

2
packages/webapp/src/components/maps-page/account-menu/change-password-dialog/index.tsx
View File

@ -35,7 +35,7 @@ const ChangePasswordDialog = ({ onClose }: ChangePasswordDialogProps): React.Rea
onError: (error) => {
setError(error);
},
}
},
);
const handleOnClose = (): void => {

10
packages/webapp/src/components/maps-page/account-menu/index.tsx
View File

@ -83,7 +83,7 @@ const AccountMenu = (): React.ReactElement => {
</MenuItem>
<MenuItem onClick={handleClose}>
<form action="/c/logout" method='POST' id="logoutFrom"></form>
<form action="/c/logout" method="POST" id="logoutFrom"></form>
<Link color="textSecondary" href="/c/logout" onClick={(e) => handleLogout(e)}>
<ListItemIcon>
<ExitToAppOutlined fontSize="small" />
@ -92,13 +92,9 @@ const AccountMenu = (): React.ReactElement => {
</Link>
</MenuItem>
</Menu>
{
action == 'change-password' && (
<ChangePasswordDialog onClose={() => setAction(undefined)} />
)
}
{action == 'change-password' && <ChangePasswordDialog onClose={() => setAction(undefined)} />}
{action == 'account-info' && <AccountInfoDialog onClose={() => setAction(undefined)} />}
</span >
</span>
);
};

4
packages/webapp/src/components/maps-page/action-chooser/index.tsx
View File

@ -44,7 +44,7 @@ const ActionChooser = (props: ActionProps): React.ReactElement => {
const { anchor, onClose, mapId } = props;
const handleOnClose = (
action: ActionType
action: ActionType,
): ((event: React.MouseEvent<HTMLLIElement>) => void) => {
return (event): void => {
event.stopPropagation();
@ -144,7 +144,7 @@ const ActionChooser = (props: ActionProps): React.ReactElement => {
{role != 'viewer' && (
<MenuItem onClick={handleOnClose('history')}>
<ListItemIcon>
<HistoryOutlined/>
<HistoryOutlined />
</ListItemIcon>
<FormattedMessage id="action.history" defaultMessage="History" />
</MenuItem>

4
packages/webapp/src/components/maps-page/action-dispatcher/add-label-dialog/index.tsx
View File

@ -25,7 +25,7 @@ type AddLabelFormProps = {
const AddLabelDialog = ({ onAdd }: AddLabelFormProps): React.ReactElement => {
const intl = useIntl();
const [createLabelColorIndex, setCreateLabelColorIndex] = React.useState(
Math.floor(Math.random() * labelColors.length)
Math.floor(Math.random() * labelColors.length),
);
const [newLabelTitle, setNewLabelTitle] = React.useState('');
@ -91,6 +91,6 @@ const AddLabelDialog = ({ onAdd }: AddLabelFormProps): React.ReactElement => {
</NewLabelContainer>
</CreateLabel>
);
}
};
export default AddLabelDialog;

7
packages/webapp/src/components/maps-page/action-dispatcher/base-dialog/index.tsx
View File

@ -29,7 +29,7 @@ const BaseDialog = (props: DialogProps): React.ReactElement => {
useEffect(() => {
dispatch(disableHotkeys());
return () => {
dispatch(enableHotkeys())
dispatch(enableHotkeys());
};
}, []);
const { onClose, onSubmit, maxWidth = 'sm', PaperProps } = props;
@ -65,10 +65,7 @@ const BaseDialog = (props: DialogProps): React.ReactElement => {
<StyledDialogActions>
<Button type="button" color="primary" size="medium" onClick={onClose}>
{onSubmit ? (
<FormattedMessage
id="action.cancel-button"
defaultMessage="Cancel"
/>
<FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />
) : (
<FormattedMessage id="action.close-button" defaultMessage="Close" />
)}

2
packages/webapp/src/components/maps-page/action-dispatcher/create-dialog/index.tsx
View File

@ -36,7 +36,7 @@ const CreateDialog = ({ onClose }: CreateProps): React.ReactElement => {
onError: (error) => {
setError(error);
},
}
},
);
const handleOnClose = (): void => {

7
packages/webapp/src/components/maps-page/action-dispatcher/delete-dialog/index.tsx
View File

@ -30,8 +30,11 @@ const DeleteDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement
mutation.mutate(mapId);
};
const { map } = fetchMapById(mapId)
const alertTitle = `${intl.formatMessage({ id: 'action.delete-title', defaultMessage: 'Delete' })} ${map?.title}`;
const { map } = fetchMapById(mapId);
const alertTitle = `${intl.formatMessage({
id: 'action.delete-title',
defaultMessage: 'Delete',
})} ${map?.title}`;
return (
<div>
<BaseDialog

5
packages/webapp/src/components/maps-page/action-dispatcher/delete-multiselect-dialog/index.tsx
View File

@ -9,10 +9,7 @@ import BaseDialog from '../base-dialog';
import Alert from '@mui/material/Alert';
import AlertTitle from '@mui/material/AlertTitle';
const DeleteMultiselectDialog = ({
onClose,
mapsId,
}: MultiDialogProps): React.ReactElement => {
const DeleteMultiselectDialog = ({ onClose, mapsId }: MultiDialogProps): React.ReactElement => {
const intl = useIntl();
const client: Client = useSelector(activeInstance);
const queryClient = useQueryClient();

2
packages/webapp/src/components/maps-page/action-dispatcher/duplicate-dialog/index.tsx
View File

@ -36,7 +36,7 @@ const DuplicateDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElem
onError: (error) => {
setError(error);
},
}
},
);
const handleOnClose = (): void => {

46
packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/index.tsx
View File

@ -10,7 +10,13 @@ import FormControlLabel from '@mui/material/FormControlLabel';
import Radio from '@mui/material/Radio';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import { Designer, TextExporterFactory, ImageExporterFactory, Exporter, Mindmap } from '@wisemapping/mindplot';
import {
Designer,
TextExporterFactory,
ImageExporterFactory,
Exporter,
Mindmap,
} from '@wisemapping/mindplot';
import Client from '../../../../classes/client';
import { activeInstance } from '../../../../redux/clientSlice';
@ -31,7 +37,7 @@ type ExportDialogProps = {
const ExportDialog = ({
mapId,
onClose,
enableImgExport
enableImgExport,
}: ExportDialogProps): React.ReactElement => {
const intl = useIntl();
const [submit, setSubmit] = React.useState<boolean>(false);
@ -39,13 +45,13 @@ const ExportDialog = ({
const client: Client = useSelector(activeInstance);
const [exportGroup, setExportGroup] = React.useState<ExportGroup>(
enableImgExport ? 'image' : 'document'
enableImgExport ? 'image' : 'document',
);
const [exportFormat, setExportFormat] = React.useState<ExportFormat>(
enableImgExport ? 'svg' : 'txt'
enableImgExport ? 'svg' : 'txt',
);
const [zoomToFit, setZoomToFit] = React.useState<boolean>(true)
const [zoomToFit, setZoomToFit] = React.useState<boolean>(true);
const classes = useStyles();
@ -105,7 +111,13 @@ const ExportDialog = ({
case 'png':
case 'jpg':
case 'svg': {
exporter = ImageExporterFactory.create(formatType, svgElement, size.width, size.height, zoomToFit);
exporter = ImageExporterFactory.create(
formatType,
svgElement,
size.width,
size.height,
zoomToFit,
);
break;
}
case 'wxml':
@ -139,8 +151,9 @@ const ExportDialog = ({
// Clean up ...
URL.revokeObjectURL(url);
document.body.removeChild(anchor);
}).catch((fail) => {
console.error("Unexpected error during export:" + fail);
})
.catch((fail) => {
console.error('Unexpected error during export:' + fail);
});
onClose();
@ -153,18 +166,21 @@ const ExportDialog = ({
onClose={handleOnClose}
onSubmit={handleOnSubmit}
title={intl.formatMessage({ id: 'export.title', defaultMessage: 'Export' })}
description={intl.formatMessage({ id: 'export.desc', defaultMessage: 'Export this map in the format that you want and start using it in your presentations or sharing by email' })}
description={intl.formatMessage({
id: 'export.desc',
defaultMessage:
'Export this map in the format that you want and start using it in your presentations or sharing by email',
})}
submitButton={intl.formatMessage({ id: 'export.title', defaultMessage: 'Export' })}
>
{
!enableImgExport &&
{!enableImgExport && (
<Alert severity="info">
<FormattedMessage
id="export.warning"
defaultMessage="Exporting to Image (SVG,PNG,JPEG,PDF) is only available in the editor toolbar."
/>
</Alert>
}
)}
<FormControl component="fieldset">
<RadioGroup name="export" value={exportGroup} onChange={handleOnGroupChange}>
<FormControl>
@ -204,9 +220,9 @@ const ExportDialog = ({
control={<Checkbox checked={zoomToFit} onChange={handleOnZoomToFit} />}
label={intl.formatMessage({
id: 'export.img-center',
defaultMessage:
'Center and zoom to fit',
})} />
defaultMessage: 'Center and zoom to fit',
})}
/>
</>
)}
</FormControl>

37
packages/webapp/src/components/maps-page/action-dispatcher/history-dialog/index.tsx
View File

@ -57,16 +57,10 @@ const HistoryDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElemen
<TableHead>
<TableRow>
<TableCell align="left">
<FormattedMessage
id="maps.modified-by"
defaultMessage="Modified By"
/>
<FormattedMessage id="maps.modified-by" defaultMessage="Modified By" />
</TableCell>
<TableCell align="left">
<FormattedMessage
id="maps.modified"
defaultMessage="Modified"
/>
<FormattedMessage id="maps.modified" defaultMessage="Modified" />
</TableCell>
<TableCell align="left"></TableCell>
<TableCell align="left"></TableCell>
@ -88,35 +82,20 @@ const HistoryDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElemen
<TableCell align="left">{row.lastModificationBy}</TableCell>
<TableCell align="left">
<Tooltip
title={dayjs(row.lastModificationTime).format(
'lll'
)}
title={dayjs(row.lastModificationTime).format('lll')}
placement="bottom-start"
>
<span>
{dayjs(row.lastModificationTime).fromNow()}
</span>
<span>{dayjs(row.lastModificationTime).fromNow()}</span>
</Tooltip>
</TableCell>
<TableCell align="left">
<Link
href={`/c/maps/${mapId}/${row.id}/view`}
target="history"
>
<FormattedMessage
id="maps.view"
defaultMessage="View"
/>
<Link href={`/c/maps/${mapId}/${row.id}/view`} target="history">
<FormattedMessage id="maps.view" defaultMessage="View" />
</Link>
</TableCell>
<TableCell align="left">
<Link
href="#"
onClick={(e) => handleOnClick(e, row.id)}>
<FormattedMessage
id="maps.revert"
defaultMessage="Revert"
/>
<Link href="#" onClick={(e) => handleOnClick(e, row.id)}>
<FormattedMessage id="maps.revert" defaultMessage="Revert" />
</Link>
</TableCell>
</TableRow>

46
packages/webapp/src/components/maps-page/action-dispatcher/import-dialog/index.tsx
View File

@ -26,14 +26,14 @@ export type CreateProps = {
type ErrorFile = {
error: boolean;
message: string;
}
};
const defaultModel: ImportModel = { title: '' };
const ImportDialog = ({ onClose }: CreateProps): React.ReactElement => {
const client: Client = useSelector(activeInstance);
const [model, setModel] = React.useState<ImportModel>(defaultModel);
const [error, setError] = React.useState<ErrorInfo>();
const [errorFile, setErrorFile] = React.useState<ErrorFile>({error: false, message: ''});
const [errorFile, setErrorFile] = React.useState<ErrorFile>({ error: false, message: '' });
const intl = useIntl();
const mutation = useMutation<number, ErrorInfo, ImportModel>(
@ -47,7 +47,7 @@ const ImportDialog = ({ onClose }: CreateProps): React.ReactElement => {
onError: (error) => {
setError(error);
},
}
},
);
const handleOnClose = (): void => {
@ -92,40 +92,45 @@ const ImportDialog = ({ onClose }: CreateProps): React.ReactElement => {
if (!extensionAccept.includes(extensionFile)) {
setErrorFile({
error: true,
message: intl.formatMessage({
message: intl.formatMessage(
{
id: 'import.error-file',
defaultMessage: 'Import error {error}',
},
{
error: 'You can import WiseMapping and Freemind maps to your list of maps. Select the file you want to import.'
})
error:
'You can import WiseMapping and Freemind maps to your list of maps. Select the file you want to import.',
},
),
});
}
model.contentType = 'application/xml'
model.contentType = 'application/xml';
const fileContent = event?.target?.result;
const mapConent: string = typeof fileContent === 'string' ? fileContent : fileContent.toString();
const mapConent: string =
typeof fileContent === 'string' ? fileContent : fileContent.toString();
try {
const importer: Importer = TextImporterFactory.create(extensionFile, mapConent)
const importer: Importer = TextImporterFactory.create(extensionFile, mapConent);
importer.import(model.title, model.description)
.then(res => {
importer.import(model.title, model.description).then((res) => {
model.content = res;
setModel({ ...model });
})
});
} catch (e) {
if (e instanceof Error) {
setErrorFile({
error: true,
message: intl.formatMessage({
message: intl.formatMessage(
{
id: 'import.error-file',
defaultMessage: 'Import error {error}',
},
{
error: e.message
})
error: e.message,
},
),
});
}
}
@ -153,11 +158,11 @@ const ImportDialog = ({ onClose }: CreateProps): React.ReactElement => {
})}
submitButton={intl.formatMessage({ id: 'import.button', defaultMessage: 'Create' })}
>
{errorFile.error &&
<Alert severity='error'>
{errorFile.error && (
<Alert severity="error">
<p>{errorFile.message}</p>
</Alert>
}
)}
<FormControl fullWidth={true}>
<input
accept=".wxml,.mm"
@ -201,10 +206,7 @@ const ImportDialog = ({ onClose }: CreateProps): React.ReactElement => {
component="span"
style={{ margin: '10px 5px', width: '100%' }}
>
<FormattedMessage
id="maps.choose-file"
defaultMessage="Choose a file"
/>
<FormattedMessage id="maps.choose-file" defaultMessage="Choose a file" />
</Button>
</label>
</FormControl>

16
packages/webapp/src/components/maps-page/action-dispatcher/index.tsx
View File

@ -15,7 +15,6 @@ import ShareDialog from './share-dialog';
import LabelDialog from './label-dialog';
import ReactGA from 'react-ga4';
export type BasicMapInfo = {
name: string;
description: string | undefined;
@ -28,14 +27,17 @@ type ActionDialogProps = {
fromEditor: boolean;
};
const ActionDispatcher = ({ mapsId, action, onClose, fromEditor }: ActionDialogProps): React.ReactElement => {
const ActionDispatcher = ({
mapsId,
action,
onClose,
fromEditor,
}: ActionDialogProps): React.ReactElement => {
useEffect(() => {
ReactGA.event({
category: 'map metadata',
action: action,
nonInteraction: true
nonInteraction: true,
});
}, [action]);
@ -62,9 +64,7 @@ const ActionDispatcher = ({ mapsId, action, onClose, fromEditor }: ActionDialogP
<DeleteMultiselectDialog onClose={handleOnClose} mapsId={mapsId} />
)}
{action === 'rename' && <RenameDialog onClose={handleOnClose} mapId={mapsId[0]} />}
{action === 'duplicate' && (
<DuplicateDialog onClose={handleOnClose} mapId={mapsId[0]} />
)}
{action === 'duplicate' && <DuplicateDialog onClose={handleOnClose} mapId={mapsId[0]} />}
{action === 'history' && <HistoryDialog onClose={handleOnClose} mapId={mapsId[0]} />}
{action === 'import' && <ImportDialog onClose={handleOnClose} />}
{action === 'publish' && <PublishDialog onClose={handleOnClose} mapId={mapsId[0]} />}

98
packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/index.tsx
View File

@ -14,10 +14,8 @@ import Typography from '@mui/material/Typography';
import List from '@mui/material/List';
import LocalizedFormat from 'dayjs/plugin/localizedFormat';
// Load fromNow pluggin
dayjs.extend(LocalizedFormat)
dayjs.extend(LocalizedFormat);
const InfoDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => {
const { map } = fetchMapById(mapId);
@ -38,8 +36,7 @@ const InfoDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement =
title={intl.formatMessage({ id: 'info.title', defaultMessage: 'Info' })}
description={intl.formatMessage({
id: 'info.description-msg',
defaultMessage:
'By publishing the map you make it visible to everyone on the Internet.',
defaultMessage: 'By publishing the map you make it visible to everyone on the Internet.',
})}
submitButton={intl.formatMessage({ id: 'info.button', defaultMessage: 'Accept' })}
>
@ -48,93 +45,48 @@ const InfoDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement =
<List dense={true}>
<ListItem>
<Typography variant="body1" style={{ fontWeight: 'bold' }}>
<FormattedMessage
id="info.basic-info"
defaultMessage="Basic Info"
/>
<FormattedMessage id="info.basic-info" defaultMessage="Basic Info" />
</Typography>
</ListItem>
<ListItem>
<Typography
variant="caption"
color="textPrimary"
className={classes.textDesc}
>
<Typography variant="caption" color="textPrimary" className={classes.textDesc}>
<FormattedMessage id="info.name" defaultMessage="Name" />:
</Typography>
<Typography variant="body2">{map?.title}</Typography>
</ListItem>
<ListItem>
<Typography
variant="caption"
color="textPrimary"
className={classes.textDesc}
>
<FormattedMessage
id="info.description"
defaultMessage="Description"
/>
:
<Typography variant="caption" color="textPrimary" className={classes.textDesc}>
<FormattedMessage id="info.description" defaultMessage="Description" />:
</Typography>
<Typography variant="body2">{map?.description}</Typography>
</ListItem>
<ListItem>
<Typography
variant="caption"
color="textPrimary"
className={classes.textDesc}
>
<Typography variant="caption" color="textPrimary" className={classes.textDesc}>
<FormattedMessage id="info.creator" defaultMessage="Creator" />:
</Typography>
<Typography variant="body2">{map?.createdBy}</Typography>
</ListItem>
<ListItem>
<Typography
variant="caption"
color="textPrimary"
className={classes.textDesc}
>
<FormattedMessage
id="info.creation-time"
defaultMessage="Creation Date"
/>
:
</Typography>
<Typography variant="body2">
{dayjs(map?.creationTime).format('LLL')}
<Typography variant="caption" color="textPrimary" className={classes.textDesc}>
<FormattedMessage id="info.creation-time" defaultMessage="Creation Date" />:
</Typography>
<Typography variant="body2">{dayjs(map?.creationTime).format('LLL')}</Typography>
</ListItem>
<ListItem>
<Typography
variant="caption"
color="textPrimary"
className={classes.textDesc}
>
<FormattedMessage
id="info.modified-tny"
defaultMessage="Last Modified By"
/>
:
<Typography variant="caption" color="textPrimary" className={classes.textDesc}>
<FormattedMessage id="info.modified-tny" defaultMessage="Last Modified By" />:
</Typography>
<Typography variant="body2">{map?.lastModificationBy}</Typography>
</ListItem>
<ListItem>
<Typography
variant="caption"
color="textPrimary"
className={classes.textDesc}
>
<FormattedMessage
id="info.modified-time"
defaultMessage="Last Modified Date"
/>
:
<Typography variant="caption" color="textPrimary" className={classes.textDesc}>
<FormattedMessage id="info.modified-time" defaultMessage="Last Modified Date" />:
</Typography>
<Typography variant="body2">
{dayjs(map?.lastModificationTime).format('LLL')}
@ -142,16 +94,10 @@ const InfoDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement =
</ListItem>
<ListItem>
<Typography
variant="caption"
color="textPrimary"
className={classes.textDesc}
>
<Typography variant="caption" color="textPrimary" className={classes.textDesc}>
<FormattedMessage id="info.starred" defaultMessage="Starred" />:
</Typography>
<Typography variant="body2">
{Boolean(map?.starred).toString()}
</Typography>
<Typography variant="body2">{Boolean(map?.starred).toString()}</Typography>
</ListItem>
</List>
</Card>
@ -165,16 +111,8 @@ const InfoDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement =
</ListItem>
</List>
<ListItem>
<Typography
variant="caption"
color="textPrimary"
className={classes.textDesc}
>
<FormattedMessage
id="info.public-visibility"
defaultMessage="Publicly Visible"
/>
:
<Typography variant="caption" color="textPrimary" className={classes.textDesc}>
<FormattedMessage id="info.public-visibility" defaultMessage="Publicly Visible" />:
</Typography>
<Typography variant="body2">{Boolean(map?.isPublic).toString()}</Typography>
</ListItem>

38
packages/webapp/src/components/maps-page/action-dispatcher/label-dialog/index.tsx
View File

@ -12,7 +12,6 @@ import { LabelSelector } from '../../maps-list/label-selector';
import { activeInstance } from '../../../../redux/clientSlice';
import { ChangeLabelMutationFunctionParam, getChangeLabelMutationFunction } from '../../maps-list';
const LabelDialog = ({ mapsId, onClose }: MultiDialogProps): React.ReactElement => {
const intl = useIntl();
const classes = useStyles();
@ -25,27 +24,29 @@ const LabelDialog = ({ mapsId, onClose }: MultiDialogProps): React.ReactElement
});
const [error, setError] = React.useState<ErrorInfo>();
const maps = data.filter(m => mapsId.includes(m.id));
const maps = data.filter((m) => mapsId.includes(m.id));
const changeLabelMutation = useMutation<void, ErrorInfo, ChangeLabelMutationFunctionParam, number>(
getChangeLabelMutationFunction(client),
{
const changeLabelMutation = useMutation<
void,
ErrorInfo,
ChangeLabelMutationFunctionParam,
number
>(getChangeLabelMutationFunction(client), {
onSuccess: () => {
queryClient.invalidateQueries('maps');
queryClient.invalidateQueries('labels');
},
onError: (error) => {
setError(error);
}
}
);
},
});
const handleChangesInLabels = (label: Label, checked: boolean) => {
setError(undefined);
changeLabelMutation.mutate({
maps,
label,
checked
checked,
});
};
@ -59,8 +60,7 @@ const LabelDialog = ({ mapsId, onClose }: MultiDialogProps): React.ReactElement
})}
description={intl.formatMessage({
id: 'label.description',
defaultMessage:
'Use labels to organize your maps.',
defaultMessage: 'Use labels to organize your maps.',
})}
PaperProps={{ classes: { root: classes.paper } }}
error={error}
@ -68,19 +68,21 @@ const LabelDialog = ({ mapsId, onClose }: MultiDialogProps): React.ReactElement
<>
<Typography variant="body2" marginTop="10px">
<FormattedMessage id="label.add-for" defaultMessage="Editing labels for " />
{
maps.length > 1 ?
<FormattedMessage id="label.maps-count"
{maps.length > 1 ? (
<FormattedMessage
id="label.maps-count"
defaultMessage="{count} maps"
values={{ count: maps.length }}
/> :
maps.map(m => m.title).join(', ')
}
/>
) : (
maps.map((m) => m.title).join(', ')
)}
</Typography>
<LabelSelector onChange={handleChangesInLabels} maps={maps} />
</>
</BaseDialog>
</div>);
</div>
);
};
export default LabelDialog;

12
packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/index.tsx
View File

@ -42,7 +42,7 @@ const PublishDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElemen
onError: (error) => {
setError(error);
},
}
},
);
const handleOnClose = (): void => {
@ -74,8 +74,7 @@ const PublishDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElemen
title={intl.formatMessage({ id: 'publish.title', defaultMessage: 'Publish' })}
description={intl.formatMessage({
id: 'publish.description',
defaultMessage:
'By publishing the map you make it visible to everyone on the Internet.',
defaultMessage: 'By publishing the map you make it visible to everyone on the Internet.',
})}
submitButton={intl.formatMessage({
id: 'publish.button',
@ -85,12 +84,7 @@ const PublishDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElemen
<FormControl fullWidth={true}>
<FormControlLabel
control={
<Checkbox
checked={model}
onChange={handleOnChange}
name="public"
color="primary"
/>
<Checkbox checked={model} onChange={handleOnChange} name="public" color="primary" />
}
label={intl.formatMessage({
id: 'publish.checkbox',

2
packages/webapp/src/components/maps-page/action-dispatcher/rename-dialog/index.tsx
View File

@ -36,7 +36,7 @@ const RenameDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement
onError: (error) => {
setError(error);
},
}
},
);
const handleOnClose = (): void => {

50
packages/webapp/src/components/maps-page/action-dispatcher/share-dialog/index.tsx
View File

@ -53,15 +53,15 @@ const ShareDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement
onError: (error: ErrorInfo) => {
setError(error);
},
}
},
);
const splitEmail = (emails: string): string[] => {
return emails.split(/,|;/)
.map(e => e.trim().replace(/\s/g, ''))
.filter(e => e.trim().length > 0);
}
return emails
.split(/,|;/)
.map((e) => e.trim().replace(/\s/g, ''))
.filter((e) => e.trim().length > 0);
};
const addMutation = useMutation(
(model: ShareModel) => {
@ -79,14 +79,13 @@ const ShareDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement
onError: (error: ErrorInfo) => {
setError(error);
},
}
},
);
const handleOnClose = (): void => {
// Invalidate cache ...
queryClient.invalidateQueries(`perm-${mapId}`);
onClose();
};
const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
@ -106,16 +105,17 @@ const ShareDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement
const handleOnDeleteClick = (
event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
email: string
email: string,
): void => {
event.stopPropagation();
deleteMutation.mutate(email);
};
const { isLoading, data: permissions = [] } = useQuery<unknown, ErrorInfo, Permission[]>(`perm-${mapId}`,
const { isLoading, data: permissions = [] } = useQuery<unknown, ErrorInfo, Permission[]>(
`perm-${mapId}`,
() => {
return client.fetchMapPermissions(mapId);
}
},
);
const formatName = (perm: Permission): string => {
@ -123,9 +123,7 @@ const ShareDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement
};
// very basic email validation, just make sure the basic syntax is fine
const isValid = splitEmail(model.emails)
.every(str => /\S+@\S+\.\S+/.test((str || '')
.trim()));
const isValid = splitEmail(model.emails).every((str) => /\S+@\S+\.\S+/.test((str || '').trim()));
return (
<div>
@ -182,10 +180,7 @@ const ShareDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement
control={<Checkbox color="primary" />}
label={
<Typography variant="subtitle2">
<FormattedMessage
id="share.add-message"
defaultMessage="Add message"
/>
<FormattedMessage id="share.add-message" defaultMessage="Add message" />
</Typography>
}
labelPlacement="end"
@ -226,16 +221,8 @@ const ShareDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement
{permissions &&
permissions.map((permission) => {
return (
<ListItem
key={permission.email}
role={undefined}
dense
button
>
<ListItemText
id={permission.email}
primary={formatName(permission)}
/>
<ListItem key={permission.email} role={undefined} dense button>
<ListItemText id={permission.email} primary={formatName(permission)} />
<RoleIcon role={permission.role} />
<ListItemSecondaryAction>
@ -250,10 +237,9 @@ const ShareDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement
<IconButton
edge="end"
disabled={permission.role == 'owner'}
onClick={(e) =>
handleOnDeleteClick(e, permission.email)
}
size="large">
onClick={(e) => handleOnDeleteClick(e, permission.email)}
size="large"
>
<DeleteIcon />
</IconButton>
</Tooltip>

11
packages/webapp/src/components/maps-page/help-menu/index.tsx
View File

@ -60,10 +60,7 @@ const HelpMenu = (): React.ReactElement => {
<ListItemIcon>
<PolicyOutlined fontSize="small" />
</ListItemIcon>
<FormattedMessage
id="footer.termsandconditions"
defaultMessage="Term And Conditions"
/>
<FormattedMessage id="footer.termsandconditions" defaultMessage="Term And Conditions" />
</Link>
</MenuItem>
@ -86,11 +83,7 @@ const HelpMenu = (): React.ReactElement => {
</MenuItem>
<MenuItem onClick={handleClose}>
<Link
color="textSecondary"
href="https://www.wisemapping.com/aboutus.html"
target="help"
>
<Link color="textSecondary" href="https://www.wisemapping.com/aboutus.html" target="help">
<ListItemIcon>
<EmojiPeopleOutlined fontSize="small" />
</ListItemIcon>

3
packages/webapp/src/components/maps-page/language-menu/index.tsx
View File

@ -135,8 +135,7 @@ const HelpUsToTranslateDialog = ({ onClose }: HelpUsToTranslateDialogProp) => {
<DialogTitle>Help us to support more languages !</DialogTitle>
<DialogContent>
<DialogContentText>
We need your help !. If you are interested, send us an email to
team@wisemapping.com.
We need your help !. If you are interested, send us an email to team@wisemapping.com.
</DialogContentText>
</DialogContent>
<DialogActions>

78
packages/webapp/src/components/maps-page/maps-list/index.tsx
View File

@ -57,11 +57,11 @@ type Order = 'asc' | 'desc';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function getComparator<Key extends keyof any>(
order: Order,
orderBy: Key
orderBy: Key,
): (
a: { [key in Key]: number | string | boolean | Label[] | undefined },
b: { [key in Key]: number | string | Label[] | boolean }
) => number {
b: { [key in Key]: number | string | Label[] | boolean },
) => number {
return order === 'desc'
? (a, b) => descendingComparator(a, b, orderBy)
: (a, b) => -descendingComparator(a, b, orderBy);
@ -97,8 +97,7 @@ interface EnhancedTableProps {
function EnhancedTableHead(props: EnhancedTableProps) {
const intl = useIntl();
const { classes, onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =
props;
const { classes, onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } = props;
const createSortHandler = (property: keyof MapInfo) => (event: React.MouseEvent<unknown>) => {
onRequestSort(event, property);
@ -146,11 +145,7 @@ function EnhancedTableHead(props: EnhancedTableProps) {
/>
</TableCell>
<TableCell
padding="checkbox"
key="starred"
className={classes.headerCell}
></TableCell>
<TableCell padding="checkbox" key="starred" className={classes.headerCell}></TableCell>
{headCells.map((headCell) => {
return (
@ -169,9 +164,7 @@ function EnhancedTableHead(props: EnhancedTableProps) {
{orderBy === headCell.id && (
<span className={classes.visuallyHidden}>
{order === 'desc'
? 'sorted descending'
: 'sorted ascending'}
{order === 'desc' ? 'sorted descending' : 'sorted ascending'}
</span>
)}
</TableSortLabel>
@ -179,11 +172,7 @@ function EnhancedTableHead(props: EnhancedTableProps) {
);
})}
<TableCell
padding="checkbox"
key="action"
className={classes.headerCell}
></TableCell>
<TableCell padding="checkbox" key="action" className={classes.headerCell}></TableCell>
</TableRow>
</TableHead>
);
@ -286,7 +275,7 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
const mapsInfo: MapInfo[] = data ? data.filter(mapsFilter(filter, searchCondition)) : [];
const [activeRowAction, setActiveRowAction] = React.useState<ActionPanelState | undefined>(
undefined
undefined,
);
type ActiveDialog = {
@ -323,7 +312,7 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
} else if (selectedIndex > 0) {
newSelected = newSelected.concat(
selected.slice(0, selectedIndex),
selected.slice(selectedIndex + 1)
selected.slice(selectedIndex + 1),
);
}
@ -371,7 +360,7 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
queryClient.invalidateQueries('maps');
console.error(error);
},
}
},
);
const handleStarred = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, id: number) => {
@ -425,7 +414,7 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
onError: (error) => {
console.error(error);
},
}
},
);
const handleRemoveLabel = (mapId: number, labelId: number) => {
@ -484,10 +473,7 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
startIcon={<LabelTwoTone />}
onClick={handleAddLabelClick}
>
<FormattedMessage
id="action.label"
defaultMessage="Add Label"
/>
<FormattedMessage id="action.label" defaultMessage="Add Label" />
</Button>
</Tooltip>
)}
@ -569,10 +555,7 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
selected={isItemSelected}
style={{ border: '0' }}
>
<TableCell
padding="checkbox"
className={classes.bodyCell}
>
<TableCell padding="checkbox" className={classes.bodyCell}>
<Checkbox
checked={isItemSelected}
inputProps={{
@ -582,10 +565,7 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
/>
</TableCell>
<TableCell
padding="checkbox"
className={classes.bodyCell}
>
<TableCell padding="checkbox" className={classes.bodyCell}>
<Tooltip
arrow={true}
title={intl.formatMessage({
@ -593,18 +573,11 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
defaultMessage: 'Starred',
})}
>
<IconButton
size="small"
onClick={(e) =>
handleStarred(e, row.id)
}
>
<IconButton size="small" onClick={(e) => handleStarred(e, row.id)}>
<StarRateRoundedIcon
color="action"
style={{
color: row.starred
? 'yellow'
: 'gray',
color: row.starred ? 'yellow' : 'gray',
}}
/>
</IconButton>
@ -640,9 +613,7 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
/>
</TableCell>
<TableCell className={classes.bodyCell}>
{row.createdBy}
</TableCell>
<TableCell className={classes.bodyCell}>{row.createdBy}</TableCell>
<TableCell className={classes.bodyCell}>
<Tooltip
@ -650,23 +621,16 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
title={intl.formatMessage(
{
id: 'maps.modified-by-desc',
defaultMessage:
'Modified by {by} on {on}',
defaultMessage: 'Modified by {by} on {on}',
},
{
by: row.lastModificationBy,
on: dayjs(
row.lastModificationTime
).format('lll'),
}
on: dayjs(row.lastModificationTime).format('lll'),
},
)}
placement="bottom-start"
>
<span>
{dayjs(
row.lastModificationTime
).fromNow()}
</span>
<span>{dayjs(row.lastModificationTime).fromNow()}</span>
</Tooltip>
</TableCell>

22
packages/webapp/src/components/maps-page/maps-list/label-delete-confirm/index.tsx
View File

@ -13,7 +13,11 @@ export type LabelDeleteConfirmType = {
onConfirm: () => void;
};
const LabelDeleteConfirm = ({ label, onClose, onConfirm }: LabelDeleteConfirmType): React.ReactElement => {
const LabelDeleteConfirm = ({
label,
onClose,
onConfirm,
}: LabelDeleteConfirmType): React.ReactElement => {
const intl = useIntl();
return (
@ -21,16 +25,26 @@ const LabelDeleteConfirm = ({ label, onClose, onConfirm }: LabelDeleteConfirmTyp
<BaseDialog
onClose={onClose}
onSubmit={onConfirm}
title={intl.formatMessage({ id: 'label.delete-title', defaultMessage: 'Confirm label deletion' })}
title={intl.formatMessage({
id: 'label.delete-title',
defaultMessage: 'Confirm label deletion',
})}
submitButton={intl.formatMessage({
id: 'action.delete-title',
defaultMessage: 'Delete',
})}
>
<Alert severity="warning">
<AlertTitle>{intl.formatMessage({ id: 'label.delete-title', defaultMessage: 'Confirm label deletion' })}</AlertTitle>
<AlertTitle>
{intl.formatMessage({
id: 'label.delete-title',
defaultMessage: 'Confirm label deletion',
})}
</AlertTitle>
<span>
<Typography fontWeight="bold" component="span">{label.title} </Typography>
<Typography fontWeight="bold" component="span">
{label.title}{' '}
</Typography>
<FormattedMessage
id="label.delete-description"
defaultMessage="will be deleted, including its associations to all existing maps. Do you want to continue?"

2
packages/webapp/src/components/maps-page/maps-list/label-selector/index.tsx
View File

@ -19,7 +19,7 @@ export type LabelSelectorProps = {
export function LabelSelector({ onChange, maps }: LabelSelectorProps): React.ReactElement {
const client: Client = useSelector(activeInstance);
const { data: labels = [] } = useQuery<unknown, ErrorInfo, Label[]>('labels', async () =>
client.fetchLabels()
client.fetchLabels(),
);
const checkedLabelIds = labels

17
packages/webapp/src/components/maps-page/maps-list/label/index.tsx
View File

@ -6,14 +6,21 @@ import LabelTwoTone from '@mui/icons-material/LabelTwoTone';
import DeleteIcon from '@mui/icons-material/Clear';
import IconButton from '@mui/material/IconButton';
type LabelSize = 'small' | 'big';
type LabelComponentProps = { label: Label; onDelete?: (label: Label) => void; size?: LabelSize };
export default function LabelComponent({ label, onDelete, size = 'small' }: LabelComponentProps): React.ReactElement<LabelComponentProps> {
const iconSize = size === 'small' ? {
height: '0.6em', width: '0.6em'
} : { height: '0.9em', width: '0.9em' };
export default function LabelComponent({
label,
onDelete,
size = 'small',
}: LabelComponentProps): React.ReactElement<LabelComponentProps> {
const iconSize =
size === 'small'
? {
height: '0.6em',
width: '0.6em',
}
: { height: '0.9em', width: '0.9em' };
return (
<LabelContainer color={label.color}>

19
packages/webapp/src/components/maps-page/maps-list/labels-cell/index.tsx
View File

@ -7,21 +7,22 @@ import DeleteIcon from '@mui/icons-material/Clear';
import IconButton from '@mui/material/IconButton';
type Props = {
labels: Label[],
onDelete: (label: Label) => void,
labels: Label[];
onDelete: (label: Label) => void;
};
export function LabelsCell({ labels, onDelete }: Props): React.ReactElement<Props> {
return (
<>
{labels.map(label => (
<LabelContainer
key={label.id}
color={label.color}
>
{labels.map((label) => (
<LabelContainer key={label.id} color={label.color}>
<LabelTwoTone htmlColor={label.color} style={{ height: '0.6em', width: '0.6em' }} />
<LabelText>{ label.title }</LabelText>
<IconButton color="default" size='small' aria-label="delete tag" component="span"
<LabelText>{label.title}</LabelText>
<IconButton
color="default"
size="small"
aria-label="delete tag"
component="span"
onClick={(e) => {
e.stopPropagation();
onDelete(label);

15
packages/webapp/src/components/maps-page/role-icon/index.tsx
View File

@ -16,28 +16,19 @@ const RoleIcon = ({ role }: RoleIconProps): React.ReactElement => {
return (
<span>
{role == 'owner' && (
<Tooltip
title={<FormattedMessage id="role.owner" defaultMessage="Owner" />}
arrow={true}
>
<Tooltip title={<FormattedMessage id="role.owner" defaultMessage="Owner" />} arrow={true}>
<PersonSharpIcon />
</Tooltip>
)}
{role == 'editor' && (
<Tooltip
title={<FormattedMessage id="role.editor" defaultMessage="Editor" />}
arrow={true}
>
<Tooltip title={<FormattedMessage id="role.editor" defaultMessage="Editor" />} arrow={true}>
<EditSharpIcon />
</Tooltip>
)}
{role == 'viewer' && (
<Tooltip
title={<FormattedMessage id="role.viewer" defaultMessage="Viewer" />}
arrow={true}
>
<Tooltip title={<FormattedMessage id="role.viewer" defaultMessage="Viewer" />} arrow={true}>
<VisibilitySharpIcon />
</Tooltip>
)}

14
packages/webapp/src/components/registration-page/index.tsx
View File

@ -45,7 +45,7 @@ const RegistrationForm = () => {
setError(error);
captcha.reset();
},
}
},
);
const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
@ -126,10 +126,10 @@ const RegistrationForm = () => {
error={error}
/>
{AppConfig.isRecaptcha2Enabled() &&
{AppConfig.isRecaptcha2Enabled() && (
<div style={{ width: '330px', padding: '5px 0px 5px 20px' }}>
<ReCAPTCHA
ref={el => setCaptcha(el)}
ref={(el) => setCaptcha(el)}
sitekey={AppConfig.getRecaptcha2SiteKey()}
onChange={(value: string) => {
model.recaptcha = value;
@ -137,7 +137,7 @@ const RegistrationForm = () => {
}}
/>
</div>
}
)}
<div style={{ fontSize: '12px', padding: '10px 0px' }}>
<FormattedMessage
id="registration.termandconditions"
@ -165,7 +165,11 @@ const RegistationPage = (): React.ReactElement => {
id: 'registration.page-title',
defaultMessage: 'Registration | WiseMapping',
});
ReactGA.send({ hitType: 'pageview', page: window.location.pathname, title: 'Registration:Init' });
ReactGA.send({
hitType: 'pageview',
page: window.location.pathname,
title: 'Registration:Init',
});
}, []);
return (

12
packages/webapp/src/components/registration-success-page/index.tsx
View File

@ -8,13 +8,19 @@ import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import ReactGA from 'react-ga4';
const RegistrationSuccessPage = (): React.ReactElement => {
const intl = useIntl();
useEffect(() => {
document.title = intl.formatMessage({ id: 'registation.success-title', defaultMessage: 'Registation Success | WiseMapping' });
ReactGA.send({ hitType: 'pageview', page: window.location.pathname, title: 'Registration:Success' });
document.title = intl.formatMessage({
id: 'registation.success-title',
defaultMessage: 'Registation Success | WiseMapping',
});
ReactGA.send({
hitType: 'pageview',
page: window.location.pathname,
title: 'Registration:Success',
});
});
return (