This commit is contained in:
Balakrishnan Balasubramanian 2023-07-06 22:18:35 -04:00
parent b73ab237e3
commit d90a3218b2

View File

@ -66,32 +66,42 @@
} }
</script> </script>
<style> <style>
td {
padding: 5px;
}
table { table {
border: 1px solid; border: 2px solid;
} }
thead { thead {
background-color: orange; background-color: orange;
} }
h1.page-title {
background-color: orange;
}
h3 {
text-align: center;
}
.outer { .outer {
display: flex; display: flex;
justify-content: center; justify-content: center;
background: grey; background: grey;
} }
.multiline {
text-align: left;
padding: 5px;
padding-left: 15px;
}
.inner { .inner {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
border: 1px solid; border: 2px solid;
background: white; background-color: lightyellow;
padding: 10px; padding: 10px;
justify-content: center; justify-content: space-around;
margin: 10px; margin: 10px;
// flex: 1 0 0;
width: 1200px; width: 1200px;
} }
.m41-box { .m41-box {
@ -101,6 +111,13 @@
// background-color: lightblue; // background-color: lightblue;
} }
.multiline {
text-align: left;
padding: 5px;
padding-left: 15px;
}
#web-cfg-matches { #web-cfg-matches {
width: 90%; width: 90%;
text-align: center; text-align: center;
@ -113,6 +130,7 @@
#web-cfg-matches tbody tr:nth-of-type(even) { #web-cfg-matches tbody tr:nth-of-type(even) {
background: lightgrey; background: lightgrey;
} }
#web-cfg-boxes { #web-cfg-boxes {
text-align: center; text-align: center;
width: 90%; width: 90%;
@ -123,11 +141,6 @@
// background-color: blue; // background-color: blue;
} }
#web-cfg-boxes tbody tr td {
margin: 10px;
padding: 10px;
}
#web-cfg-boxes tbody:nth-of-type(odd) { #web-cfg-boxes tbody:nth-of-type(odd) {
background: lightblue; background: lightblue;
} }
@ -165,46 +178,19 @@
} }
#web-cfg-boxes tbody:only-of-type tr td.box div.dummy { #web-cfg-boxes tbody:only-of-type tr td.box div.dummy {
display: block; display: flex;
} }
td th { td.box {
padding: 5px; display: flex;
justify-content: center;
} }
.m41-box-info {
display: grid;
grid-template-columns: 4fr 2fr 5fr;
// align-items: stretch;
// justify-content: space-around;
// background-color: grey;
}
.button-group { .button-group {
display: flex; display: flex;
justify-content: center; justify-content: center;
// grid-template-columns: 1fr 1fr 1fr;
// align-items: stretch;
// display: inline-flex;
} }
.m41-box-rule:only-child div.button-group button{
// display: none;
visibility: hidden;
}
.m41-box:only-child div div.button-group button{
// display: none;
visibility: hidden;
}
.m41-box-rule {
display: flex;
// grid-template-columns: 1fr 3fr 1fr 1fr;
align-items: center;
justify-items: center;
// background-color: lightblue;
}
</style> </style>
<script type="application/javascript"> <script type="application/javascript">
"use strict" "use strict"
@ -294,7 +280,7 @@
] = box.children ] = box.children
box_text.value = box_name box_text.value = box_name
const [first_rule, ...rest] = rules const [first_rule, ...rest] = rules
const {match_name, negate = false, stop = false} = first_rule const {match_name, negate = false, stop = false} = first_rule
@ -377,7 +363,7 @@
<option value="addr_rexs">List of regexes for addresses</option> <option value="addr_rexs">List of regexes for addresses</option>
</select> </select>
</td> </td>
<td contentEditable class="multiline" ></td> <td contentEditable class="multiline"></td>
</tr> </tr>
</template> </template>
<template id="web-cfg-box"> <template id="web-cfg-box">
@ -391,16 +377,16 @@
</div> </div>
<div class="button-group real"> <div class="button-group real">
<button onClick="this.parentElement.parentElement.parentElement.parentElement.remove()"></button> <button onClick="this.parentElement.parentElement.parentElement.parentElement.remove()"></button>
<button onClick="moveUp(this)" class="real up"></button> <button onClick="moveBoxUp(this)" class="real up"></button>
<button disabled class="dummy up"></button> <button disabled class="dummy up"></button>
<button onClick="moveDown(this)" class="real down"></button> <button onClick="moveBoxDown(this)" class="real down"></button>
<button disabled class="dummy down"></button> <button disabled class="dummy down"></button>
</div> </div>
</td>
<td>
<input type="text" contentEditable>
<button onClick="addRule(this.parentElement.parentElement)">+</button> <button onClick="addRule(this.parentElement.parentElement)">+</button>
</td> </td>
<td contentEditable>
<input type="text" contentEditable>
</td>
<td class="rule"> <td class="rule">
<div class="button-group dummy"> <div class="button-group dummy">
<button disabled></button> <button disabled></button>
@ -409,9 +395,9 @@
</div> </div>
<div class="button-group real"> <div class="button-group real">
<button onClick="this.parentElement.parentElement.parentElement.remove()"></button> <button onClick="this.parentElement.parentElement.parentElement.remove()"></button>
<button onClick="moveUp(this)"></button> <button onClick="moveRuleUp(this)" class="real up"></button>
<button disabled class="dummy up"></button> <button disabled class="dummy up"></button>
<button onClick="moveDown(this)"></button> <button onClick="moveRuleDown(this)" class="real down"></button>
<button disabled class="dummy down"></button> <button disabled class="dummy down"></button>
</div> </div>
</td> </td>
@ -429,47 +415,58 @@
</template> </template>
<div class="outer"> <div class="outer">
<div class="inner"> <div class="inner">
<h1>Mail4one Web config</h1> <h1 class="page-title">Mail4one Web config</h1>
<table id="web-cfg-matches"> <div id="top-menu">
<thead> <button onClick="save()">Previous</button>
<tr> <button onClick="save()">Matches</button>
<th></th> <button onClick="save()">Boxes</button>
<th>Match</th> <button onClick="save()">Users</button>
<th>Type</th> <button onClick="save()">JSON</button>
<th>Values</th> <button onClick="save()">Next</button>
</tr> </div>
</thead> <div id="match-page">
<tbody> <h3> Matches </h3>
</tbody> <table id="web-cfg-matches">
</table> <thead>
<div> <tr>
<button onClick="addMatchRow()">Add Match</button> <th>
<button onClick="save()">Save</button> <button onClick="addMatchRow()">+</button>
</div> </th>
<th>Match</th>
<th>Type</th>
<th>Values</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<h3>Boxes <button onClick="addBox()">+</button></h3> <div id=box-page">
<h3>Boxes</h3>
<table id="web-cfg-boxes"> <table id="web-cfg-boxes">
<thead> <thead>
<tr> <tr>
<th></th> <th><button onClick="addBox()">+</button></th>
<th>Mailbox</th> <th>Mailbox</th>
<th></th> <th></th>
<th>Match</th> <th>Match</th>
<th>Invert</th> <th>Invert</th>
<th>Stop</th> <th>Stop</th>
</tr> </tr>
</thead> </thead>
</table> </table>
</div>
<hr> <hr>
<h3>Before</h3> <h3>Before</h3>
<pre id="before"></pre> <pre id="before"></pre>
<hr> <hr>
<h3>After</h3> <h3>After</h3>
<pre id="after"></pre> <pre id="after"></pre>
<hr> <hr>
</div> </div>
</div> </div>
</body> </body>