add CSS file for PBS ExtJS6 basic ui
some fitting rules copied over from PVE's ext6-pve.css file. simply place it in the css subfolder where the proxmox-backup-gui.js file is hosted and add a "css/" alias for that directory, the formatter gets use the right content type with that. Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
This commit is contained in:
parent
25cdd0e0a1
commit
2d694f8f1f
|
@ -47,6 +47,7 @@ async fn run() -> Result<(), Error> {
|
||||||
config.add_alias("fontawesome", "/usr/share/fonts-font-awesome");
|
config.add_alias("fontawesome", "/usr/share/fonts-font-awesome");
|
||||||
config.add_alias("xtermjs", "/usr/share/pve-xtermjs");
|
config.add_alias("xtermjs", "/usr/share/pve-xtermjs");
|
||||||
config.add_alias("widgettoolkit", "/usr/share/javascript/proxmox-widget-toolkit");
|
config.add_alias("widgettoolkit", "/usr/share/javascript/proxmox-widget-toolkit");
|
||||||
|
config.add_alias("css", "/usr/share/javascript/proxmox-backup/css");
|
||||||
|
|
||||||
let rest_server = RestServer::new(config);
|
let rest_server = RestServer::new(config);
|
||||||
|
|
||||||
|
|
|
@ -337,6 +337,7 @@ fn get_index(username: Option<String>, token: Option<String>) -> Response<Body>
|
||||||
<link rel="stylesheet" type="text/css" href="/extjs/theme-crisp/resources/theme-crisp-all.css" />
|
<link rel="stylesheet" type="text/css" href="/extjs/theme-crisp/resources/theme-crisp-all.css" />
|
||||||
<link rel="stylesheet" type="text/css" href="/extjs/crisp/resources/charts-all.css" />
|
<link rel="stylesheet" type="text/css" href="/extjs/crisp/resources/charts-all.css" />
|
||||||
<link rel="stylesheet" type="text/css" href="/fontawesome/css/font-awesome.css" />
|
<link rel="stylesheet" type="text/css" href="/fontawesome/css/font-awesome.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="/css/ext6-pbs.css" />
|
||||||
<script type='text/javascript'> function gettext(buf) {{ return buf; }} </script>
|
<script type='text/javascript'> function gettext(buf) {{ return buf; }} </script>
|
||||||
<script type="text/javascript" src="/extjs/ext-all-debug.js"></script>
|
<script type="text/javascript" src="/extjs/ext-all-debug.js"></script>
|
||||||
<script type="text/javascript" src="/extjs/charts-debug.js"></script>
|
<script type="text/javascript" src="/extjs/charts-debug.js"></script>
|
||||||
|
|
|
@ -17,7 +17,7 @@ JSSRC= \
|
||||||
Application.js \
|
Application.js \
|
||||||
MainView.js
|
MainView.js
|
||||||
|
|
||||||
all: js/proxmox-backup-gui.js
|
all: js/proxmox-backup-gui.js css/ext6-pbs.css
|
||||||
|
|
||||||
js:
|
js:
|
||||||
mkdir js
|
mkdir js
|
||||||
|
@ -31,10 +31,12 @@ clean:
|
||||||
find . -name '*~' -exec rm {} ';'
|
find . -name '*~' -exec rm {} ';'
|
||||||
rm -rf js
|
rm -rf js
|
||||||
|
|
||||||
install: js/proxmox-backup-gui.js
|
install: js/proxmox-backup-gui.js css/ext6-pbs.css
|
||||||
install -dm755 $(DESTDIR)$(JSDIR)
|
install -dm755 $(DESTDIR)$(JSDIR)
|
||||||
install -dm755 $(DESTDIR)$(JSDIR)/js
|
install -dm755 $(DESTDIR)$(JSDIR)/js
|
||||||
install -m644 js/proxmox-backup-gui.js $(DESTDIR)$(JSDIR)/js/
|
install -m644 js/proxmox-backup-gui.js $(DESTDIR)$(JSDIR)/js/
|
||||||
|
install -dm755 $(DESTDIR)$(JSDIR)/css
|
||||||
|
install -m644 css/ext6-pbs.css $(DESTDIR)$(JSDIR)/css/
|
||||||
install -dm755 $(DESTDIR)$(JSDIR)/images
|
install -dm755 $(DESTDIR)$(JSDIR)/images
|
||||||
$(foreach i,$(IMAGES), \
|
$(foreach i,$(IMAGES), \
|
||||||
install -m644 $(i) $(DESTDIR)$(JSDIR)/images/ ;)
|
install -m644 $(i) $(DESTDIR)$(JSDIR)/images/ ;)
|
||||||
|
|
|
@ -0,0 +1,74 @@
|
||||||
|
/* overwrite to use full black for enabled buttons */
|
||||||
|
.x-btn-inner-default-toolbar-small {
|
||||||
|
font: 300 12px/16px helvetica, arial, verdana, sans-serif;
|
||||||
|
color: #000;
|
||||||
|
padding: 0 5px;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* add missing class for context menu header */
|
||||||
|
.x-menu-header {
|
||||||
|
font: 400 13px/20px 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
|
||||||
|
color: #fff;
|
||||||
|
padding: 4px;
|
||||||
|
background-color: #3892d4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* make the upper window end visible */
|
||||||
|
.x-css-shadow {
|
||||||
|
box-shadow: rgb(136,136,136) 0px -1px 15px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* reduce tree space */
|
||||||
|
.x-grid-cell-inner-treecolumn { /* vertical padding */
|
||||||
|
padding: 4px 0px 3px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* horizontal distance between parent and child leaf */
|
||||||
|
.x-tree-elbow-img {
|
||||||
|
width: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* adjust horizontal position of menu icons */
|
||||||
|
.x-menu-item-icon-default {
|
||||||
|
top: 5px;
|
||||||
|
left: 3px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* this gives a better placement for the font-awesome icons */
|
||||||
|
.x-btn-icon-el-default-toolbar-small {
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* this icon looks weird in sizes not n*14px */
|
||||||
|
.x-btn-icon-el-default-toolbar-small.fa-ellipsis-v {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.x-btn-icon-el-default-small {
|
||||||
|
height: 14px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* displayfield minheight is wrong */
|
||||||
|
.x-form-display-field-default {
|
||||||
|
min-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.x-button-reset:before {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* for resetcolumnsbutton */
|
||||||
|
.x-button-reset:after{
|
||||||
|
content: "\f0e7 ";
|
||||||
|
position: relative;
|
||||||
|
text-shadow: 0 0 2px #fff;
|
||||||
|
left: -3px;
|
||||||
|
top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.proxmox-inline-button .x-btn-inner {
|
||||||
|
color: black;
|
||||||
|
}
|
Loading…
Reference in New Issue