diff --git a/README.md b/README.md index edec421..f76ccfb 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ There is no default registry on this UI, you should add your own with the UI. You can manage more than one registry server. All registry will be stored in the [local storage](https://en.wikipedia.org/wiki/Web_storage#Local_and_session_storage) of your browser. -This web user interface use [Riot](https://github.com/Riot/riot) the react-like user interface micro-library and [Material Design Lite](https://github.com/google/material-design-lite) components. +This web user interface use [Riot](https://github.com/Riot/riot) the react-like user interface micro-library and [riot-mui](https://github.com/kysonic/riot-mui) components. ## [GitHub Page](https://joxit.github.io/docker-registry-ui) and [Live Demo](https://joxit.github.io/docker-registry-ui/demo/) @@ -20,6 +20,7 @@ This web user interface use [Riot](https://github.com/Riot/riot) the react-like - Sort the tag list - One interface for many registry - Use a secured docker registry +- Share your docker registry with query parameter `url` (e.g. `https://joxit.github.io/docker-registry-ui/demo?url=https://registry.example.com`) ## Getting Started diff --git a/gulpfile.js b/gulpfile.js index e15d940..2e9253a 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -88,6 +88,12 @@ gulp.task('scripts', ['html'], function() { .pipe(gulp.dest('dist/scripts')); }); +gulp.task('vendor', ['html'], function() { + return gulp.src(['node_modules/riot/riot.min.js', 'node_modules/riotgear-router/dist/rg-router.min.js', 'node_modules/riot-mui/build/js/riot-mui-min.js']) + .pipe(concat('vendor.js')) + .pipe(gulp.dest('dist/scripts')); +}); + gulp.task('styles', ['html'], function() { return gulp.src(['src/*.css']) .pipe(concat('style.css')) @@ -109,7 +115,7 @@ gulp.task('fonts', function() { .pipe(gulp.dest('dist/fonts')); }); -gulp.task('sources', ['riot-tag', 'riot-static-tag', 'scripts', 'scripts-static', 'styles'], function() { +gulp.task('sources', ['riot-tag', 'riot-static-tag', 'scripts', 'vendor', 'scripts-static', 'styles'], function() { gulp.start(); }); diff --git a/package.json b/package.json index 6fb586d..bb32748 100644 --- a/package.json +++ b/package.json @@ -9,13 +9,11 @@ "url": "https://github.com/Joxit/docker-registry-ui.git" }, "author": "Jones Magloire (Joxit)", - "license": "AGPLv3", + "license": "AGPL-3.0", "description": "A web UI for private docker registry", - "dependencies": { - }, + "dependencies": {}, "devDependencies": { "del": "^3.0.0", - "dialog-polyfill": "^0.4", "gulp": "^3.9", "gulp-clean-css": "^3.7.0", "gulp-concat": "^2.6.0", @@ -26,9 +24,9 @@ "gulp-riot": "^1.1.1", "gulp-uglify": "^2.1.2", "gulp-useref": "^3.0.0", - "material-design-lite": "^1.1", "pump": "^1.0.2", "riot": "^3.7.0", + "riot-mui": "^0.1.1", "riotgear-router": "^1.3.1", "uglify-js": "^3.0.28", "uglify-js-harmony": "^2.7.7" diff --git a/screenshot.png b/screenshot.png index 92635e2..a4b049b 100644 Binary files a/screenshot.png and b/screenshot.png differ diff --git a/src/index.html b/src/index.html index 3cced1b..236692c 100644 --- a/src/index.html +++ b/src/index.html @@ -20,8 +20,7 @@ - - + @@ -32,38 +31,11 @@ - -
-
-
- - Docker Registry UI - -
-
-
-
- -
-
- - - - -
+ - - + diff --git a/src/scripts/script.js b/src/scripts/script.js index cd6cb8b..31f2ea7 100644 --- a/src/scripts/script.js +++ b/src/scripts/script.js @@ -18,7 +18,7 @@ var registryUI = {} registryUI.URL_QUERY_PARAM_REGEX = /[&?]url=/; registryUI.URL_PARAM_REGEX = /^url=/; -registryUI.url = function() { +registryUI.url = function(byPassQueryParam) { if (!registryUI._url) { var url = registryUI.getUrlQueryParam(); if (url) { @@ -78,10 +78,14 @@ registryUI.removeServer = function(url) { } registryServer.splice(index, 1); localStorage.setItem('registryServer', JSON.stringify(registryServer)); + if (url == registryUI.url()) { + registryUI.updateHistory(registryUI.getRegistryServer(0)); + rg.router.go('home'); + } } registryUI.updateHistory = function(url) { - history.pushState(null, '', '?url=' + registryUI.encodeURI(url) + window.location.hash); + history.pushState(null, '', (url ? '?url=' + registryUI.encodeURI(url) : '?') + window.location.hash); registryUI._url = url; } diff --git a/src/style.css b/src/style.css index 972737c..1bc9041 100644 --- a/src/style.css +++ b/src/style.css @@ -18,28 +18,19 @@ html > body { font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important; } - -.mdl-mini-footer { - padding-top: 8px; - padding-bottom: 8px; +html, body { + margin: 0; + height: 100%; } -.catalog, .taglist { - padding: 16px; +main { + margin-bottom: 100px; } .section-centerd { margin: auto; } -.mdl-data-table th { - font-size: 18px; -} - -.mdl-data-table td { - font-size: 16px; -} - .full-table { width: 100%; border: none; @@ -50,8 +41,270 @@ html > body { word-break: break-all; } -.mdl-logo a { +.material-card-title-action a { color: inherit; text-decoration: none; font-weight: inherit; +} + +material-card { + min-height: 200px; + max-width: 75%; + margin: auto; + margin-top: 20px; + margin-bottom: 20px; +} + +material-spinner { + align-self: center; +} + +.spinner-wrapper { + margin-top: 50px; + display: flex; + flex-direction: column; +} +material-navbar { + height: 64px; +} +.logo { + padding: 0 16px 0 72px; + text-decoration: none; + font-size: 20px; + line-height: 1; + letter-spacing: .02em; + font-weight: 400; +} +h2 { + padding: 16px; + margin: auto; + font-size: 24px; + font-weight: 300; + line-height: normal; + overflow: hidden; +} +.list { + display: block; + padding: 8px 0; + list-style: none; +} +.list.highlight>li:hover { + background-color: #eee; + cursor: pointer; +} +.list>li { + box-sizing: border-box; + line-height: 1; + height: 48px; + padding: 0 16px; + overflow: hidden; +} +.list>li i.material-icons { + margin-right: 32px; + height: 24px; + width: 24px; + font-size: 24px; + box-sizing: border-box; + color: #757575; +} +.list>li>span { + height: 100%; + text-decoration: none; + box-sizing: border-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} + +.material-card-title-action { + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + display: block; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 16px; +} + +.material-card-title-action h2 { + margin: 0; +} + +material-card table { + width: 100%; + border: none; + position: relative; + border: 1px solid rgba(0,0,0,.12); + border-collapse: collapse; + white-space: nowrap; + font-size: 13px; + background-color: #fff; + border: none; +} + +material-card table th { + font-size: 18px; + vertical-align: bottom; + line-height: 24px; + height: 48px; + color: rgba(0,0,0,.54); + box-sizing: border-box; + padding: 0 18px 12px 18px; + text-align: right; +} + +.material-card-th-left { + text-align: left; +} + +material-card table tbody tr:hover { + background-color: #eee; +} + +material-card table tbody tr { + position: relative; + height: 48px; + transition-duration: .28s; + transition-timing-function: cubic-bezier(.4,0,.2,1); + transition-property: background-color; +} + +material-card table td { + font-size: 16px; + position: relative; + height: 48px; + border-top: 1px solid rgba(0,0,0,.12); + border-bottom: 1px solid rgba(0,0,0,.12); + padding: 12px 18px; + box-sizing: border-box; + vertical-align: middle; + text-align: right; +} +material-card table th.material-card-th-sorted-ascending:hover, +material-card table th.material-card-th-sorted-descending:hover { + cursor: pointer; +} +material-card table th.material-card-th-sorted-ascending:hover:before, +material-card table th.material-card-th-sorted-descending:hover:before { + color: rgba(0,0,0,.26); +} + +material-card table th.material-card-th-sorted-ascending:before, +material-card table th.material-card-th-sorted-descending:before { + font-family: 'Material Icons'; + font-weight: 400; + font-style: normal; + line-height: 1; + font-size: 16px; + content: "\e5d8"; + margin-right: 5px; + vertical-align: sub; +} +material-card table th.material-card-th-sorted-descending:before { + content: "\e5db"; +} + +.material-icons { + color: #777; +} + +material-snackbar .toast { + height: auto; +} + +menu { + position: absolute; + top: 0px; + right: 16px; + color: #000; +} + +menu .overlay { + position: fixed; + height: 100%; + width: 100%; + top: 0; + right: 0; + z-index: 1; +} + +#menu-control-button { + background: rgba(255,255,255,0); + float: right; +} + +#menu-control-button i { + color: #fff; + font-size: 24px; +} + +#menu-control-dropdown { + display: inline-block; + position: relative; +} + +.dropdown { + min-width: 124px; + padding: 8px 0; + margin: 0; +} + +dropdown-item, #menu-control-dropdown p { + padding: 0 16px; + margin: auto; + line-height: 48px; + height: 48px; + cursor: pointer; +} + +#menu-control-dropdown p:hover { + background-color: #eee; +} + +#menu-control-dropdown p:active, .material-button-active:active { + background-color: #e0e0e0; +} + +material-popup material-button { + background-color: #fff; + color: #000; +} + +material-popup material-button:hover material-waves { + background-color: hsla(0,0%,75%,.2); +} + +material-popup .popup { + max-width: 450px; +} + +footer { + width: 100%; + position: fixed; + bottom: 0; +} + +.select-padding { + padding: 20px 0; +} + +select { + position: relative; + outline: 0; + box-shadow: none; + padding: 0; + width: 100%; + background: 0 0; + border: none; + font-weight: 400; + line-height: 24px; + height: 24px; + border-bottom: 1px solid #2f6975; + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; } \ No newline at end of file diff --git a/src/tags/add.tag b/src/tags/add.tag index 46ff0bd..8bc87ae 100644 --- a/src/tags/add.tag +++ b/src/tags/add.tag @@ -15,51 +15,45 @@ along with this program. If not, see . --> - -

Add your Server ?

-
-
- - -
-
-
- - -
- + +
Add your Server ?
+
+ + Write your URL without /v2 +
+
+ Add + Cancel +
+ + diff --git a/src/tags/app.tag b/src/tags/app.tag index b373d1c..2d99e3a 100644 --- a/src/tags/app.tag +++ b/src/tags/app.tag @@ -15,8 +15,34 @@ along with this program. If not, see . --> - - +
+ + + + +
+
+ + + + + + +
+ - + \ No newline at end of file diff --git a/src/tags/catalog.tag b/src/tags/catalog.tag index 29110a0..5632f65 100644 --- a/src/tags/catalog.tag +++ b/src/tags/catalog.tag @@ -16,57 +16,42 @@ --> -
-
-
-

Repositories of { registryUI.url() }

-
- -
    -
  • - - send - { item } - -
    • -
+ +
+

Repositories of { registryUI.url() }

-
-
- + -
+
    +
  • + + send + { item } + +
    • +
+ - + \ No newline at end of file diff --git a/src/tags/menu.tag b/src/tags/menu.tag index e68bda0..915985f 100644 --- a/src/tags/menu.tag +++ b/src/tags/menu.tag @@ -15,23 +15,31 @@ along with this program. If not, see . --> -
- -
    -
  • Add URL
    • -
  • Change URL
    • -
  • Remove URL
    • -
-
- + + more_vert + + +

Add URL

+

Change URL

+

Remove URL

+ +
diff --git a/src/tags/remove-image.tag b/src/tags/remove-image.tag index d41ee40..a6d7c1f 100644 --- a/src/tags/remove-image.tag +++ b/src/tags/remove-image.tag @@ -16,7 +16,7 @@ --> - delete + delete diff --git a/src/tags/taglist.tag b/src/tags/taglist.tag index 18904c9..4c50958 100644 --- a/src/tags/taglist.tag +++ b/src/tags/taglist.tag @@ -16,40 +16,35 @@ --> -
-
-
- - arrow_back - -

Tags of { registryUI.url() + '/' + registryUI.taglist.name }

-
- - - - - - - - - - - - - - - - -
RepositoryTag
{ registryUI.taglist.name }{ item } - -
+ +
+ + arrow_back + +

Tags of { registryUI.url() + '/' + registryUI.taglist.name }

-
-
- + -
- + + + + + + + + + + + + + + + +
RepositoryTag
{ registryUI.taglist.name }{ item } + +
+