mirror of
https://github.com/unraid/webgui.git
synced 2026-01-05 17:20:04 -06:00
Refactor: Improve layout and styling of diagnostics and configuration pages for better user experience
This commit is contained in:
Eli Bosley
@@ -110,15 +110,16 @@ to the system log.*
|
||||
*Use* **Anonymize diagnostics** *when publishing the diagnostics file in the public forum. In private communication with Limetech it is recommended to uncheck this setting and capture all information unaltered.*
|
||||
:end
|
||||
|
||||
<br>
|
||||
|
||||
<label for="anonymize">
|
||||
<input type="checkbox" id="anonymize" checked>
|
||||
_(Anonymize diagnostics)_
|
||||
</label>
|
||||
|
||||
<span class="inline-block">
|
||||
<input id='download' type="button" value="_(Download)_" onclick="$(this).attr('disabled',true);diagnostics(zipfile())">
|
||||
<input type="button" value="_(Done)_" onclick="done()">
|
||||
</span>
|
||||
<div style="display:flex;flex-direction:column;gap:1rem;align-items:flex-start;">
|
||||
<div style="display:flex;flex-wrap:wrap;align-items:center;gap:1rem;">
|
||||
<label for="anonymize" class="inline-flex flex-row items-center gap-2">
|
||||
<input type="checkbox" id="anonymize" checked>
|
||||
<span>_(Anonymize diagnostics)_</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-wrap:wrap;align-items:center;gap:1rem;">
|
||||
<input id='download' type="button" value="_(Download)_" onclick="$(this).attr('disabled',true);diagnostics(zipfile())">
|
||||
<input type="button" value="_(Done)_" onclick="done()">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -62,30 +62,38 @@ effect of making it ***impossible*** to rebuild an existing failed drive - you h
|
||||
<input type="hidden" name="preserveArray" value="yes" disabled>
|
||||
<input type="hidden" name="preserveCache" value="yes" disabled>
|
||||
|
||||
_(Preserve current assignments)_:
|
||||
: <select id="s1" name="preset" multiple="multiple" style="display:none">
|
||||
<option value=''>_(All)_</option>
|
||||
<?=mk_option_check(0,'array',_('Array slots'))?>
|
||||
<?=mk_option_check(0,'cache',_('Pool slots'))?>
|
||||
</select>
|
||||
<div style="display:flex;flex-direction:column;gap:1rem;align-items:flex-start;">
|
||||
<div style="display:flex;flex-wrap:wrap;align-items:center;gap:1rem;">
|
||||
<span style="font-weight:600;">_(Preserve current assignments)_:</span>
|
||||
<div class="inline-block">
|
||||
<select id="s1" name="preset" multiple="multiple" style="display:none">
|
||||
<option value=''>_(All)_</option>
|
||||
<?=mk_option_check(0,'array',_('Array slots'))?>
|
||||
<?=mk_option_check(0,'cache',_('Pool slots'))?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
: <span class="inline-block">
|
||||
<?if ($newarray):?>
|
||||
_(Array has been **Reset**)_ (_(please configure)_)
|
||||
<?elseif ($disabled):?>
|
||||
_(Array must be **Stopped** to change)_
|
||||
<?else:?>
|
||||
<label>
|
||||
<div style="display:flex;flex-wrap:wrap;align-items:center;gap:1rem;">
|
||||
<?if ($newarray) {?>
|
||||
<span>
|
||||
_(Array has been **Reset**)_ (_(please configure)_)
|
||||
</span>
|
||||
<?} elseif ($disabled) {?>
|
||||
<span>
|
||||
_(Array must be **Stopped** to change)_
|
||||
</span>
|
||||
<?} else {?>
|
||||
<label class="flex flex-row items-center gap-2">
|
||||
<input type="checkbox" onClick="cmdInit.disabled=!this.checked">
|
||||
_(Yes, I want to do this)_
|
||||
<span>_(Yes, I want to do this)_</span>
|
||||
</label>
|
||||
<?endif;?>
|
||||
</span>
|
||||
<?}?>
|
||||
</div>
|
||||
|
||||
|
||||
: <span class="inline-block">
|
||||
<div style="display:flex;flex-wrap:wrap;align-items:center;gap:1rem;">
|
||||
<input type="submit" class="lock" name="cmdInit" value="_(Apply)_" disabled>
|
||||
<input type="button" class="lock" value="_(Done)_" onclick="done()">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -91,36 +91,50 @@ Closing the window before completion will terminate the background process - so
|
||||
Note that this tool may negatively affect any docker containers if you allow your **appdata** share to be included.
|
||||
:end
|
||||
|
||||
<form method="POST" action="/update.htm" target="progressFrame">
|
||||
<span class="block">
|
||||
<select name="select" onchange="selection(this.value,true)">
|
||||
<?=mk_option(0,"0","_(Disks)_")?>
|
||||
<?=mk_option(0,"1","_(Shares)_")?>
|
||||
</select>
|
||||
</span>
|
||||
<form markdown="1" method="POST" action="/update.htm" target="progressFrame">
|
||||
<div style="display:flex;flex-direction:column;gap:1rem;align-items:flex-start;">
|
||||
<div style="display:flex;flex-wrap:wrap;align-items:center;gap:1rem;">
|
||||
<span style="font-weight:600;">_(Target)_:</span>
|
||||
<div class="inline-block">
|
||||
<select name="select" onchange="selection(this.value,true)">
|
||||
<?=mk_option(0,"0","_(Disks)_")?>
|
||||
<?=mk_option(0,"1","_(Shares)_")?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span id="disks" class="block">
|
||||
<select id="s1" name="disks" style="display:none" multiple>
|
||||
<option value=''>_(All)_</option>
|
||||
<?foreach (array_filter($disks,'data_disks') as $disk):?>
|
||||
<?=mk_option(1,"/mnt/{$disk['name']}",_(my_disk($disk['name'])),3)?>
|
||||
<?endforeach;?>
|
||||
</select>
|
||||
</span>
|
||||
<div style="display:flex;flex-direction:column;gap:1rem;align-items:flex-start;">
|
||||
<span style="font-weight:600;">_(Items)_:</span>
|
||||
<div class="flex flex-col gap-2" style="align-items:flex-start;">
|
||||
<div id="disks">
|
||||
<select id="s1" name="disks" style="display:none" multiple>
|
||||
<option value=''>_(All)_</option>
|
||||
<?foreach (array_filter($disks,'data_disks') as $disk):?>
|
||||
<?=mk_option(1,"/mnt/{$disk['name']}",_(my_disk($disk['name'])),3)?>
|
||||
<?endforeach;?>
|
||||
</select>
|
||||
</div>
|
||||
<div id="shares" style="display:none">
|
||||
<select id="s2" name="shares" style="display:none" multiple>
|
||||
<option value=''>_(All)_</option>
|
||||
<?uksort($shares,'strnatcasecmp');?>
|
||||
<?foreach ($shares as $share):?>
|
||||
<?=mk_option(1,"/mnt/user/{$share['name']}",$share['name'])?>
|
||||
<?endforeach;?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span id="shares" class="block" style="display:none">
|
||||
<select id="s2" name="shares" style="display:none" multiple>
|
||||
<option value=''>_(All)_</option>
|
||||
<?uksort($shares,'strnatcasecmp');?>
|
||||
<?foreach ($shares as $share):?>
|
||||
<?=mk_option(1,"/mnt/user/{$share['name']}",$share['name'])?>
|
||||
<?endforeach;?>
|
||||
</select>
|
||||
</span>
|
||||
|
||||
<?if (_var($var,'fsState')=="Started"):?>
|
||||
<div><input type="button" value="_(Start)_" onclick="setNewPerms(this.form)"><input type="button" value="_(Done)_" class="lock" onclick="done()"></div>
|
||||
<?else:?>
|
||||
<div><input type="button" value="_(Start)_" disabled><input type="button" value="_(Done)_" class="lock" onclick="done()">_(Array must be **Started** to change permissions)_.</div>
|
||||
<?endif;?>
|
||||
<div style="display:flex;flex-wrap:wrap;align-items:center;gap:1rem;">
|
||||
<?if (_var($var,'fsState')=="Started"):?>
|
||||
<input type="button" value="_(Start)_" onclick="setNewPerms(this.form)">
|
||||
<input type="button" value="_(Done)_" class="lock" onclick="done()">
|
||||
<?else:?>
|
||||
<input type="button" value="_(Start)_" disabled>
|
||||
<input type="button" value="_(Done)_" class="lock" onclick="done()">
|
||||
<span>_(Array must be **Started** to change permissions)_.</span>
|
||||
<?endif;?>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user