mirrors
/
docker-registry-ui
mirror of https://github.com/Joxit/docker-registry-ui.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(theme): add support for header and footer

This commit is contained in:
Joxit 2023-01-08 20:53:01 +01:00
parent 441def4855
commit 2feff56619
No known key found for this signature in database
GPG Key ID: F526592B8E012263
6 changed files with 32 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/dialogs/add-registry-url.riot
View File

@ -18,7 +18,7 @@
<material-popup opened="{ props.opened }" onClick="{ props.onClose }">
<div class="material-popup-title">Add your Server ?</div>
<div class="material-popup-content">
<material-input onkeyup="{ onKeyUp }" label="Server URL" text-color="var(--primary-text)" label-color="var(--neutral-text)" valid="{ registryUrlValidator }"></material-input>
<material-input onkeyup="{ onKeyUp }" label="Server URL" text-color="var(--primary-text)" label-color="var(--neutral-text)" color="var(--accent-text)" valid="{ registryUrlValidator }"></material-input>
<span>Write your URL without /v2</span>
</div>
<div class="material-popup-action">

4
src/components/dialogs/dialogs-menu.riot
View File

@ -41,8 +41,8 @@
waves-center="true"
waves-opacity="0.6"
waves-duration="600"
color="rgba(0,0,0,0)"
text-color="#fff"
color="var(--header-background)"
text-color="var(--header-text)"
icon
>
<i class="material-icons">more_vert</i>

17
src/components/docker-registry-ui.riot
View File

@ -141,7 +141,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
this.state.catalogElementsLimit = props.catalogElementsLimit || 100000;
this.state.pullUrl = this.pullUrl(this.state.registryUrl, props.pullUrl);
this.state.useControlCacheHeader = props.useControlCacheHeader;
loadTheme(props, this.root.style);
loadTheme(props, this.root.parentNode.style);
},
onServerChange(registryUrl) {
this.update({
@ -204,17 +204,22 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
};
</script>
<style>
:host {
display: block;
background-color: var(--background);
color: var(--primary-text);
}
material-navbar {
height: 64px;
color: var(--header-text);
background-color: var(--header-background);
}
material-navbar .menu {
display: flex;
}
material-footer {
color: var(--footer-neutral-text);
background-color: var(--footer-background);
}
material-footer .material-footer-logo {
color: var(--footer-text);
}
</style>
</docker-registry-ui>

2
src/components/search-bar.riot
View File

@ -1,5 +1,5 @@
<search-bar>
<material-input label="Search in page" text-color="#fff" label-color="#aaa"></material-input>
<material-input label="Search in page" text-color="var(--header-text)" label-color="var(--neutral-text)" color="var(--accent-text)"></material-input>
<script>
import { router } from '@riotjs/route';

14
src/scripts/theme.js
View File

@ -3,14 +3,24 @@ const LIGHT_THEME = {
'neutral-text': '#777',
'background': '#fff',
'hover-background': '#eee',
'accent-text': 'rgba(0,0,0,0.26)',
'accent-text': '#6680a1',
'header-text': '#fff',
'header-background': '#25313b',
'footer-text': '#fff',
'footer-neutral-text': '#999',
'footer-background': '#555',
};
const DARK_THEME = {
'primary-text': '#8A9EBA',
'neutral-text': '#36527A',
'background': '#22272e',
'hover-background': '#30404D',
'accent-text': '#5684C4',
'accent-text': '#5684FF',
'header-text': '#fff',
'header-background': '#333A45',
'footer-text': '#fff',
'footer-neutral-text': '#999',
'footer-background': '#555',
};
let THEME;

8
src/style.scss
View File

@ -33,6 +33,8 @@
html > body {
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
font-size: 16px;
background-color: var(--background);
color: var(--primary-text);
}
html,
@ -160,7 +162,7 @@ docker-registry-ui material-button > :first-child .content i.material-icons.mate
height: 24px;
width: 24px;
box-sizing: border-box;
color: var(--neutral-text);
color: var(--accent-text);
}
.list > span .right i.material-icons.animated {
@ -233,7 +235,7 @@ material-card table th {
vertical-align: bottom;
line-height: 24px;
height: 48px;
color: var(--neutral-text);
color: var(--accent-text);
box-sizing: border-box;
padding: 0 18px 12px 18px;
text-align: right;
@ -280,7 +282,7 @@ material-card table th.material-card-th-sorted-descending:hover {
material-card table th.material-card-th-sorted-ascending:hover:before,
material-card table th.material-card-th-sorted-descending:hover:before {
color: var(--accent-text);
color: var(--primary-text);
}
material-card table th.material-card-th-sorted-ascending:before,