Skip to content

Commit

Permalink
added Tooltips for Buttons in configuration editor + improved css (#119)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ThiBruUU
ThiBruUU authored Dec 5, 2023
1 parent 968d081 commit 4c6c62c
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 107 deletions.
49 changes: 28 additions & 21 deletions uvls/src/webview/frontend.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -508,32 +508,55 @@ pub fn App(cx: Scope<AppProps>) -> Element {
input{
r#type:"text",
value:"{state_lock.file_name}",
title: "Enter the file name of the configuration to save",
oninput: |e|{
state.with_mut(|state|state.file_name = e.value.clone())
}

},
}
}
li{
"SAT State: "
a{
title: "Current SAT state",
class: if matches!(&state_lock.sat,SatState::SAT){
"sat"
}
else{
"unsat"
},
"{state_lock.sat:?}"
"{state_lock.sat:?}",
}
}
li{
"Solver State: "
a{
title: "Current solver state",
"{solver_state}"
}
}
li{
button{
title: "Expand complete configuration tree",
class:"btn-tree-config",
onclick: move |_|{
ui_tx.send(UIAction::ExpandAll);
},
rsx!{"Expand All"}
}
}
li{
button{
title: "Collapse complete configuration tree",
class:"btn-tree-config",
onclick: move |_|{
ui_tx.send(UIAction::CollapseAll);
},
rsx!{"Collapse All"}
}
}
li{
button{
title: "Save all possible features",
class:"btn-save",
onclick: move |_|{
ui_tx.send(UIAction::SaveAll);
Expand All @@ -544,6 +567,7 @@ pub fn App(cx: Scope<AppProps>) -> Element {
}
li{
button{
title: "Only saves self-set features",
class:"btn-save",
onclick: move |_|{
ui_tx.send(UIAction::Save);
Expand All @@ -555,6 +579,7 @@ pub fn App(cx: Scope<AppProps>) -> Element {

li{
button{
title: "Toggle showing/hiding values ​​of features in the UVL file",
class:"btn-save",
onclick: move |_|{
ui_tx.send(UIAction::Show);
Expand All @@ -568,24 +593,6 @@ pub fn App(cx: Scope<AppProps>) -> Element {
}
}
}
li{
button{
class:"btn-save",
onclick: move |_|{
ui_tx.send(UIAction::ExpandAll);
},
rsx!{"Expand All"}
}
}
li{
button{
class:"btn-save",
onclick: move |_|{
ui_tx.send(UIAction::CollapseAll);
},
rsx!{"Collapse All"}
}
}
}
"Files:"
table{
Expand Down
186 changes: 100 additions & 86 deletions uvls/src/webview/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,67 @@


.name-sel:hover{
.name-sel:hover {
text-decoration: underline

}

}

.btn-save {
float: right;
border: none;
color: white;
margin-right: 2em;
margin-right: 1em;
padding: 0.4em;
text-align: center;
text-decoration: none;
display: inline-block;
transition-duration: 0.4s;
cursor: pointer;
border-radius: 0.1em;
background-color: None;
background-color: None;
color: #aaa;
border: 2px solid #04AA6D;

}

.btn-save:hover {
background-color: #04AA6D;
color: white;
}

.btn-tree-config {
padding: 0.4em;
text-align: center;
transition-duration: 0.4s;
cursor: pointer;
border-radius: 0.1em;
background-color: None;
color: #aaa;
border: 2px solid #1b1b1b;
}
.value-btn{
padding: 0.1em 1em;

.btn-tree-config:hover {
background-color: #1b1b1b;
color: white;
}

.value-btn {
padding: 0.1em 1em;

background-color: #444;
border: 1px solid #222;


}
.value-btn:hover{
padding: 0.1em 1em;

.value-btn:hover {
padding: 0.1em 1em;
background-color: #444444;
border: 1px solid white;



}

.input-value{
.input-value {
background: none;
color: #aaa;
border: 1px solid white;
padding: 0.2em
}
.input-value:focus{
outline:none!important;
}

.input-value:focus {
outline: none !important;
background: none;
border: 1px solid white;
}

}

ul {
padding: 0.3em;
Expand All @@ -66,126 +70,136 @@ ul {
padding: 0.1em;
overflow: hidden;
background-color: #333333;


}

.sat{
.sat {
color: #04AA6D;

}
.unsat{

.unsat {
color: #AA0441;
}

li {

padding: 1em;
display:inline;

display: inline;
}
.value-slot{

.value-slot {
padding: 0.1em;
border: 1px solid #222;
}
.value-slot:hover{

.value-slot:hover {
border: 1px solid white;
}
.icon{

.icon {
width: 1.2em;
display:inline-block;
display: inline-block;
vertical-align: middle
}
.toggle{
display:inline-block;
vertical-align: middle

.toggle {
display: inline-block;
vertical-align: middle
}
.name{
display:inline-block;

.name {
display: inline-block;
vertical-align: middle;
}
.entry{

table {
border-collapse: collapse;
}
.value-row{

tr {
border: none;
}

table { border-collapse: collapse; }
tr { border: none; }
td {

border-right: solid 1px #aaa;
border-right: solid 1px #aaa;
padding-left: 1em;
padding-right: 1em;


}

th{
padding-left: 1em;
th {
padding-left: 1em;
padding-right: 1em;
}

.loading
{
.loading {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}
.spinner{
transform-origin:center;
animation:spinner 0.75s linear infinite;
fill:#aaa;

.spinner {
transform-origin: center;
animation: spinner 0.75s linear infinite;
fill: #aaa;
}

.spinner-bg {
fill: #333;
}
.spinner-bg{
fill:#333;

@keyframes spinner {
100% {
transform: rotate(360deg)
}
}
@keyframes spinner{100%{transform:rotate(360deg)}}

tr:hover {
background-color: #222;
background-color: #222;
filter: brightness(160%);
}

body {
font-family: 'Open Sans', sans-serif;
line-height: 1.75em;
font-size: 16px;
background-color: #222;
color: #aaa;
font-family: 'Open Sans', sans-serif;
line-height: 1.75em;
font-size: 16px;
background-color: #222;
color: #aaa;
}
.btn-icon{

.btn-icon {
width: 100%;
height: 100%;
color: #aaa;
}
.btn-icon:hover{

.btn-icon:hover {
background-color: #333
}

.value-btn{
.value-btn {
width: 2em;
display:inline-block;
display: inline-block;
vertical-align: middle;
}
button{

button {
padding: 0;
border: none;
background: none;
}
.delete-btn{

.delete-btn {
width: 2em;
display:inline-block;
vertical-align: middle;
margin-left: 0.1em;
float: right
}
.create-btn{

.create-btn {
color: #aaa;
padding: 0.4em
padding: 0.4em
}
.create-btn:hover{

.create-btn:hover {
background-color: #333

}

}

0 comments on commit 4c6c62c

Please sign in to comment.