mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-24 15:37:55 +01:00
Format CSS and TSX files.
This commit is contained in:
parent
0f4a8ee087
commit
ae02780a1a
@ -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 {
|
||||
|
@ -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
48
libraries/bootstrap/css/bootstrap-theme.css
vendored
@ -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
341
libraries/bootstrap/css/bootstrap-theme.min.css
vendored
File diff suppressed because one or more lines are too long
1024
libraries/bootstrap/css/bootstrap.css
vendored
1024
libraries/bootstrap/css/bootstrap.css
vendored
File diff suppressed because it is too large
Load Diff
6046
libraries/bootstrap/css/bootstrap.min.css
vendored
6046
libraries/bootstrap/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
6053
packages/editor/src/bootstrap-prefix.min.css
vendored
6053
packages/editor/src/bootstrap-prefix.min.css
vendored
File diff suppressed because one or more lines are too long
@ -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 {
|
||||
@ -165,7 +166,7 @@ div#toolbar .buttonExtActive {
|
||||
|
||||
div#toolbar .buttonExtOn {
|
||||
opacity: 0.8;
|
||||
cursor: pointer
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div#toolbar .buttonExtOff {
|
||||
|
@ -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>
|
||||
|
@ -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 {
|
||||
|
@ -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(
|
||||
|
@ -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(
|
||||
|
@ -1,5 +1,4 @@
|
||||
body
|
||||
{
|
||||
body {
|
||||
font-size: 1em !important;
|
||||
color: #000 !important;
|
||||
font-family: Arial !important;
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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 (
|
||||
|
@ -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 (
|
||||
|
@ -13,8 +13,8 @@ type InputProps = {
|
||||
autoComplete?: string;
|
||||
fullWidth?: boolean;
|
||||
disabled?: boolean;
|
||||
maxLength?: number,
|
||||
rows?: number
|
||||
maxLength?: number;
|
||||
rows?: number;
|
||||
};
|
||||
|
||||
const Input = ({
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
|
@ -35,7 +35,7 @@ const ChangePasswordDialog = ({ onClose }: ChangePasswordDialogProps): React.Rea
|
||||
onError: (error) => {
|
||||
setError(error);
|
||||
},
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
const handleOnClose = (): void => {
|
||||
|
@ -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,11 +92,7 @@ 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>
|
||||
);
|
||||
|
@ -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();
|
||||
|
@ -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;
|
||||
|
@ -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" />
|
||||
)}
|
||||
|
@ -36,7 +36,7 @@ const CreateDialog = ({ onClose }: CreateProps): React.ReactElement => {
|
||||
onError: (error) => {
|
||||
setError(error);
|
||||
},
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
const handleOnClose = (): void => {
|
||||
|
@ -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
|
||||
|
@ -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();
|
||||
|
@ -36,7 +36,7 @@ const DuplicateDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElem
|
||||
onError: (error) => {
|
||||
setError(error);
|
||||
},
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
const handleOnClose = (): void => {
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -26,7 +26,7 @@ export type CreateProps = {
|
||||
type ErrorFile = {
|
||||
error: boolean;
|
||||
message: string;
|
||||
}
|
||||
};
|
||||
|
||||
const defaultModel: ImportModel = { title: '' };
|
||||
const ImportDialog = ({ onClose }: CreateProps): React.ReactElement => {
|
||||
@ -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>
|
||||
|
@ -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]} />}
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -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',
|
||||
|
@ -36,7 +36,7 @@ const RenameDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement
|
||||
onError: (error) => {
|
||||
setError(error);
|
||||
},
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
const handleOnClose = (): void => {
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -57,10 +57,10 @@ 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 }
|
||||
b: { [key in Key]: number | string | Label[] | boolean },
|
||||
) => number {
|
||||
return order === 'desc'
|
||||
? (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>
|
||||
|
||||
|
@ -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?"
|
||||
|
@ -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
|
||||
|
@ -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}>
|
||||
|
@ -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"
|
||||
<IconButton
|
||||
color="default"
|
||||
size="small"
|
||||
aria-label="delete tag"
|
||||
component="span"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onDelete(label);
|
||||
|
@ -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>
|
||||
)}
|
||||
|
@ -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 (
|
||||
|
@ -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 (
|
||||
|
Loading…
Reference in New Issue
Block a user