Merge pull request #189 from SelfhostedPro/theming

Theming
SelfhostedPro · Oct 21, 2020 · 73ef7bf · 73ef7bf
2 parents 486df5a + 464b99c
commit 73ef7bf
Show file tree

Hide file tree

Showing 33 changed files with 207 additions and 182 deletions.
diff --git a/backend/api/db/crud/templates.py b/backend/api/db/crud/templates.py
@@ -64,7 +64,7 @@ def add_template(db: Session, template: models.containers.Template):
                     # Optional use classmethod from_dict
                     try:
                         template_content = models.containers.TemplateItem(
-                            type=int(entry['type']),
+                            type=int(entry.get('type', 1)),
                             title=entry['title'],
                             platform=entry['platform'],
                             description=entry.get('description', ''),
@@ -95,7 +95,7 @@ def add_template(db: Session, template: models.containers.Template):
 
                 # Optional use classmethod from_dict
                 template_content = models.containers.TemplateItem(
-                    type=int(entry['type']),
+                    type=int(entry.get('type', 1)),
                     title=entry['title'],
                     platform=entry['platform'],
                     description=entry.get('description', ''),
@@ -119,7 +119,7 @@ def add_template(db: Session, template: models.containers.Template):
         # Optional handle KeyError here too.
         print('data request failed', err)
         raise HTTPException(
-            status_code=exc.response.status_code, detail=exc.explanation
+            status_code=err.status_code, detail=err.explanation
             )
 
     try:

diff --git a/frontend/src/components/applications/ApplicationDetails.vue b/frontend/src/components/applications/ApplicationDetails.vue
@@ -1,8 +1,8 @@
 <template lang="html">
-  <v-card class="d-flex mx-auto page">
+  <v-card color='foreground' class="d-flex mx-auto page">
     <v-container fluid class="component">
       <Nav :isLoading="isLoading" />
-      <v-card tile>
+      <v-card color="foreground" tile>
         <v-row>
           <v-col class="flex-grow-1 flex-shrink-0">
             <v-card-title>
@@ -13,7 +13,7 @@
                     <v-icon>mdi-chevron-down</v-icon>
                   </v-btn>
                 </template>
-                <v-list dense>
+                <v-list color='foreground' dense>
                   <v-list-item
                     @click="AppAction({ Name: app.name, Action: 'start' })"
                   >

diff --git a/frontend/src/components/applications/ApplicationDetailsComponents/AppContent.vue b/frontend/src/components/applications/ApplicationDetailsComponents/AppContent.vue
@@ -8,7 +8,7 @@
               General container information
             </v-card-subtitle> -->
       <v-divider />
-      <v-list class="secondary px-5">
+      <v-list class="foreground px-5">
         <v-list-item>
           <v-list-item-content
             ><v-list-item-title class="font-weight-bold"
@@ -23,7 +23,20 @@
         </v-list-item>
 
         <v-divider />
+        <v-list-item>
+          <v-list-item-content
+            ><v-list-item-title class="font-weight-bold"
+              >Container Image</v-list-item-title
+            ></v-list-item-content
+          >
+          <v-list-item-content>
+            <v-list-item-title>
+              <a :href="'https://'+'hub.docker.com/r/' + app.Config.Image.split(':')[0]">{{ app.Config.Image.split(':')[0] }}</a>
+            </v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
 
+        <v-divider />
         <v-list-item>
           <v-list-item-content
             ><v-list-item-title class="font-weight-bold"
@@ -75,11 +88,11 @@
       <v-divider />
       <v-card-text
         v-if="app.State.Status != 'running'"
-        class="secondary text-center px-5 py-5"
+        class="foreground text-center px-5 py-5"
       >
         Start the app to view ports
       </v-card-text>
-      <v-simple-table v-else class="secondary px-0 text-center">
+      <v-simple-table v-else class="foreground px-0 text-center">
         <template v-slot:default>
           <thead>
             <tr>
@@ -129,7 +142,7 @@
       >
         Start the app to view volumes
       </v-card-text>
-      <v-simple-table v-else class="secondary px-0 text-center">
+      <v-simple-table v-else class="foreground px-0 text-center">
         <template v-slot:default>
           <thead>
             <tr>
@@ -159,7 +172,7 @@
       >
         Start the app to view volumes
       </v-card-text>
-      <v-simple-table v-else class="secondary px-0 text-center">
+      <v-simple-table v-else class="foreground px-0 text-center">
         <template v-slot:default>
           <thead>
             <tr>
@@ -192,7 +205,7 @@
               General container information
             </v-card-subtitle> -->
       <v-divider />
-      <v-list class="secondary px-5">
+      <v-list class="foreground px-5">
         <v-list-item v-if="app.HostConfig.CapAdd">
           <v-list-item-content
             ><v-list-item-title class="font-weight-bold"
@@ -254,7 +267,7 @@
       <v-card-title class="subheading teal darken-1 font-weight-bold">
         Container Labels
       </v-card-title>
-      <v-simple-table class="secondary px-0 text-center">
+      <v-simple-table class="foreground px-0 text-center">
         <template v-slot:default>
           <thead>
             <tr>

diff --git a/frontend/src/components/applications/ApplicationDetailsComponents/AppLogs.vue b/frontend/src/components/applications/ApplicationDetailsComponents/AppLogs.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card raised>
+  <v-card color="foreground" raised>
     <v-card-title class="primary font-weight-bold">
       Logs
     </v-card-title>

diff --git a/frontend/src/components/applications/ApplicationDetailsComponents/AppProcesses.vue b/frontend/src/components/applications/ApplicationDetailsComponents/AppProcesses.vue
@@ -1,28 +1,28 @@
 <template>
-  <v-card raised>
+  <v-card color="foreground" raised>
     <v-card-title class="primary font-weight-bold">
       Processes
     </v-card-title>
     <v-card-text
       v-if="app.State.Status != 'running'"
-      class="secondary text-center px-5 py-5"
+      class="text-center px-5 py-5"
     >
       Start the app to view processes
     </v-card-text>
-    <v-simple-table v-else-if="processes">
+    <v-simple-table class="foreground" v-else-if="processes">
       <template v-slot:default>
         <thead>
           <tr>
             <th
-              class="secondary"
+              class="foreground"
               v-for="(title, index) in processes.Titles"
               :key="index"
             >
               {{ title }}
             </th>
           </tr>
         </thead>
-        <tbody class="secondary">
+        <tbody class="foreground">
           <tr v-for="(item, index) in processes.Processes" :key="index">
             <td v-for="(field, index) in item" :key="index">{{ field }}</td>
           </tr>

diff --git a/frontend/src/components/applications/ApplicationDetailsComponents/AppStats.vue b/frontend/src/components/applications/ApplicationDetailsComponents/AppStats.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card raised>
+  <v-card color="foreground" raised>
     <v-card-title class="primary font-weight-bold">
       Stats
     </v-card-title>
@@ -10,7 +10,7 @@
       Start the app to view stats
     </v-card-text>
     <div v-else>
-      <v-card flat>
+      <v-card color="foreground" flat>
         <v-card-title>
           CPU Usage {{ stats.cpu_percent[stats.cpu_percent.length - 1] }}%
         </v-card-title>
@@ -20,7 +20,7 @@
         </v-card-subtitle>
         <PercentLineChart :chartData="fillCPU(stats.cpu_percent, stats.time)" />
       </v-card>
-      <v-card flat>
+      <v-card color="foreground" flat>
         <v-card-title>
           Memory Usage {{ stats.mem_percent[stats.mem_percent.length - 1] }}%,
           {{ formatBytes(stats.mem_current[stats.mem_current.length - 1]) }}/{{

diff --git a/frontend/src/components/applications/ApplicationDetailsComponents/ApplicationDetailsNav.vue b/frontend/src/components/applications/ApplicationDetailsComponents/ApplicationDetailsNav.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-tabs mobile-breakpoint="sm">
+    <v-tabs background-color='tabs' mobile-breakpoint="sm">
       <v-tab class="text-left" @click="$router.go(-1)">
         <v-icon left class="mr-1">mdi-arrow-left-bold-outline</v-icon> Back
       </v-tab>

diff --git a/frontend/src/components/applications/ApplicationsForm.vue b/frontend/src/components/applications/ApplicationsForm.vue
@@ -15,7 +15,7 @@
       <v-card-title>Note:</v-card-title>
       <v-card-text v-html="notes"></v-card-text>
     </v-card>
-    <v-stepper v-model="deployStep" alt-labels non-linear>
+    <v-stepper class="foreground" v-model="deployStep" alt-labels non-linear>
       <v-fade-transition>
         <v-progress-linear
           indeterminate
@@ -437,15 +437,15 @@
       </v-card-title>
       <v-expansion-panels flat accordion multiple focusable>
         <v-expansion-panel>
-          <v-expansion-panel-header color="secondary">
+          <v-expansion-panel-header color='foreground'>
             <v-row no-gutters>
               <v-col cols="2">Devices</v-col>
               <v-col cols="4" class="text--secondary">
                 (Passthrough Devices)
               </v-col>
             </v-row>
           </v-expansion-panel-header>
-          <v-expansion-panel-content color="secondary">
+          <v-expansion-panel-content color='foreground'>
             <form>
               <transition-group
                 name="slide"
@@ -505,15 +505,15 @@
           </v-expansion-panel-content>
         </v-expansion-panel>
         <v-expansion-panel>
-          <v-expansion-panel-header color="secondary">
+          <v-expansion-panel-header color='foreground'>
             <v-row no-gutters>
               <v-col cols="2">Labels</v-col>
               <v-col cols="4" class="text--secondary">
                 (Container Labels)
               </v-col>
             </v-row>
           </v-expansion-panel-header>
-          <v-expansion-panel-content color="secondary">
+          <v-expansion-panel-content color='foreground'>
             <form>
               <transition-group
                 name="slide"
@@ -572,13 +572,13 @@
           </v-expansion-panel-content>
         </v-expansion-panel>
         <v-expansion-panel>
-          <v-expansion-panel-header color="secondary">
+          <v-expansion-panel-header color='foreground'>
             <v-row no-gutters>
               <v-col cols="2">Sysctls</v-col>
               <v-col cols="4" class="text--secondary"> (Kernel Options) </v-col>
             </v-row>
           </v-expansion-panel-header>
-          <v-expansion-panel-content color="secondary">
+          <v-expansion-panel-content color='foreground'>
             <form>
               <transition-group
                 name="slide"
@@ -638,15 +638,15 @@
           </v-expansion-panel-content>
         </v-expansion-panel>
         <v-expansion-panel>
-          <v-expansion-panel-header color="secondary">
+          <v-expansion-panel-header color='foreground'>
             <v-row no-gutters>
               <v-col cols="2">Capabilities</v-col>
               <v-col cols="4" class="text--secondary">
                 (Special Permissions/Capabilities)
               </v-col>
             </v-row></v-expansion-panel-header
           >
-          <v-expansion-panel-content color="secondary">
+          <v-expansion-panel-content color='foreground'>
             <form>
               <v-select
                 v-model="form['cap_add']"

diff --git a/frontend/src/components/applications/ApplicationsList.vue b/frontend/src/components/applications/ApplicationsList.vue
@@ -1,6 +1,6 @@
 <template lang="html">
   <div class="apps-list component" style="max-width: 90%">
-    <v-card>
+    <v-card color='foreground'>
       <v-fade-transition>
         <v-progress-linear
           indeterminate
@@ -23,7 +23,7 @@
               <v-icon>mdi-chevron-down</v-icon>
             </v-btn>
           </template>
-          <v-list dense>
+          <v-list color='foreground' dense>
             <v-list-item @click="refresh()">
               <v-list-item-icon><v-icon>mdi-refresh</v-icon></v-list-item-icon>
               <v-list-item-title>Refresh Apps</v-list-item-title>
@@ -49,11 +49,11 @@
           color="secondary"
         >
           <template v-slot:activator="{ on, attrs }">
-            <v-btn v-bind="attrs" v-on="on" class="ml-2">
+            <v-btn color="secondary" v-bind="attrs" v-on="on" class="ml-2">
               Columns
             </v-btn>
           </template>
-          <v-list>
+          <v-list color='foreground'>
             <v-list-item
               color="primary"
               v-for="(item, index) in headers"
@@ -73,7 +73,7 @@
       <v-card-subtitle v-if="action">{{ action }} </v-card-subtitle>
       <v-data-table
         style="width: 99%"
-        class="mx-auto"
+        class="mx-auto foreground"
         :headers="selectedHeaders"
         :items="apps"
         :items-per-page="10"
@@ -93,7 +93,7 @@
                   <v-icon>mdi-chevron-down</v-icon>
                 </v-btn>
               </template>
-              <v-list dense>
+              <v-list color='foreground' dense>
                 <v-list-item
                   @click="AppAction({ Name: item.name, Action: 'start' })"
                 >

diff --git a/frontend/src/components/auth/LoginForm.vue b/frontend/src/components/auth/LoginForm.vue
@@ -10,7 +10,7 @@
       />
       <v-row align="center" justify="center" class="mt-12">
         <v-col cols="12" sm="8" md="4">
-          <v-card class="elevation-12 pb-8">
+          <v-card color="foreground" class="elevation-12 pb-8">
             <v-toolbar color="primary" dark flat>
               <v-toolbar-title>Login</v-toolbar-title>
               <v-spacer></v-spacer>
@@ -72,24 +72,25 @@ import { mapActions } from "vuex";
 export default {
   components: {
     ValidationProvider,
-    ValidationObserver
+    ValidationObserver,
   },
   data() {
     return {
       username: "",
       password: "",
-      show: false
+      show: false,
     };
   },
   methods: {
     ...mapActions({
       login: "auth/AUTH_REQUEST",
-      authCheck: "auth/AUTH_CHECK"
+      authCheck: "auth/AUTH_CHECK",
     }),
+
     onSubmit() {
       this.login({
         username: this.username,
-        password: this.password
+        password: this.password,
       });
     },
     mounted() {
@@ -99,13 +100,10 @@ export default {
       this.authCheck();
     },
     themeLogo() {
-      if (
-        !process.env.VUE_APP_THEME ||
-        process.env.VUE_APP_THEME == "Default"
-      ) {
-        return darkLogo
-      } else if (process.env.VUE_APP_THEME == "DigitalOcean") {
-        return lightLogo
+      if (this.$vuetify.theme.dark == true) {
+        return darkLogo;
+      } else if (this.$vuetify.theme.dark == false) {
+        return lightLogo;
       }
     },
   },

diff --git a/frontend/src/components/nav/Appbar.vue b/frontend/src/components/nav/Appbar.vue
@@ -12,7 +12,7 @@
           <v-icon> mdi-chevron-down </v-icon>
         </v-btn>
       </template>
-      <v-list>
+      <v-list color="foreground">
         <v-list-item :to="{ path: `/user/info` }">
           <v-list-item-icon>
             <v-icon>mdi-account-settings-outline</v-icon>