Skip to content

Commit

Permalink
Added theme previews
Browse files Browse the repository at this point in the history
  • Loading branch information
jimmybisenius committed Feb 24, 2021
1 parent d91b5ce commit eebd714
Show file tree
Hide file tree
Showing 7 changed files with 158 additions and 78 deletions.
26 changes: 22 additions & 4 deletions client/components/profile/UserProfileView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -118,11 +118,11 @@ export default Vue.extend({
type: Boolean,
default: false
},
themePreview: {
preview: {
type: Boolean,
default: false
},
themeData: {
profileData: {
type: Object,
default: null
}
Expand Down Expand Up @@ -161,10 +161,28 @@ export default Vue.extend({
if (this.authenticated) {
await this.getAuthenticatedProfile();
} else {
if(!this.themePreview) {
if(!this.preview) {
await this.getProfile();
} else {
await this.getTheme();
// do nothing
this.profile = this.profileData;
this.theme = this.profileData;
this.profile.headline = 'Jane Doe';
this.profile.subtitle = 'A few details about yourself.'
this.user = {
emailHash: 'something'
};
this.links = [
{
id: 0,
label: 'Example link',
subtitle: null,
url: '#',
customCss: null
}
];
this.showWatermark=false;
this.loaded = true;
}
}
},
Expand Down
38 changes: 19 additions & 19 deletions client/components/theme/theme-list.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,34 @@
<h2 class="font-bold text-xl py-2 border border-t-0 border-r-0 border-l-0 border-gray-200 w-full mb-2">{{ name }}</h2>
<div v-if="!addon" class="flex flex-row flex-wrap mb-2 justify-start w-full">
<!-- Show active theme first -->
<a v-for="theme in themes" v-if="!icon && active == theme.id" :href="'/dashboard/marketplace/addon/'+theme.id+query_string" class="flex flex-col p-3 flex-1 hover:bg-indigo-200 bg-indigo-200 border border-indigo-600 rounded-lg" style="min-width:215px;max-width:235px;">
<theme :id="theme.id" :label="theme.label" :colors="theme.colors"/>
<a v-for="theme in themes" v-if="!icon && active == theme.id" :href="'/dashboard/marketplace/addon/'+theme.id+query_string" class="flex flex-col p-3 flex-1 hover:bg-indigo-200 bg-indigo-200 border border-indigo-600 rounded-lg" style="width:225px;max-width:225px;min-width:225px;">
<theme :id="theme.id" :label="theme.label" :colors="theme.colors" :theme="true"/>
</a>
<div v-for="theme in themes" v-if="icon && active == theme.id" @click="select_theme(theme.id)" class="flex flex-col p-3 flex-1 hover:bg-indigo-200 bg-indigo-200 border border-indigo-600 rounded-lg" style="min-width:215px;max-width:235px;">
<theme :id="theme.id" :icon="icon" :label="theme.label" :colors="theme.colors"/>
<div v-for="theme in themes" v-if="icon && active == theme.id" @click="select_theme(theme.id)" class="flex flex-col p-3 flex-1 hover:bg-indigo-200 bg-indigo-200 border border-indigo-600 rounded-lg" style="width:225px;max-width:225px;min-width:225px;">
<theme :id="theme.id" :icon="icon" :label="theme.label" :colors="theme.colors" :theme="true"/>
</div>
<!-- List active themes -->
<a v-for="theme in themes" v-if="!icon && active != theme.id" :href="'/dashboard/marketplace/addon/'+theme.id+query_string" class="flex flex-col p-3 flex-1 hover:bg-gray-200 rounded-lg" style="min-width:215px;max-width:235px;">
<theme :id="theme.id" :label="theme.label" :colors="theme.colors"/>
<a v-for="theme in themes" v-if="!icon && active != theme.id" :href="'/dashboard/marketplace/addon/'+theme.id+query_string" class="flex flex-col p-3 flex-1 hover:bg-gray-200 rounded-lg" style="width:225px;max-width:225px;min-width:225px;">
<theme :id="theme.id" :label="theme.label" :colors="theme.colors" :theme="true"/>
</a>
<div v-for="theme in themes" v-if="icon && active != theme.id" @click="select_theme(theme.id)" class="cursor-pointer flex flex-col p-3 flex-1 hover:bg-gray-200 rounded-lg" style="min-width:215px;max-width:235px;">
<theme :id="theme.id" :icon="icon" :label="theme.label" :colors="theme.colors"/>
<div v-for="theme in themes" v-if="icon && active != theme.id" @click="select_theme(theme.id)" class="cursor-pointer flex flex-col p-3 flex-1 hover:bg-gray-200 rounded-lg" style="width:225px;max-width:225px;min-width:225px;">
<theme :id="theme.id" :icon="icon" :label="theme.label" :colors="theme.colors" :theme="true"/>
</div>
</div>
<div v-if="addon" class="flex flex-row flex-wrap mb-2 justify-start w-full">
<!-- Show active theme first -->
<a v-for="theme in themes" v-if="!icon && active == theme.id" :href="'/dashboard/marketplace/addon/'+theme.id+query_string" class="flex flex-col p-3 flex-1 hover:bg-indigo-200 bg-indigo-200 border border-indigo-600 rounded-lg" style="min-width:215px;max-width:235px;">
<theme :colors="theme.resource.colors" :id="theme.id" :label="theme.displayName" />
<a v-for="theme in themes" v-if="!icon && active == theme.id" :href="'/dashboard/marketplace/addon/'+theme.id+query_string" class="flex flex-col p-3 flex-1 hover:bg-indigo-200 bg-indigo-200 border border-indigo-600 rounded-lg" style="width:225px;max-width:225px;min-width:225px;">
<theme :colors="theme.resource.colors" :id="theme.id" :label="theme.displayName" :profileData="theme.resource"/>
</a>
<div v-for="theme in themes" v-if="icon && active == theme.id" @click="select_theme(theme.id)" class="flex flex-col p-3 flex-1 hover:bg-indigo-200 bg-indigo-200 border border-indigo-600 rounded-lg" style="min-width:215px;max-width:235px;">
<theme :colors="theme.resource.colors" :id="theme.id" :icon="icon" :label="theme.displayName" />
<div v-for="theme in themes" v-if="icon && active == theme.id" @click="select_theme(theme.id)" class="flex flex-col p-3 flex-1 hover:bg-indigo-200 bg-indigo-200 border border-indigo-600 rounded-lg" style="width:225px;max-width:225px;min-width:225px;">
<theme :colors="theme.resource.colors" :id="theme.id" :icon="icon" :label="theme.displayName" profileData="theme.resource"/>
</div>
<!-- List active themes -->
<a v-for="theme in themes" v-if="!icon && active != theme.id" :href="'/dashboard/marketplace/addon/'+theme.id+query_string" class="flex flex-col p-3 flex-1 hover:bg-gray-200 rounded-lg" style="min-width:215px;max-width:235px;">
<theme :colors="theme.resource.colors" :id="theme.id" :label="theme.displayName" />
<a v-for="theme in themes" v-if="!icon && active != theme.id" :href="'/dashboard/marketplace/addon/'+theme.id+query_string" class="flex flex-col p-3 flex-1 hover:bg-gray-200 rounded-lg" style="width:225px;max-width:225px;min-width:225px;">
<theme :colors="theme.resource.colors" :id="theme.id" :label="theme.displayName" :profileData="theme.resource"/>
</a>
<div v-for="theme in themes" v-if="icon && active != theme.id" @click="select_theme(theme.id)" class="cursor-pointer flex flex-col p-3 flex-1 hover:bg-gray-200 rounded-lg" style="min-width:215px;max-width:235px;">
<theme :colors="theme.resource.colors" :id="theme.id" :icon="icon" :label="theme.displayName" />
<div v-for="theme in themes" v-if="icon && active != theme.id" @click="select_theme(theme.id)" class="cursor-pointer flex flex-col p-3 flex-1 hover:bg-gray-200 rounded-lg" style="width:225px;max-width:225px;min-width:225px;">
<theme :colors="theme.resource.colors" :id="theme.id" :icon="icon" :label="theme.displayName" :profileData="theme.resource"/>
</div>
</div>
</div>
Expand Down Expand Up @@ -69,9 +69,9 @@ export default {
id,
});
this.activeThemeId = response.themeId;
location.reload();
//this.$root.$emit('refreshUserProfileView');
this.active = response.themeId;
//window.location.reload();
this.$root.$emit('refreshUserProfileView');
} catch (error) {
console.log('Failed to activate theme');
console.log(error);
Expand Down
38 changes: 33 additions & 5 deletions client/components/theme/theme.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
<template>
<div :class="'w-full flex flex-col' + active_styles">
<div v-if="preview" class="shadow w-full h-32 rounded-xl mb-2 relative overflow-hidden flex items-center justify-center" :style="'background:' + colors.fill.primary + ';'">
<div class="relative rounded" style="width: 201px;height:217px;overflow:hidden;">
<iframe scrolling="no" v-if="!theme" style="pointer-events: none;width: 375px;height: 406px;transform: scale(.536) translate(-163px, -175px);top:0;left:0;position:absolute;" :src="'/dashboard/marketplace/preview/' + id"/>
<iframe scrolling="no" v-if="theme" style="pointer-events: none;width: 375px;height: 406px;transform: scale(.536) translate(-163px, -175px);top:0;left:0;position:absolute;" :src="'/dashboard/appearance/preview/' + id"/>
</div>
<!--<div class="shadow w-full h-32 rounded-xl mb-2 relative overflow-hidden flex items-center justify-center" :style="'background:' + colors.fill.primary + ';'">
<a
:href="'/dashboard/marketplace/addon/' + id"
style="position:absolute;top:10px;right:10px;z-index:5;width:10px;height:10px;"
Expand All @@ -22,32 +26,56 @@
<div class="shadow-lg overflow-hidden flex flex-col items-center justify-center" :style="'width:60px;height:60px;position;relative;z-index:3;border-radius:40px;background:'+colors.text.primary">
<div class="mt-auto w-full" :style="'height:30px;background:' + colors.text.secondary + ';'"></div>
</div>
</div>
<div class="font-bold text-black mb-1">{{ label }}</div>
</div>-->
<div class="font-bold text-black mb-1 mt-2">{{ label }}</div>
<!--<span class="text-sm text-gray-500">Author: {{ userId }}</span>-->
</div>
</template>

<script>
import UserProfileView from '../profile/UserProfileView.vue';
export default {
components: { UserProfileView },
name: 'Theme',
props: {
id: String,
colors: Object,
label: String,
icon: String,
active: Boolean,
preview: {
theme: {
type: Boolean,
default: true
default: false
},
profileData: {
type: Object,
default: null
}
},
mounted() {
if(this.profileData) {
this.pri
};
},
computed: {
active_styles() {
console.log('Active ' + this.id);
console.log(this.active);
if(!this.active) return '';
return ' bg-indigo-200 border-indigo-600 border hover:bg-indigo-300';
},
profile() {
return {
customHtml: this.profileData.customCss,
customCss: this.profileData.customCss,
imageUrl: null,
headline: 'Lorem ipsum',
subtitle: 'Example subtitle',
showWatermark: true,
metadata: {
privacyMode: false
}
};
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,45 +42,6 @@

</div>

<!-- Global Themes-->
<div class="flex flex-col p-6 bg-white shadow rounded-lg w-full mb-8">
<theme-list :active="activeThemeId" name="Global themes" :themes="globalThemes" :extended="false" icon="view"/>
<!--<h2 class="text-gray-800 font-semibold text-lg w-full mb-2">
Global Themes
</h2>-->

<!--<div class="flex flex-row overflow-x-scroll hide-scrollbar">
<div
class="rounded-lg nc-theme bg-gray-200"
style="min-width:78px;min-height:80px;"
:class="{'active': !activeThemeId}"
@click="selectTheme(null)"
>
<div class="nc-inner bg-white">
<div class="nc-bottom-inner bg-gray-600"/>
</div>
</div>
<div
v-for="theme in globalThemes"
v-if="globalThemes"
:key="theme.id"
class="rounded-lg nc-theme"
:style="`background:${theme.colors.fill.primary}; position: relative;min-width:78px;height:80px;`"
:class="{'active': activeThemeId === theme.id}"
@click="selectTheme(theme.id)"
>
<i
class="fas fa-eye edit-icon"
@click.stop="openModal('view'); pendingTheme=theme;"
/>
<div class="nc-inner" :style="`background:${theme.colors.fill.secondary};`">
<div class="nc-bottom-inner" :style="`background:${theme.colors.text.primary};`"/>
</div>
</div>
</div>-->

</div>
<!--
<div class="flex flex-col p-6 bg-white shadow rounded-lg w-full mb-8">
<div class="flex flex-col lg:flex-row space-y-1 lg:space-y-0 items-start lg:justify-between lg:items-center w-full mb-2">
Expand Down Expand Up @@ -443,7 +404,7 @@

<script lang="ts">
import Vue from "vue";
import themeList from "../../components/theme/theme-list.vue";
import themeList from "~/components/theme/theme-list.vue";
type ThemeModalIntent = "create" | "edit" | "view";
Expand Down Expand Up @@ -547,10 +508,6 @@ export default Vue.extend({
includeGlobal: false
}));
this.globalThemes = (await this.$axios.$post<Theme[]>('/themes', {
token: this.$store.getters['auth/getToken'],
onlyGlobal: true
}));
} catch (error) {
console.log('Failed to get themes');
console.log(error);
Expand Down
47 changes: 47 additions & 0 deletions client/pages/dashboard/appearance/preview/_.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<template>
<div class="relative flex min-h-screen w-screen bg-gray-100 justify-center w-full sl-bg">
<UserProfileView
v-if="theme"
:preview="true"
:profileData="theme"
/>
</div>
</template>
<script>
export default {
middleware: 'authenticated',
data() {
return {
id: null,
theme: null,
themes: []
}
},
async mounted() {
this.id = this.$route.path.replace('/dashboard/appearance/preview/', '');
this.loadThemes();
},
methods: {
async loadThemes() {
try {
// Grab themes from response
this.themes = await this.$axios.$post('/themes', {
token: this.$store.getters['auth/getToken'],
includeGlobal: false
});
for(let i=0;i<this.themes.length;i++) {
if(this.themes[i].id == this.id) {
this.theme = this.themes[i];
}
}
console.log(this.themes);
} catch (error) {
console.log('Failed to get themes');
console.log(error);
}
},
}
}
</script>
10 changes: 4 additions & 6 deletions client/pages/dashboard/marketplace/addon/_.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,9 @@
<h1 class="text-gray-800 font-extrabold tracking-tight text-3xl">Submission details</h1>
</div>
<div class="flex flex-col lg:flex-row w-full items-start mb-4">
<div class="shadow flex-grow rounded-xl mb-2 relative overflow-hidden flex items-center justify-center" :style="'background:' + colors.fill.primary + ';height:450px;'">
<div :style="'top:50%;height:50%;left:0;right:0;z-index:2;width:100%;position:absolute;background:' + colors.fill.secondary + ';'"></div>
<div class="shadow-lg overflow-hidden flex flex-col items-center justify-center" :style="'width:85px;height:85px;position;relative;z-index:3;border-radius:50px;background:'+ colors.text.primary">
<div class="mt-auto w-full" :style="'height:42.5px;background:' + colors.text.secondary + ';'"></div>
</div>
<div class="relative text-center rounded flex items-center justify-ceneter p-6 bg-indigo-200" style="width: 201px;height:298px;overflow:hidden;">
<span class="text-sm text-indigo-500 font-medium">Save addon for preview</span>
<iframe v-if="addon.id" style="z-index:2;pointer-events: none;width: 376px;height: 557px;transform: scale(.536) translate(-164px, -241px);top:0;left:0;position:absolute;" :src="'/dashboard/marketplace/preview/' + addon.id"/>
</div>
<div class="flex flex-col lg:w-2/3 px-8">
<div class="flex flex-col mb-4 justify-start">
Expand Down Expand Up @@ -48,7 +46,7 @@
<div v-if="intent=='view' && installed.indexOf(Number(addon.id)) >= 0" @click="uninstallAddon" class="px-6 py-3 font-semibold text-white rounded-lg hover:bg-indigo-500 bg-indigo-600 lg:mr-4 mb-4 lg:mb-0 cursor-pointer">Uninstall addon</div>
<div v-if="intent=='view' && favorites.indexOf(Number(addon.id)) < 0" @click="toggleFavoriteAddon" class="px-6 py-3 font-semibold text-gray-700 border border-gray-700 rounded-lg hover:bg-gray-50 lg:mr-4 mb-4 lg:mb-0 cursor-pointer">Add to favorites</div>
<div v-if="intent=='view' && favorites.indexOf(Number(addon.id)) >= 0" @click="toggleFavoriteAddon" class="px-6 py-3 font-semibold text-gray-700 border border-gray-700 rounded-lg hover:bg-gray-50 lg:mr-4 mb-4 lg:mb-0 cursor-pointer">Remove from favorites</div>
<div v-if="intent=='submit'" @click="attemptSubmit" class="px-6 py-3 font-semibold text-white rounded-lg hover:bg-indigo-500 bg-indigo-600 lg:mr-4 mb-4 lg:mb-0 cursor-pointer">Publish addon</div>
<div v-if="intent=='submit'" @click="attemptSubmit" class="px-6 py-3 font-semibold text-white rounded-lg hover:bg-indigo-500 bg-indigo-600 lg:mr-4 mb-4 lg:mb-0 cursor-pointer">Create addon</div>
<div v-if="intent=='edit'" @click="updateAddon" class="px-6 py-3 font-semibold text-white rounded-lg hover:bg-indigo-500 bg-indigo-600 lg:mr-4 mb-4 lg:mb-0 cursor-pointer">Save changes</div>
<div v-if="intent=='edit'" @click="deleteAddon" class="px-6 py-3 font-semibold text-white rounded-lg hover:bg-red-500 bg-red-600 cursor-pointer">Delete addon</div>
</div>
Expand Down
32 changes: 32 additions & 0 deletions client/pages/dashboard/marketplace/preview/_.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<template>
<div class="relative flex min-h-screen w-screen bg-gray-100 justify-center w-full sl-bg">
<UserProfileView
v-if="addon.resource"
:preview="true"
:profileData="addon.resource"
/>
</div>
</template>
<script>
export default {
middleware: 'authenticated',
data() {
return {
id: null,
addon: {
resource: null
}
}
},
async mounted() {
this.id = this.$route.path.replace('/dashboard/marketplace/preview/', '');
this.addon = await this.$axios.$post('/marketplace/addon/' + this.id, {
token: this.$store.getters['auth/getToken'],
detailed: true
});
},
methods: {
}
}
</script>

0 comments on commit eebd714

Please sign in to comment.