Skip to content

Commit

Permalink
design: module manage tool ui (#30)
Browse files Browse the repository at this point in the history 
change module mange tool UI
  • Loading branch information
@f1rstf1y9
f1rstf1y9 authored Sep 26, 2023
1 parent 23aa5a6 commit 4c078ab
Show file tree
Hide file tree
Showing 2 changed files with 152 additions and 26 deletions.
97 changes: 81 additions & 16 deletions GBL_SASM_Alert/401-module-manage-tool.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,49 @@
<style>
@font-face {
font-family: "Pretendard-Regular";
src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff")
format("woff");
font-weight: 400;
font-style: normal;
}
.ui-dialog:has(.module-manage-tool__dialog) {
font-family: "Pretendard-Regular";
border-radius: 10px;
}
.ui-dialog:has(.module-manage-tool__dialog) .ui-dialog-titlebar,
.ui-dialog:has(.module-manage-tool__dialog) .ui-dialog-buttonpane {
background-color: transparent;
}
.ui-dialog:has(.module-manage-tool__dialog) .ui-dialog-titlebar-close {
background: transparent;
border: none;
margin-right: 5px;
}
.ui-dialog:has(.module-manage-tool__dialog) .ui-button-danger {
background-color: #dc3545;
color: white !important;
border-radius: 5px;
border: none !important;
}
.ui-dialog-buttonset
button.ui-button-danger:not(.disabled):not(:disabled):hover {
color: white !important;
background-color: rgb(194, 20, 55) !important;
}
.ui-dialog-buttonset
button.ui-button-danger:not(.disabled):not(:disabled):focus {
color: white !important;
outline: none;
}
.module-manage-tool__dialog.ui-dialog-content::-webkit-scrollbar {
width: 5px;
background-color: #efefef;
}
.module-manage-tool__dialog.ui-dialog-content::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: #767676;
}

.toolbar-button {
border: none;
color: #eee;
Expand Down Expand Up @@ -31,30 +76,39 @@
justify-content: space-between;
align-items: center;
height: 40px;
border: solid 1px #aaa;
padding: 0 10px;
margin: 5px 0;
margin-top: 10px;
font-size: 14px;
background-color: #ccc;
font-weight: 700;
background-color: #e6eeff;
z-index: -2;
}
.module-manage-tool__module-title:hover {
background-color: #dbe6ff;
}

.module-manage-tool__toggle-visibility {
padding: 10px 10px 10px 0;
}
.module-manage-tool__toggle-visibility:hover {
color: #6790ef;
}
.module-manage-tool__toggle-detail {
width: 100%;
padding: 10px 0;
}
.module-manage-tool__jump-link {
padding: 10px 0;
}
.module-manage-tool__jump-link:hover {
color: #6790ef;
}

.module-manage-tool__module-detail {
display: none;
border: solid 1px #aaa;
padding: 10px;
font-size: 14px;
background-color: #e6eeff;
background-color: #f6f9ff;
z-index: 1;
}

Expand All @@ -70,26 +124,33 @@
text-decoration: underline;
cursor: pointer;
}
.module-manage-tool__submodule-list:hover {
color: #769fff;
}

.module-manage-tool__no-submodule {
padding: 8px;
color: #818181;
font-style: italic;
}

.module-manage-tool__save-button {
.module-manage-tool__save-button-container {
margin-top: 10px;
display: flex;
justify-content: end;
}

.module-manage-tool__save-button > div {
.module-manage-tool__save-button {
background-color: cornflowerblue;
padding: 8px 0;
width: 120px;
padding: 8px;
font-size: 12px;
text-align: center;
color: #fff;
cursor: pointer;
border-radius: 4px;
}
.module-manage-tool__save-button:hover {
background-color: rgb(84, 131, 219);
}

/* tooltip style */
Expand All @@ -98,7 +159,7 @@
padding: 10px 15px;
color: white;
border-radius: 8px;
border: none;
border: none !important;
box-shadow: none;
}

Expand Down Expand Up @@ -168,8 +229,8 @@
<div class="module-manage-tool__submodule" id="submodule-${node.id}">
<div class="module-manage-tool__submodule-title">Submodules</div>
</div>
<div class="module-manage-tool__save-button">
<div><i class="fa fa-save"></i> Save in Local</div>
<div class="module-manage-tool__save-button-container">
<div class="module-manage-tool__save-button"><i class="fa fa-save"></i> Save in Local</div>
</div>
</div>
</div>`;
Expand Down Expand Up @@ -340,11 +401,15 @@
$(moduleManageToolDialog).dialog({
height: 450,
width: 400,
buttons: {
Cancel: function () {
$(moduleManageToolDialog).dialog("close");
buttons: [
{
text: "Close",
click: function () {
$(moduleManageToolDialog).dialog("close");
},
class: "ui-button-danger"
}
}
]
});
});
});
Expand Down
81 changes: 71 additions & 10 deletions GBL_SASM_Alert/501-global-module-manage-tool.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,56 @@
<style>
@font-face {
font-family: "Pretendard-Regular";
src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff")
format("woff");
font-weight: 400;
font-style: normal;
}
.ui-dialog:has(.global-module-manager__dialog) {
font-family: "Pretendard-Regular";
border-radius: 10px;
}
.ui-dialog:has(.global-module-manager__dialog) .ui-dialog-titlebar,
.ui-dialog:has(.global-module-manager__dialog) .ui-dialog-buttonpane {
background-color: transparent;
}
.ui-dialog:has(.global-module-manager__dialog) .ui-dialog-titlebar-close {
background: transparent;
border: none;
margin-right: 5px;
}

.ui-dialog:has(.global-module-manager__dialog) .ui-button-danger {
background-color: #dc3545;
color: white !important;
border-radius: 5px;
border: none !important;
}
.ui-dialog:has(.global-module-manager__dialog)
.ui-dialog-buttonset
button.ui-button-danger:not(.disabled):not(:disabled):hover {
color: white !important;
background-color: rgb(194, 20, 55) !important;
}
.ui-dialog:has(.global-module-manager__dialog)
.ui-dialog-buttonset
button.ui-button-danger:not(.disabled):not(:disabled):focus {
color: white !important;
outline: none;
}

.ui-dialog:has(.global-module-manager__dialog) .ui-button-primary {
border-radius: 5px;
}
.global-module-manager__dialog.ui-dialog-content::-webkit-scrollbar {
width: 5px;
background-color: #efefef;
}
.global-module-manager__dialog.ui-dialog-content::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: #767676;
}

.toolbar-button {
border: none;
color: #eee;
Expand Down Expand Up @@ -36,13 +88,15 @@
}

.global-module-manager__module-container {
border: solid 1px #aaa;
border-radius: 5px;
padding: 15px;
margin-bottom: 10px;
background-color: #e6eeff;
background-color: #f1f5ff;
cursor: grab;
}
.global-module-manager__module-container:hover {
background-color: #e6eeff;
}

.global-module-manager__module-title {
font-size: 14px;
Expand All @@ -55,21 +109,26 @@
font-weight: 400;
}

.global-module-manage__delete-button {
.global-module-manage__delete-button-container {
margin-top: 15px;
display: flex;
justify-content: end;
}

.global-module-manage__delete-button > div {
background-color: rgb(237, 100, 100);
.global-module-manage__delete-button {
border: 1px solid #dc3545;
border-radius: 5px;
padding: 8px 0;
width: 60px;
font-size: 12px;
text-align: center;
color: #fff;
color: #dc3545;
cursor: pointer;
}
.global-module-manage__delete-button:hover {
background: #dc3545;
color: #fff;
}
</style>

<script type="text/javascript">
Expand Down Expand Up @@ -140,8 +199,8 @@
.text(file.fileContent[0].info);

const moduleDeleteButton = $(
`<div class="global-module-manage__delete-button">
<div><i class="fa fa-trash"></i> Delete</div>
`<div class="global-module-manage__delete-button-container">
<div class="global-module-manage__delete-button"><i class="fa fa-trash"></i> Delete</div>
</div>`
);
$(moduleDetail).append(moduleDeleteButton);
Expand Down Expand Up @@ -238,13 +297,15 @@
icon: "ui-icon-folder-open",
click: function () {
$.ajax({ url: "/open-local-directory" });
}
},
class: "ui-button-primary"
},
{
text: "Close",
click: function () {
$(moduleManageToolDialog).dialog("close");
}
},
class: "ui-button-danger"
}
]
});
Expand Down

0 comments on commit 4c078ab

Please sign in to comment.