Skip to content

Commit

Permalink
#352 Migrate DrawTool Templating
Browse files Browse the repository at this point in the history
  • Loading branch information
@tariqksoliman
tariqksoliman committed Mar 23, 2023
1 parent cb21c0a commit 6d762d0
Show file tree
Hide file tree
Showing 12 changed files with 2,452 additions and 345 deletions.
10 changes: 0 additions & 10 deletions run/server.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -598,16 +598,6 @@ setups.getBackendSetups(function (setups) {
}
);

//help
app.get(
`${ROOT_PATH}/help`,
ensureUser(),
ensureGroup(permissions.users),
(req, res) => {
res.render("help", {});
}
);

// API
//TEST
app.post(`${ROOT_PATH}/api/test`, function (req, res) {
Expand Down
42 changes: 42 additions & 0 deletions src/css/mmgisUI.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1581,3 +1581,45 @@ input::-webkit-inner-spin-button {
.mmgisToast.failure {
background-color: #a11717;
}

/*spinner1*/
.mmgis-spinner1 {
-webkit-animation: spinner1_rotate 2s linear infinite;
animation: spinner1_rotate 2s linear infinite;
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
margin: 0;
width: 20px;
height: 20px;
top: calc(50% - 10px);
left: calc(50% - 10px);
}
.mmgis-spinner1 .path {
stroke: var(--color-c);
stroke-linecap: round;
-webkit-animation: spinner1_dash 1.5s ease-in-out infinite;
animation: spinner1_dash 1.5s ease-in-out infinite;
}

@keyframes spinner1_rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spinner1_dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
251 changes: 177 additions & 74 deletions src/essence/Tools/Draw/DrawTool.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
}

.drawToolButton1 {
background: var(--color-o);
background: #067ca7;
padding: 3px 8px;
margin: 5px 0px;
text-align: center;
Expand Down Expand Up @@ -237,46 +237,61 @@
border-bottom: 1px solid var(--color-mmgis);
border-left: 1px solid var(--color-mmgis);
}
#drawToolDrawFilesNew {
#drawToolDrawFilesNewUpload {
cursor: pointer;
width: 30px;
flex: 1;
line-height: 26px;
height: 30px;
background: var(--color-a1);
color: var(--color-a6);
text-align: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
transition: background 0.2s ease-out;
display: flex;
justify-content: center;
border-right: 1px solid var(--color-a1-5);
}
#drawToolDrawFilesNewUpload:hover {
background: var(--color-a2);
color: var(--color-a7);
}
#drawToolDrawFilesNewUpload > div:first-child {
line-height: 31px;
font-size: 10px;
}
#drawToolDrawFilesNewUpload > div:last-child {
line-height: 30px;
margin-left: 2px;
}
#drawToolDrawFilesNew {
cursor: pointer;
flex: 1;
line-height: 26px;
height: 30px;
background: var(--color-a1);
color: var(--color-a6);
text-align: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
transition: color 0.2s ease-out;
transition: background 0.2s ease-out;
display: flex;
justify-content: center;
border-left: 1px solid var(--color-a1-5);
}

#drawToolDrawFilesNewName:focus ~ #drawToolDrawFilesNew {
background: var(--color-mmgis);
#drawToolDrawFilesNew:hover {
background: var(--color-a2);
color: var(--color-a7);
}
#drawToolDrawFilesNewLoading {
width: 100%;
height: 2px;
position: absolute;
top: 28px;
left: 0px;
overflow: hidden;
opacity: 0;
transition: opacity 0.1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
#drawToolDrawFilesNew > div:first-child {
line-height: 31px;
font-size: 10px;
}
#drawToolDrawFilesNewLoading > div {
width: 30%;
height: 100%;
background: var(--color-c);
animation: drawToolLoading1 1s ease-in-out infinite;
#drawToolDrawFilesNew > div:last-child {
line-height: 30px;
margin-left: 2px;
}
@keyframes drawToolLoading1 {
0% {
transform: translateX(-100%);
width: 30%;
}
100% {
transform: translateX(230%);
width: 60%;
}

#drawToolDrawFilesNewName:focus ~ #drawToolDrawFilesNew {
background: var(--color-mmgis);
}

.drawToolFileDelete {
Expand Down Expand Up @@ -564,6 +579,7 @@
height: 100%;
display: flex;
flex-flow: column;
position: relative;
}

#drawToolMaster {
Expand Down Expand Up @@ -1228,16 +1244,11 @@
margin-bottom: 8px;
flex-flow: column;
}
.drawToolContextMenuPropertiesName > div {
height: 30px;
line-height: 30px;
}
.drawToolContextMenuPropertiesDescription {
flex-flow: column;
}
.drawToolContextMenuPropertiesDescription > div {
height: 30px;
line-height: 30px;
border-bottom: 1px solid var(--color-a1);
padding-bottom: 8px;
margin-bottom: 8px;
}
#drawToolContextMenuPropertiesDescription {
width: 100%;
Expand Down Expand Up @@ -1356,14 +1367,13 @@
.drawToolFileEditOnDescription {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
}
.drawToolFileDesc {
background: var(--color-a);
border: none;
border-top: 1px solid black;
color: var(--color-f);
min-width: 411px;
min-width: 452px;
max-width: 750px;
min-height: 100px;
max-height: 400px;
Expand Down Expand Up @@ -2197,35 +2207,6 @@
background: var(--color-c);
}

#drawToolFileUpload {
cursor: pointer;
width: 30px;
height: 30px;
background: var(--color-a1);
color: var(--color-a5);
border-right: 1px solid var(--color-a);
box-sizing: border-box;
line-height: 30px;
text-align: center;
transition: background 0.2s ease-out;
}
#drawToolFileUpload:hover {
color: var(--color-a7);
background: var(--color-a2);
}
#drawToolFileUpload i {
cursor: pointer;
pointer-events: none;
}
#drawToolFileUpload input {
position: absolute;
left: 7px;
top: 7px;
opacity: 0;
height: 30px;
width: 26px;
}

.leaflet-marker-icon.leaflet-div-icon.leaflet-editing-icon.leaflet-touch-icon.leaflet-zoom-animated.leaflet-interactive.leaflet-marker-draggable {
width: 12px !important;
height: 12px !important;
Expand Down Expand Up @@ -2537,22 +2518,144 @@
display: none;
background: var(--color-k);
color: var(--color-f);
padding: 15px;
padding: 10px;
overflow-y: auto;
height: calc(100vh - 186px);
}
.drawToolContextMenuTab.active {
display: inherit;
}

.drawToolContextMenuPropertiesTitle {
height: 30px;
line-height: 30px;
color: var(--color-query);
}
.drawToolContextMenuPropertiesExtended {
margin: 16px 0px;
padding: 8px 0px;
border-top: 1px solid var(--color-a1);
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--color-a1);
}
.drawToolContextMenuPropertiesExtended > li {
display: flex;
justify-content: space-between;
padding: 2px 0px;
}
}

#drawToolContextMenuPropertiesTemplate {
border-bottom: 1px solid var(--color-a1);
margin-bottom: 12px;
}

.drawToolFileTemplate {
}
.drawToolFileTemplate > div:first-child {
}
.drawToolFileTemplate > div:last-child {
display: flex;
cursor: pointer;
}
.drawToolFileTemplate > div:last-child > div {
overflow: hidden;
text-overflow: ellipsis;
max-width: 120px;
}

.drawToolFileTemplate > div:last-child > i {
background: var(--color-a6);
color: var(--color-a-5);
border-radius: 50%;
width: 16px;
height: 16px;
text-align: center;
line-height: 16px;
margin-left: 4px;
margin-top: -2px;
transition: background 0.2s ease-in-out;
}
.drawToolFileTemplate > div:last-child:hover > i {
background: var(--color-c);
}

/*FILE INFO TEMPLATE MODAL*/
#drawToolFileTemplateEditModal {
background: var(--color-a-5);
min-width: 600px;
}
#drawToolFileTemplateEditModalTitle {
padding: 0px 0px 0px 10px;
height: 40px;
line-height: 39px;
font-size: 18px;
background: var(--color-i);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
display: flex;
justify-content: space-between;
}
#drawToolFileTemplateEditModalTitle > div:first-child {
display: flex;
}
#drawToolFileTemplateEditModalTitle > div:first-child > div {
margin-left: 6px;
line-height: 40px;
}
#drawToolFileTemplateEditModalClose {
width: 40px;
height: 40px;
text-align: center;
}
#drawToolFileTemplateEditModalActions {
display: flex;
padding: 6px 10px;
justify-content: space-between;
background: var(--color-a1);
border-top: 1px solid var(--color-a);
}
#drawToolFileTemplateEditModalActions > div {
width: 70px;
height: 35px;
line-height: 30px;
margin: 0;
}
#drawToolFileTemplateEditModalActionsCancel {
background: var(--color-a1);
}

.drawToolContextMenuPropertiesCollapsible
> .drawToolContextMenuPropertiesTitle {
display: flex;
justify-content: space-between;
cursor: pointer;
}
.drawToolContextMenuPropertiesCollapsible
> .drawToolContextMenuPropertiesTitle
> i {
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.drawToolContextMenuPropertiesCollapsible
> .drawToolContextMenuPropertiesTitle:hover
> i {
color: var(--color-c);
}
.drawToolContextMenuPropertiesCollapsible.state-collapsed
> .drawToolContextMenuPropertiesTitle
> i {
transform: rotateZ(-90deg);
}
.drawToolContextMenuPropertiesCollapsible.state-collapsed > div:last-child {
display: none;
}

/*files loading spinner*/
#drawToolFilesLoadingSpinner {
position: absolute;
pointer-events: none;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
#drawToolFilesLoadingSpinner.on {
opacity: 1;
}
Loading

0 comments on commit 6d762d0

Please sign in to comment.