in the tag view, we have a custom 'full' style in a place where we
can have another tagstyle class above. to compensate for that, we have
to add another condition to those styles, namely that there is not the
'proxmox-tags-full' in between.
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
The mask ExtJS uses to add a disabled look is using the general
default background color of panels as base color, i.e. white for light
mode and almost black for the dark mode.
But as the top header of windows uses a darker variant, having a mask
applied on some icons that is rendered directly in the header, without
any (button) element that provides its own background color, will make
that element show off.
This mostly happens for Tools, which we do not have many besides the
"Close" on, which is almost never disabled.
This was noticed when trying out to move the reset button inside the
window header tool bar, when that was disabled (e.g., form was not
dirty) it stuck out quite a bit in an odd way.
Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
The EOL message is positioned quite noticeable already in all our
products, being always visible. So use a notice-style for the icon
and its color until three weeks before EOL, when we switch to a
critical warning.
As it can be OK to run a, e.g., PVE 7 setup shortly before its EOL,
if, for example, one plans to replace it completely and decommission
the old one (so upgrade before EOL would be just extra work).
Using three weeks for the cut-off has no in-depth, heavily thought
out Good Reason™, but was rather chosen as it's likely to be noticed
before the actual EOL in somewhat actively maintained setups (e.g.,
admin checking in every week or two) and can give admins further
means to escalate things with higher ups. Also weeks are always 7
days, while months aren't uniform, so the former is easier to
communicate.
Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
add a class to the whole outer div to manage the CSS rules for the
EOL widget and use this to keep the original color for links even if
they got visited already.
Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
when showing full tags in the tree as inline-block, the height is
increased, leading to unwanted 'wobble' when tags are added/removed
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
helpers to
* generate a color from a string consistently
* generate a html tag for a tag
* related css classes
contrast is calculated according to SAPC draft:
https://github.com/Myndex/SAPC-APCA
which is likely to become a w3c guideline in the future and seems
to be a better algorithm for this
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
the baseline for the text was seriously off, the text had
(relatively) much more space below than above, which looks off for
buttons with an actual background
Instead of centering with margin/padding explicitly, do so with the
flex layout model.
Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
to avoid copying the same thing to three different product's GUIs
this year..
cherry-picked from stable-6 as we can have this in the master branch
full time
Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
The debian one higher than wide and it seems, contrary to my belief,
the background-size is not taken for both, height and width if only
one param is set, but rather the second paramet height then defaults
to `auto` which Firefox and Chromium handle different in this case.
Set both to make this fixed.
Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
also add a new 'pmx-itype-icon' helper class for the classic bg
repeat/position option to allow more easier reuse
Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
this copies most of the task grid from pbs, but adds handling so that
users can add aribtrary filter fields
the filter fields always present are:
* since
* until
* task type
* task status
other filters fields can be added by giving an 'extraFilter' array
which must contain widget definitions that emit a 'change' event.
this is then used to update the filters for the api call
also you can add a 'preFilter' object, that sets the filter parameter
only once at the beginning
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
else the repo/header difference is not that big, and it gets a bit
hard to read as it feels a bit monotonic
Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
Define our own, rather minimal interface so that we change the parser
under the hood if ever needed, I already did so once during
evaluating this, as first I checked out Snarkdown[0], which is really
nice for the few lines of code it needs, but is a bit to limited for
the use case.
Currently marked[1] is used, provided by the libjs-marked Debian
package.
For now statically link the marked parser in on built time to avoid
the need to add new directories to serve in our pve/pmg/pbs proxies.
This is a bit ugly but can be cleaned up afterwards transparently
too.
We sanitize the produced HTML ourselves (most MD JS parser/renderer
don't do that) by creating a real, but not active, DOM tree and
recursively prune bad nodes/attrs from it and let it spit out HTML
again at the end. While a tad inefficient it really won't matter for
our use case, as the notes/comments we render are only a few KiB of
text and it's done on the client side anyway.
Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
the legend is by default of type 'sprite', rever to 'dom'
but we now have to unset the '.legend', else on destruction
extjs tries to destroy it twice
also change the onAfterAnimation listener to 'redraw', since
the original event does not exist anymore, add a buffer to it
so that it is not that heavy
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
add a new class 'x-treelist-pve-nav' so that we can use
ui: 'pve-nav'
instead of
ui: 'nav'
which has some default styling we do not want
also overwrite the font to FontAwesome
(extjs 7.0 uses 'FontAwesome 5 Free' which we do not ship)
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
Font Awesome is intended to be used at 14px font-size, we set that
already over product specific CSS for some elements like buttons.
But, for tab panel icons and tree navigation views it was often
overruled by ExtJS to 13px which made look them quite blurry and even
the position was a bit off (to high when compared to the texts
baseline.
Fix that by overwriting the font-size to 14px of the
x-treelist-item-icon and x-tab-icon-el-default class, for the latter
improve the icon to text possition by setting a slight top margin.
Setting the color to black was already done by each product, so move
that over here.
Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
tasks can now show also 'WARNINGS: <count>'
filter it out and provide a 'parse_task_status' function for easy reuse
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
