fix ui bugs
This commit is contained in:
Muhammad Labeeb
Régis Behmo
parent
1e92a2d833
commit
3c1b5616ac
@ -161,7 +161,7 @@ async def plugin_toggle(name: str) -> WerkzeugResponse:
|
||||
if enable_plugin:
|
||||
response.set_cookie(f"{WARNING_COOKIE_PREFIX}-{name}", "requires launch", max_age=ONE_MONTH)
|
||||
else:
|
||||
response.delete_cookie(name)
|
||||
response.delete_cookie(f"{WARNING_COOKIE_PREFIX}-{name}")
|
||||
return response
|
||||
|
||||
|
||||
@ -185,9 +185,12 @@ async def plugins_update() -> WerkzeugResponse:
|
||||
async def config_set(name: str) -> WerkzeugResponse:
|
||||
form = await request.form
|
||||
value = form.get("value", "")
|
||||
plugin_name = form.get("plugin_name")
|
||||
tutorclient.CliPool.run_sequential(["config", "save", "--set", f"{name}={value}"])
|
||||
# TODO error management
|
||||
return redirect(request.args.get("next", "/"))
|
||||
response = await make_response(redirect(request.args.get("next", "/")))
|
||||
response.set_cookie(f"{WARNING_COOKIE_PREFIX}-{plugin_name}", "requires launch", max_age=ONE_MONTH)
|
||||
return response
|
||||
|
||||
|
||||
@app.post("/config/<name>/unset")
|
||||
|
||||
@ -3,7 +3,7 @@ function SetWarning(){
|
||||
const warningMain = document.getElementById('warning-main');
|
||||
warningElements.forEach(function(warningElement) {
|
||||
if (document.cookie.includes(warningElement.id)) {
|
||||
warningElement.style.display = 'block';
|
||||
warningElement.style.display = 'flex';
|
||||
warningMain.style.display = 'flex';
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
$blue-1: #f5faff;
|
||||
$gray-1: #e9eaeb;
|
||||
$gray-2: #c4c4c4;
|
||||
$edly-logo-red: #dc1f26;
|
||||
$dark-gray: #4a4a4a;
|
||||
$gray: #535862;
|
||||
$light-gray: #888;
|
||||
$extra-light-gray: #c4c4c4;
|
||||
$black: #181d27;
|
||||
$white: #e6f3ff;
|
||||
$blue: #1570ef;
|
||||
$light-blue: #2e90fa;
|
||||
$green: #009951;
|
||||
@ -31,8 +32,8 @@ body {
|
||||
display: flex;
|
||||
.sidebar {
|
||||
flex: 0 0 19em;
|
||||
border-right: 1px solid $extra-light-gray;
|
||||
box-shadow: 2px 0px $white;
|
||||
border-right: 1px solid $gray-2;
|
||||
box-shadow: 2px 0px $gray-1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 90vh;
|
||||
@ -43,7 +44,7 @@ body {
|
||||
height: 100%;
|
||||
.header {
|
||||
flex: 0 0 6em;
|
||||
border-bottom: 1px solid $extra-light-gray;
|
||||
border-bottom: 1px solid $gray-2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.image {
|
||||
@ -77,11 +78,13 @@ body {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 0em 1em;
|
||||
border-radius: 1em;
|
||||
border-radius: 0.5em;
|
||||
&:hover {
|
||||
background-color: $white;
|
||||
background-color: $blue-1;
|
||||
}
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5em 1em;
|
||||
span {
|
||||
margin-left: 0.5em;
|
||||
@ -95,7 +98,7 @@ body {
|
||||
|
||||
.sidebar-tab-selected {
|
||||
color: $blue;
|
||||
background-color: $white;
|
||||
background-color: $blue-1;
|
||||
border-radius: inherit;
|
||||
}
|
||||
}
|
||||
@ -125,6 +128,7 @@ body {
|
||||
.page-title {
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.page-description {
|
||||
font-size: 1.25em;
|
||||
@ -150,7 +154,7 @@ body {
|
||||
background-color: $light-blue;
|
||||
border: none;
|
||||
border-radius: 0.5em;
|
||||
color: $white;
|
||||
color: $gray-1;
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -168,7 +172,7 @@ body {
|
||||
width: 20em;
|
||||
border-radius: 10px;
|
||||
padding-left: 2.5em;
|
||||
border: 1px solid $extra-light-gray;
|
||||
border: 1px solid $gray-2;
|
||||
}
|
||||
|
||||
img {
|
||||
@ -179,23 +183,26 @@ body {
|
||||
}
|
||||
.content {
|
||||
flex-grow: 1;
|
||||
margin: 0em 2em 2em 2em;
|
||||
border-bottom: 1px solid $extra-light-gray;
|
||||
margin: 0em 2em;
|
||||
#warning-main {
|
||||
display: none;
|
||||
border: 1px solid $extra-light-gray;
|
||||
border-radius: 1em;
|
||||
border: 1px solid $gray-2;
|
||||
border-radius: 0.5em;
|
||||
align-items: center;
|
||||
font-size: 1.25em;
|
||||
color: $gray;
|
||||
margin-bottom: 2em;
|
||||
padding: 1em;
|
||||
margin-bottom: 1em;
|
||||
padding: 0.5em 1em;
|
||||
span {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 2em;
|
||||
}
|
||||
}
|
||||
.installed-plugins-list {
|
||||
border: 1px solid $extra-light-gray;
|
||||
border: 1px solid $gray-2;
|
||||
border-radius: 1em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -203,7 +210,7 @@ body {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1em 2em;
|
||||
border-bottom: 1px solid $extra-light-gray;
|
||||
border-bottom: 1px solid $gray-2;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
@ -250,7 +257,7 @@ body {
|
||||
justify-content: space-between;
|
||||
|
||||
.plugin {
|
||||
border: 1px solid $extra-light-gray;
|
||||
border: 1px solid $gray-2;
|
||||
border-radius: 1em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -308,34 +315,88 @@ body {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
padding: 0em;
|
||||
button {
|
||||
width: 5em;
|
||||
height: 2em;
|
||||
background-color: $light-blue;
|
||||
border: none;
|
||||
border-radius: 0.5em;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
margin: 0em 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1.5em 0em;
|
||||
border-top: 1px solid $gray-1;
|
||||
border-bottom: 1px solid $gray-1;
|
||||
|
||||
.status-text {
|
||||
width: 25em;
|
||||
font-weight: 600;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.switch-text {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
.tutor-logs-container {
|
||||
height: 100%;
|
||||
.config {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.item {
|
||||
display: flex;
|
||||
margin-bottom: 2em;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid $light-gray;
|
||||
border: 1px solid #888;
|
||||
padding: 0.75em;
|
||||
border-radius: 0.5em;
|
||||
font-size: 1em;
|
||||
margin-left: 1em;
|
||||
width: 25em;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 4em;
|
||||
height: 2em;
|
||||
background-color: $light-blue;
|
||||
border: none;
|
||||
border-radius: 0.5em;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
margin: 0em 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
#tutor-logs {
|
||||
width: 100%;
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 2em;
|
||||
border-radius: 1em;
|
||||
font-family: inherit;
|
||||
line-height: 1.5em;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
.tutor-logs-container {
|
||||
#tutor-logs {
|
||||
width: 100%;
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 2em;
|
||||
border-radius: 1em;
|
||||
font-family: inherit;
|
||||
line-height: 1.5em;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
@ -346,13 +407,13 @@ body {
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border: 1px solid $extra-light-gray;
|
||||
border: 1px solid $gray-2;
|
||||
border-radius: 0.5em;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
@include a-tag();
|
||||
border-right: 1px solid $extra-light-gray;
|
||||
border-right: 1px solid $gray-2;
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
@ -369,6 +430,8 @@ body {
|
||||
}
|
||||
}
|
||||
.void {
|
||||
border-top: 1px solid $gray-2;
|
||||
margin-top: 3em;
|
||||
height: 3em;
|
||||
}
|
||||
}
|
||||
@ -458,7 +521,7 @@ body {
|
||||
background: none;
|
||||
border: none;
|
||||
background-color: $light-blue;
|
||||
color: $white;
|
||||
color: $gray-1;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
@ -466,11 +529,14 @@ body {
|
||||
}
|
||||
|
||||
.form-switch {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
width: 3.5em;
|
||||
height: 1.75em;
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
@ -485,10 +551,10 @@ body {
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
left: 0.25em;
|
||||
bottom: 0.125em;
|
||||
background-color: white;
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
action="{{ url_for('config_set', name=key, next=url_for('plugin', name=plugin_name)) }}"
|
||||
method="POST"
|
||||
oninput="this.querySelector('button[type=submit]').disabled = false">
|
||||
<input type="hidden" name="plugin_name" value="{{ plugin_name }}" size="50"/>
|
||||
{% if value is boolean %}
|
||||
<input type="checkbox" name="value" {% if value %}checked{% endif %} />
|
||||
{% else %}
|
||||
|
||||
@ -4,10 +4,15 @@
|
||||
|
||||
{% from 'switch_macro.html' import switch %}
|
||||
|
||||
{% if is_installed %}
|
||||
{% block plugin_description %}
|
||||
{% endblock %}
|
||||
{% endif %}
|
||||
|
||||
{% block workspace_content %}
|
||||
|
||||
{% if is_installed %}
|
||||
<div class="status">
|
||||
{% if is_installed %}
|
||||
<div class="status-text">
|
||||
Status
|
||||
</div>
|
||||
@ -20,10 +25,10 @@
|
||||
{% if not is_enabled %} Enable the plugin to edit parameters. {% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if is_enabled %}
|
||||
{% if is_enabled and not show_logs %}
|
||||
<div class="parameter-info">
|
||||
<h2>Plugin Parameters</h2>
|
||||
<p>This plugin has default parameters. If you make any changes, save them and run a local launch to make the changes effective.</p>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user
