From a6710486d627b87459762b18c19de94b712e412d Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Sun, 13 Feb 2022 23:04:29 -0800
Subject: [PATCH] github themes

---
 src/i18n/en_US.jsonc                       |   2 +
 src/main/base/browserwindow.ts             |   1 +
 src/renderer/less/bootstrap.less           | 495 +++++++++++++++++++++
 src/renderer/less/pages.less               |  14 +
 src/renderer/style.less                    |   2 +-
 src/renderer/views/app/app-content.ejs     |   6 +
 src/renderer/views/pages/settings.ejs      |  21 +-
 src/renderer/views/pages/themes-github.ejs |  96 ++++
 8 files changed, 619 insertions(+), 18 deletions(-)
 create mode 100644 src/renderer/views/pages/themes-github.ejs

diff --git a/src/i18n/en_US.jsonc b/src/i18n/en_US.jsonc
index 7f65bf75..9b4e1652 100644
--- a/src/i18n/en_US.jsonc
+++ b/src/i18n/en_US.jsonc
@@ -299,6 +299,8 @@
   "settings.header.visual.hardwareAcceleration.webGPU": "WebGPU",
   "settings.header.visual.theme": "Theme",
   "settings.option.visual.theme.github.download": "Install from GitHub URL",
+  "settings.option.visual.theme.github.explore": "Explore GitHub Themes",
+  "settings.option.visual.theme.github.install.confirm": "Are you sure you want to install {{ repo }}?",
   "settings.prompt.visual.theme.github.URL": "Enter the URL of the theme you want to install",
   "settings.notyf.visual.theme.install.success": "Theme installed successfully",
   "settings.notyf.visual.theme.install.error": "Theme installation failed",
diff --git a/src/main/base/browserwindow.ts b/src/main/base/browserwindow.ts
index c62488e0..98125067 100644
--- a/src/main/base/browserwindow.ts
+++ b/src/main/base/browserwindow.ts
@@ -46,6 +46,7 @@ export class BrowserWindow {
                 "pages/about",
                 "pages/library-videos",
                 "pages/remote-pair",
+                "pages/themes-github",
                 "components/mediaitem-artwork",
                 "components/artwork-material",
                 "components/menu-panel",
diff --git a/src/renderer/less/bootstrap.less b/src/renderer/less/bootstrap.less
index 0a9be971..fccdd2c6 100644
--- a/src/renderer/less/bootstrap.less
+++ b/src/renderer/less/bootstrap.less
@@ -1,3 +1,498 @@
+// List Group
+.list-group {
+    display: flex;
+    flex-direction: column;
+    padding-left: 0;
+    margin-bottom: 0;
+    border-radius: 0.25rem;
+}
+
+.list-group-numbered {
+    list-style-type: none;
+    counter-reset: section;
+}
+.list-group-numbered > li::before {
+    content: counters(section, ".") ". ";
+    counter-increment: section;
+}
+
+.list-group-item-action {
+    width: 100%;
+    color: #495057;
+    text-align: inherit;
+}
+.list-group-item-action:hover, .list-group-item-action:focus {
+    z-index: 1;
+    color: #495057;
+    text-decoration: none;
+    background-color: #f8f9fa;
+}
+.list-group-item-action:active {
+    color: #212529;
+    background-color: #e9ecef;
+}
+
+.list-group-item {
+    position: relative;
+    display: block;
+    padding: 0.5rem 1rem;
+    color: #212529;
+    text-decoration: none;
+    background-color: #fff;
+    border: 1px solid rgba(0, 0, 0, 0.125);
+}
+.list-group-item:first-child {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+}
+.list-group-item:last-child {
+    border-bottom-right-radius: inherit;
+    border-bottom-left-radius: inherit;
+}
+.list-group-item.disabled, .list-group-item:disabled {
+    color: #6c757d;
+    pointer-events: none;
+    background-color: #fff;
+}
+.list-group-item.active {
+    z-index: 2;
+    color: #fff;
+    background-color: #0d6efd;
+    border-color: #0d6efd;
+}
+.list-group-item + .list-group-item {
+    border-top-width: 0;
+}
+.list-group-item + .list-group-item.active {
+    margin-top: -1px;
+    border-top-width: 1px;
+}
+
+.list-group-horizontal {
+    flex-direction: row;
+}
+.list-group-horizontal > .list-group-item:first-child {
+    border-bottom-left-radius: 0.25rem;
+    border-top-right-radius: 0;
+}
+.list-group-horizontal > .list-group-item:last-child {
+    border-top-right-radius: 0.25rem;
+    border-bottom-left-radius: 0;
+}
+.list-group-horizontal > .list-group-item.active {
+    margin-top: 0;
+}
+.list-group-horizontal > .list-group-item + .list-group-item {
+    border-top-width: 1px;
+    border-left-width: 0;
+}
+.list-group-horizontal > .list-group-item + .list-group-item.active {
+    margin-left: -1px;
+    border-left-width: 1px;
+}
+
+@media (min-width: 576px) {
+    .list-group-horizontal-sm {
+        flex-direction: row;
+    }
+    .list-group-horizontal-sm > .list-group-item:first-child {
+        border-bottom-left-radius: 0.25rem;
+        border-top-right-radius: 0;
+    }
+    .list-group-horizontal-sm > .list-group-item:last-child {
+        border-top-right-radius: 0.25rem;
+        border-bottom-left-radius: 0;
+    }
+    .list-group-horizontal-sm > .list-group-item.active {
+        margin-top: 0;
+    }
+    .list-group-horizontal-sm > .list-group-item + .list-group-item {
+        border-top-width: 1px;
+        border-left-width: 0;
+    }
+    .list-group-horizontal-sm > .list-group-item + .list-group-item.active {
+        margin-left: -1px;
+        border-left-width: 1px;
+    }
+}
+@media (min-width: 768px) {
+    .list-group-horizontal-md {
+        flex-direction: row;
+    }
+    .list-group-horizontal-md > .list-group-item:first-child {
+        border-bottom-left-radius: 0.25rem;
+        border-top-right-radius: 0;
+    }
+    .list-group-horizontal-md > .list-group-item:last-child {
+        border-top-right-radius: 0.25rem;
+        border-bottom-left-radius: 0;
+    }
+    .list-group-horizontal-md > .list-group-item.active {
+        margin-top: 0;
+    }
+    .list-group-horizontal-md > .list-group-item + .list-group-item {
+        border-top-width: 1px;
+        border-left-width: 0;
+    }
+    .list-group-horizontal-md > .list-group-item + .list-group-item.active {
+        margin-left: -1px;
+        border-left-width: 1px;
+    }
+}
+@media (min-width: 992px) {
+    .list-group-horizontal-lg {
+        flex-direction: row;
+    }
+    .list-group-horizontal-lg > .list-group-item:first-child {
+        border-bottom-left-radius: 0.25rem;
+        border-top-right-radius: 0;
+    }
+    .list-group-horizontal-lg > .list-group-item:last-child {
+        border-top-right-radius: 0.25rem;
+        border-bottom-left-radius: 0;
+    }
+    .list-group-horizontal-lg > .list-group-item.active {
+        margin-top: 0;
+    }
+    .list-group-horizontal-lg > .list-group-item + .list-group-item {
+        border-top-width: 1px;
+        border-left-width: 0;
+    }
+    .list-group-horizontal-lg > .list-group-item + .list-group-item.active {
+        margin-left: -1px;
+        border-left-width: 1px;
+    }
+}
+@media (min-width: 1200px) {
+    .list-group-horizontal-xl {
+        flex-direction: row;
+    }
+    .list-group-horizontal-xl > .list-group-item:first-child {
+        border-bottom-left-radius: 0.25rem;
+        border-top-right-radius: 0;
+    }
+    .list-group-horizontal-xl > .list-group-item:last-child {
+        border-top-right-radius: 0.25rem;
+        border-bottom-left-radius: 0;
+    }
+    .list-group-horizontal-xl > .list-group-item.active {
+        margin-top: 0;
+    }
+    .list-group-horizontal-xl > .list-group-item + .list-group-item {
+        border-top-width: 1px;
+        border-left-width: 0;
+    }
+    .list-group-horizontal-xl > .list-group-item + .list-group-item.active {
+        margin-left: -1px;
+        border-left-width: 1px;
+    }
+}
+@media (min-width: 1400px) {
+    .list-group-horizontal-xxl {
+        flex-direction: row;
+    }
+    .list-group-horizontal-xxl > .list-group-item:first-child {
+        border-bottom-left-radius: 0.25rem;
+        border-top-right-radius: 0;
+    }
+    .list-group-horizontal-xxl > .list-group-item:last-child {
+        border-top-right-radius: 0.25rem;
+        border-bottom-left-radius: 0;
+    }
+    .list-group-horizontal-xxl > .list-group-item.active {
+        margin-top: 0;
+    }
+    .list-group-horizontal-xxl > .list-group-item + .list-group-item {
+        border-top-width: 1px;
+        border-left-width: 0;
+    }
+    .list-group-horizontal-xxl > .list-group-item + .list-group-item.active {
+        margin-left: -1px;
+        border-left-width: 1px;
+    }
+}
+.list-group-flush {
+    border-radius: 0;
+}
+.list-group-flush > .list-group-item {
+    border-width: 0 0 1px;
+}
+.list-group-flush > .list-group-item:last-child {
+    border-bottom-width: 0;
+}
+
+.list-group-item-primary {
+    color: #084298;
+    background-color: #cfe2ff;
+}
+.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
+    color: #084298;
+    background-color: #bacbe6;
+}
+.list-group-item-primary.list-group-item-action.active {
+    color: #fff;
+    background-color: #084298;
+    border-color: #084298;
+}
+
+.list-group-item-secondary {
+    color: #41464b;
+    background-color: #e2e3e5;
+}
+.list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
+    color: #41464b;
+    background-color: #cbccce;
+}
+.list-group-item-secondary.list-group-item-action.active {
+    color: #fff;
+    background-color: #41464b;
+    border-color: #41464b;
+}
+
+.list-group-item-success {
+    color: #0f5132;
+    background-color: #d1e7dd;
+}
+.list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus {
+    color: #0f5132;
+    background-color: #bcd0c7;
+}
+.list-group-item-success.list-group-item-action.active {
+    color: #fff;
+    background-color: #0f5132;
+    border-color: #0f5132;
+}
+
+.list-group-item-info {
+    color: #055160;
+    background-color: #cff4fc;
+}
+.list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus {
+    color: #055160;
+    background-color: #badce3;
+}
+.list-group-item-info.list-group-item-action.active {
+    color: #fff;
+    background-color: #055160;
+    border-color: #055160;
+}
+
+.list-group-item-warning {
+    color: #664d03;
+    background-color: #fff3cd;
+}
+.list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus {
+    color: #664d03;
+    background-color: #e6dbb9;
+}
+.list-group-item-warning.list-group-item-action.active {
+    color: #fff;
+    background-color: #664d03;
+    border-color: #664d03;
+}
+
+.list-group-item-danger {
+    color: #842029;
+    background-color: #f8d7da;
+}
+.list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus {
+    color: #842029;
+    background-color: #dfc2c4;
+}
+.list-group-item-danger.list-group-item-action.active {
+    color: #fff;
+    background-color: #842029;
+    border-color: #842029;
+}
+
+.list-group-item-light {
+    color: #636464;
+    background-color: #fefefe;
+}
+.list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus {
+    color: #636464;
+    background-color: #e5e5e5;
+}
+.list-group-item-light.list-group-item-action.active {
+    color: #fff;
+    background-color: #636464;
+    border-color: #636464;
+}
+
+.list-group-item-dark {
+    color: var(--textColor);
+    background-color: #333;
+}
+.list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus {
+    color: #141619;
+    background-color: #bebebf;
+}
+.list-group-item-dark.list-group-item-action.active {
+    color: #fff;
+    background-color: #141619;
+    border-color: #141619;
+}
+
+
+// Card
+.card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    background-color: #333;
+    background-clip: border-box;
+    border: 1px solid rgba(0, 0, 0, 0.125);
+    border-radius: 0.25rem;
+}
+.card > hr {
+    margin-right: 0;
+    margin-left: 0;
+}
+.card > .list-group {
+    border-top: inherit;
+    border-bottom: inherit;
+}
+.card > .list-group:first-child {
+    border-top-width: 0;
+    border-top-left-radius: calc(0.25rem - 1px);
+    border-top-right-radius: calc(0.25rem - 1px);
+}
+.card > .list-group:last-child {
+    border-bottom-width: 0;
+    border-bottom-right-radius: calc(0.25rem - 1px);
+    border-bottom-left-radius: calc(0.25rem - 1px);
+}
+.card > .card-header + .list-group,
+.card > .list-group + .card-footer {
+    border-top: 0;
+}
+
+.card-body {
+    flex: 1 1 auto;
+    padding: 1rem 1rem;
+}
+
+.card-title {
+    margin-bottom: 0.5rem;
+}
+
+.card-subtitle {
+    margin-top: -0.25rem;
+    margin-bottom: 0;
+}
+
+.card-text:last-child {
+    margin-bottom: 0;
+}
+
+.card-link + .card-link {
+    margin-left: 1rem;
+}
+
+.card-header {
+    padding: 0.5rem 1rem;
+    margin-bottom: 0;
+    background-color: rgba(0, 0, 0, 0.03);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+}
+.card-header:first-child {
+    border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
+}
+
+.card-footer {
+    padding: 0.5rem 1rem;
+    background-color: rgba(0, 0, 0, 0.03);
+    border-top: 1px solid rgba(0, 0, 0, 0.125);
+}
+.card-footer:last-child {
+    border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
+}
+
+.card-header-tabs {
+    margin-right: -0.5rem;
+    margin-bottom: -0.5rem;
+    margin-left: -0.5rem;
+    border-bottom: 0;
+}
+
+.card-header-pills {
+    margin-right: -0.5rem;
+    margin-left: -0.5rem;
+}
+
+.card-img-overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: 1rem;
+    border-radius: calc(0.25rem - 1px);
+}
+
+.card-img,
+.card-img-top,
+.card-img-bottom {
+    width: 100%;
+}
+
+.card-img,
+.card-img-top {
+    border-top-left-radius: calc(0.25rem - 1px);
+    border-top-right-radius: calc(0.25rem - 1px);
+}
+
+.card-img,
+.card-img-bottom {
+    border-bottom-right-radius: calc(0.25rem - 1px);
+    border-bottom-left-radius: calc(0.25rem - 1px);
+}
+
+.card-group > .card {
+    margin-bottom: 0.75rem;
+}
+@media (min-width: 576px) {
+    .card-group {
+        display: flex;
+        flex-flow: row wrap;
+    }
+    .card-group > .card {
+        flex: 1 0 0%;
+        margin-bottom: 0;
+    }
+    .card-group > .card + .card {
+        margin-left: 0;
+        border-left: 0;
+    }
+    .card-group > .card:not(:last-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+    .card-group > .card:not(:last-child) .card-img-top,
+    .card-group > .card:not(:last-child) .card-header {
+        border-top-right-radius: 0;
+    }
+    .card-group > .card:not(:last-child) .card-img-bottom,
+    .card-group > .card:not(:last-child) .card-footer {
+        border-bottom-right-radius: 0;
+    }
+    .card-group > .card:not(:first-child) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+    .card-group > .card:not(:first-child) .card-img-top,
+    .card-group > .card:not(:first-child) .card-header {
+        border-top-left-radius: 0;
+    }
+    .card-group > .card:not(:first-child) .card-img-bottom,
+    .card-group > .card:not(:first-child) .card-footer {
+        border-bottom-left-radius: 0;
+    }
+}
+
+
 .modal {
     position: fixed;
     top: 0;
diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less
index 2d30a480..a62478b3 100644
--- a/src/renderer/less/pages.less
+++ b/src/renderer/less/pages.less
@@ -18,6 +18,20 @@
 }
 // End Helpers
 
+// GitHub Themes
+.github-themes-page {
+  .github-avatar {
+    height: 42px;
+    width: 42px;
+    margin: 6px;
+    border-radius: 32px;
+  }
+
+  .repo-name {
+    margin:0px;
+    font-weight: 500;
+  }
+}
 
 // Library - Songs page
 .library-page {
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 6a238d94..85949811 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -140,7 +140,7 @@ body.notransparency::before {
   width: 100%;
   height: 100%;
   background: var(--color1);
-  color: white;
+  color: var(--textColor);
   user-select: none;
   margin: 0 auto;
   position: relative;
diff --git a/src/renderer/views/app/app-content.ejs b/src/renderer/views/app/app-content.ejs
index 5087544a..1ebbd22e 100644
--- a/src/renderer/views/app/app-content.ejs
+++ b/src/renderer/views/app/app-content.ejs
@@ -159,6 +159,12 @@
             <cider-applecurator :data="appleCurator"></cider-applecurator>
         </template>
     </transition>
+<!--    Github themes-->
+    <transition name="wpfade">
+        <template v-if="page == 'themes-github'">
+            <themes-github></themes-github>
+        </template>
+    </transition>
         <!-- Library - Library Videos -->
     <transition name="wpfade">
         <template v-if="page == 'remote-pair'">
diff --git a/src/renderer/views/pages/settings.ejs b/src/renderer/views/pages/settings.ejs
index fc9d0c28..70ca7ac2 100644
--- a/src/renderer/views/pages/settings.ejs
+++ b/src/renderer/views/pages/settings.ejs
@@ -132,8 +132,8 @@
                             <option value="dark.less">{{$root.getLz('settings.option.visual.theme.dark')}}</option>
                             <option v-for="theme in themes" :value="theme.file">{{ theme.name }}</option>
                         </select>
-                        <button class="md-btn md-btn-small md-btn-block" @click="installTheme()" style="margin-top: 8px">
-                            {{$root.getLz('settings.option.visual.theme.github.download')}}
+                        <button class="md-btn md-btn-small md-btn-block" @click="gitHubExplore()" style="margin-top: 8px">
+                            {{$root.getLz('settings.option.visual.theme.github.explore')}}
                         </button>
                     </div>
                 </div>
@@ -774,21 +774,8 @@
             }
         },
         methods: {
-            installTheme() {
-                let self = this
-                bootbox.prompt(app.getLz('settings.prompt.visual.theme.github.URL'), (result) => {
-                    if (result) {
-                        ipcRenderer.once("theme-installed", (event, arg) => {
-                            if (arg.success) {
-                                self.themes = ipcRenderer.sendSync("get-themes")
-                                notyf.success(app.getLz('settings.notyf.visual.theme.install.success'));
-                            } else {
-                                notyf.error(app.getLz('settings.notyf.visual.theme.install.error'));
-                            }
-                        });
-                        ipcRenderer.invoke("get-github-theme", result)
-                    }
-                });
+            gitHubExplore() {
+                app.appRoute("themes-github")
             },
             copyLogs() {
                 ipcRenderer.send('fetch-log')
diff --git a/src/renderer/views/pages/themes-github.ejs b/src/renderer/views/pages/themes-github.ejs
new file mode 100644
index 00000000..f2ce7817
--- /dev/null
+++ b/src/renderer/views/pages/themes-github.ejs
@@ -0,0 +1,96 @@
+<script type="text/x-template" id="themes-github">
+    <div class="content-inner github-themes-page">
+        <div class="row">
+            <div class="col nopadding">
+                <h1 class="header-text">Themes from GitHub</h1>
+            </div>
+            <div class="col-auto nopadding flex-center">
+                <button class="md-btn md-btn-small md-btn-block" @click="installThemeURL()" style="margin-top: 8px">
+                    {{$root.getLz('settings.option.visual.theme.github.download')}}
+                </button>
+            </div>
+        </div>
+        <ul class="list-group">
+            <li class="list-group-item list-group-item-dark" v-for="repo in repos">
+                <div class="row">
+                    <div class="col-1 flex-center">
+                        <img class="github-avatar" :src="repo.owner.avatar_url" alt="">
+                    </div>
+                    <div class="col flex-center">
+                        <div>
+                            <h3 class="repo-name">{{ repo.description }}</h3>
+                            <small><a :href="repo.html_url" target="_blank">{{ repo.full_name }}</a></small>
+                        </div>
+                    </div>
+                    <div class="col-auto flex-center">
+                        <button class="md-btn md-btn-primary" @click="installThemeRepo(repo)">Install</button>
+                    </div>
+                </div>
+            </li>
+        </ul>
+    </div>
+</script>
+<script>
+    Vue.component('themes-github', {
+        template: "#themes-github",
+        props: [],
+        data: function () {
+            return {
+                repos: [],
+            }
+        },
+        mounted() {
+            this.getRepos();
+        },
+        methods: {
+            installThemeRepo(repo) {
+                let self = this
+                let msg = app.stringTemplateParser(app.getLz('settings.option.visual.theme.github.install.confirm'), {
+                    repo: repo.full_name
+                });
+                bootbox.confirm(msg, ()=>{
+                    ipcRenderer.once("theme-installed", (event, arg) => {
+                        if (arg.success) {
+                            self.themes = ipcRenderer.sendSync("get-themes")
+                            notyf.success(app.getLz('settings.notyf.visual.theme.install.success'));
+                        } else {
+                            notyf.error(app.getLz('settings.notyf.visual.theme.install.error'));
+                        }
+                    });
+                    ipcRenderer.invoke("get-github-theme", repo.html_url)
+                })
+            },
+            installThemeURL() {
+                let self = this
+                bootbox.prompt(app.getLz('settings.prompt.visual.theme.github.URL'), (result) => {
+                    if (result) {
+                        ipcRenderer.once("theme-installed", (event, arg) => {
+                            if (arg.success) {
+                                self.themes = ipcRenderer.sendSync("get-themes")
+                                notyf.success(app.getLz('settings.notyf.visual.theme.install.success'));
+                            } else {
+                                notyf.error(app.getLz('settings.notyf.visual.theme.install.error'));
+                            }
+                        });
+                        ipcRenderer.invoke("get-github-theme", result)
+                    }
+                });
+            },
+            getRepos() {
+                let self = this
+                var requestOptions = {
+                    method: 'GET',
+                    redirect: 'follow'
+                };
+
+                fetch("https://api.github.com/search/repositories?q=topic:cidermusictheme fork:true", requestOptions)
+                    .then(response => response.text())
+                    .then(result => {
+                        console.log(result)
+                        self.repos = JSON.parse(result).items
+                    })
+                    .catch(error => console.log('error', error));
+            }
+        }
+    })
+</script>
\ No newline at end of file