Skip to content

Commit

Permalink
Push no-code avatars
Browse files Browse the repository at this point in the history
  • Loading branch information
@jimmybisenius
jimmybisenius committed Feb 25, 2021
1 parent 30babca commit 7097a1a
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 126 deletions.
64 changes: 54 additions & 10 deletions client/components/no-code/builder.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="flex flex-col justify-start items-center">
<div class="flex flex-col justify-start items-start">
<div class="flex flex-col flex-grow bg-gray-50 rounded-lg w-full">
<div class="flex flex-col justify-center w-full p-6 border border-t-0 border-l-0 border-r-0 border-gray-200 items-center">
<div class="w-full flex flex-col lg:flex-row justify-start lg:justify-between items-start space-y-2 lg:space-y-0 lg:items-center">
Expand Down Expand Up @@ -50,7 +50,7 @@
</select>
</div>
</div>
<span class="text-gray-800 font-semibold py-3 my-3 border border-r-0 border-l-0 border-gray-200 w-full text-left justify-start flex flex-row">Background</span>
<!--<span class="text-gray-800 font-semibold py-3 my-3 border border-r-0 border-l-0 border-gray-200 w-full text-left justify-start flex flex-row">Background</span>
<div class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-4 w-full">
<div class="flex flex-col mb-4 justify-start w-full">
<label class="font-semibold text-gray-700 mb-2">Background type</label>
Expand Down Expand Up @@ -88,7 +88,7 @@
<option value="to left">To left</option>
</select>
</div>
</div>
</div>-->
</div>
<!-- End Drawer -->
</div>
Expand All @@ -98,7 +98,7 @@
<span class="text-gray-800 font-semibold">Typography</span>
<span class="text-sm text-gray-500 font-medium">Customize your fonts, font size, font weight, and more.</span>
</div>
<div class="py-2 px-4 text-sm rounded-lg bg-indigo-600 font-medium text-center hover:bg-indigo-500 text-white cursor-pointer">Expand</div>
<div @click="drawer.typography = !drawer.typography" class="py-2 px-4 text-sm rounded-lg border border-indigo-600 text-indigo-500 bg-indigo-200 font-medium text-center hover:bg-indigo-300 cursor-pointer"><span v-if="!drawer.typography">Expand</span><span v-if="drawer.typography">Collapse</span></div>
</div>
</div>
<div class="flex flex-col lg:flex-row justify-center w-full p-6 border-t-0 border-l-0 border-r-0 border-gray-200 items-center">
Expand All @@ -107,7 +107,7 @@
<span class="text-gray-800 font-semibold">Link styles</span>
<span class="text-sm text-gray-500 font-medium">Customize your default styles for link items.</span>
</div>
<div class="py-2 px-4 text-sm rounded-lg bg-indigo-600 font-medium text-center hover:bg-indigo-500 text-white cursor-pointer">Expand</div>
<div @click="drawer.link_styles = !drawer.link_styles" class="py-2 px-4 text-sm rounded-lg border border-indigo-600 text-indigo-500 bg-indigo-200 font-medium text-center hover:bg-indigo-300 cursor-pointer"><span v-if="!drawer.link_styles">Expand</span><span v-if="drawer.link_styles">Collapse</span></div>
</div>
</div>
</div>
Expand All @@ -116,14 +116,15 @@
<script>
export default {
props: {
css: String,
value: String,
scope: {
type: String,
default: 'Profile'
},
},
data() {
return {
imported_css: this.value,
JSON_pkg: {
children: {
"img.nc-avatar": {
Expand Down Expand Up @@ -156,7 +157,7 @@ export default {
}
},
computed: {
exported_css() {
/*exported_css() {
if(this.meta.page_styles.avatar_size) {
this.JSON_pkg.children["img.nc-avatar"].attributes.width = this.meta.page_styles.avatar_size + 'px';
this.JSON_pkg.children["img.nc-avatar"].attributes.height = this.meta.page_styles.avatar_size + 'px';
Expand All @@ -167,12 +168,55 @@ export default {
this.JSON_pkg.children["img.nc-avatar"].attributes['border'] = this.meta.page_styles.avatar_border_type + ' ' + this.meta.page_styles.avatar_border_width + ' ' + this.meta.page_styles.avatar_border_color;
}
return this.$transform.toCSS(this.JSON_pkg);
}
}*/
},
mounted() {
setInterval(()=>{
/*setInterval(()=>{
console.log(this.exported_css);
}, 3500);
}, 3500);*/
console.log('Input');
console.log(this.imported_css);
console.log('to JSON');
console.log(this.$transform.toJSON(this.imported_css));
if(this.imported_css) {
this.JSON_pkg = this.$transform.toJSON(this.imported_css);
// Avatar height
if(this.JSON_pkg.children["img.nc-avatar"].attributes.width) this.meta.page_styles.avatar_size = this.JSON_pkg.children["img.nc-avatar"].attributes.width.split('px')[0];
// Avatar border radius
if(this.JSON_pkg.children["img.nc-avatar"].attributes['border-radius']) this.meta.page_styles.avatar_radius = this.JSON_pkg.children["img.nc-avatar"].attributes['border-radius'].split('px')[0];
// Avatar border
if(this.JSON_pkg.children["img.nc-avatar"].attributes.border) {
let border = this.JSON_pkg.children["img.nc-avatar"].attributes.border.split(' ');
// Avatar border style
this.meta.page_styles.avatar_border_type = border[0];
// Avatar border width
this.meta.page_styles.avatar_border_width = border[1].split('px')[0];
// Avatar border color
this.meta.page_styles.avatar_border_color = border[2];
}
// Avatar box-shadow
if(this.JSON_pkg.children["img.nc-avatar"].attributes['box-shadow']) this.meta.page_styles.avatar_shadow = this.JSON_pkg.children["img.nc-avatar"].attributes['box-shadow'];
}
},
watch: {
meta: {
handler() {
console.log('Changes');
console.log
if(this.meta.page_styles.avatar_size) {
this.JSON_pkg.children["img.nc-avatar"].attributes.width = this.meta.page_styles.avatar_size + 'px';
this.JSON_pkg.children["img.nc-avatar"].attributes.height = this.meta.page_styles.avatar_size + 'px';
}
if(this.meta.page_styles.avatar_radius) this.JSON_pkg.children["img.nc-avatar"].attributes['border-radius'] = this.meta.page_styles.avatar_radius + 'px';
if(this.meta.page_styles.avatar_shadow) this.JSON_pkg.children["img.nc-avatar"].attributes['box-shadow'] = this.meta.page_styles.avatar_shadow;
if(this.meta.page_styles.avatar_border_type != 'none' && this.meta.page_styles.avatar_border_color && this.meta.page_styles.avatar_border_width) {
this.JSON_pkg.children["img.nc-avatar"].attributes['border'] = this.meta.page_styles.avatar_border_type + ' ' + this.meta.page_styles.avatar_border_width + 'px ' + this.meta.page_styles.avatar_border_color;
}
return this.$emit('input', this.$transform.toCSS(this.JSON_pkg));
},
deep: true
}
}
}
Expand Down
138 changes: 22 additions & 116 deletions client/pages/dashboard/appearance/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,14 @@
</h2>
<a href="https://www.notion.so/neutroncreative/Customizing-your-Singlelink-profile-ab34c4a8e3174d66835fa460774e7432" class="text-gray-500 text-xs hover:underline hover:text-gray-600">Need help? Read our documentation</a>
</div>
<builder/>
<builder v-if="builderCssLoaded" v-model="builderCss"/>
<button
type="button"
class="inline-flex mt-4 p-3 text-sm text-white text-center bg-indigo-600 hover:bg-indigo-700 rounded-lg font-semibold w-auto max-w-xs justify-center align-center"
@click="saveChanges"
>
Save changes
</button>
</div>

<div class="flex lg:hidden flex-col p-4 bg-orange-200 border border-orange-600 rounded-lg w-full mb-8">
Expand Down Expand Up @@ -103,7 +110,7 @@
autoClosingQuotes: true,
readOnly: (modalIntent === 'view'),
}"
v-model="customCss"
v-model="editorCss"
></MonacoEditor>
<button
type="button"
Expand Down Expand Up @@ -390,6 +397,8 @@ export default Vue.extend({
themes: new Array<Theme>(),
globalThemes: new Array<Theme>(),
activeThemeId: '',
editorCss: '',
builderCss: '',
customCss: '',
customHtml: '',
modalActive: false,
Expand Down Expand Up @@ -437,7 +446,8 @@ export default Vue.extend({
},
}
},
isAdmin: false
isAdmin: false,
builderCssLoaded: false
};
},
Expand Down Expand Up @@ -484,118 +494,6 @@ export default Vue.extend({
}
},
async saveCreateTheme(close: boolean) {
try {
const response = await this.$axios.$post<Theme>('/theme/create', {
token: this.$store.getters['auth/getToken'],
label: this.pendingTheme.label,
colors: {
fill: {
primary: this.pendingTheme.colors.fill.primary ?? 'rgba(255,255,255,1)',
secondary: this.pendingTheme.colors.fill.secondary ?? 'rgba(255,255,255,.85)'
},
text: {
primary: this.pendingTheme.colors.text.primary ?? 'rgba(0,0,0,1)',
secondary: this.pendingTheme.colors.text.secondary ?? 'rgba(0,0,0,.85)'
}
},
customCss: this.pendingTheme.customCss,
customHtml: this.pendingTheme.customHtml,
});
this.themes.push(response);
if (this.pendingTheme.global) {
const token = this.$store.getters['auth/getToken'];
await this.$axios.$post('theme/admin/set-global', {
token,
id: response.id,
global: this.pendingTheme.global
});
}
if (close) {
this.closeModal();
return;
}
this.setPending(null);
this.$root.$emit('refreshUserProfileView');
} catch (error) {
this.error = 'Failed to create theme';
console.log('Failed to create theme');
}
},
async saveEditTheme() {
try {
const response = await this.$axios.$post<Theme>('/theme/update', {
token: this.$store.getters['auth/getToken'],
id: this.pendingTheme.id,
label: this.pendingTheme.label,
colors: {
fill: {
primary: this.pendingTheme.colors.fill.primary ?? 'rgba(255,255,255,1)',
secondary: this.pendingTheme.colors.fill.secondary ?? 'rgba(255,255,255,.85)'
},
text: {
primary: this.pendingTheme.colors.text.primary ?? 'rgba(0,0,0,1)',
secondary: this.pendingTheme.colors.text.secondary ?? 'rgba(0,0,0,.85)'
}
},
customCss: this.pendingTheme.customCss,
customHtml: this.pendingTheme.customHtml,
});
const themeId = response.id;
const index = this.themes.findIndex(x => x.id === themeId);
this.themes[index] = this.pendingTheme;
if (this.pendingTheme.global) {
const token = this.$store.getters['auth/getToken'];
await this.$axios.$post('theme/admin/set-global', {
token,
id: response.id,
global: this.pendingTheme.global
});
}
this.closeModal();
this.$root.$emit('refreshUserProfileView');
return;
} catch (error) {
this.error = 'Failed to create theme';
console.log('Failed to create theme');
}
},
async deleteTheme() {
try {
const response = await this.$axios.$post<Theme>('/theme/delete', {
token: this.$store.getters['auth/getToken'],
id: this.pendingTheme.id,
});
const themeId = response.id;
const index = this.themes.findIndex(x => x.id === themeId);
this.themes.splice(index, 1);
this.closeModal();
this.setPending(null);
this.$root.$emit('refreshUserProfileView');
return;
} catch (error) {
this.error = 'Failed to create theme';
console.log('Failed to create theme');
}
},
setPending(theme: Theme | null) {
if (!theme) {
this.pendingTheme = this.getNewTheme();
Expand Down Expand Up @@ -624,6 +522,11 @@ export default Vue.extend({
this.activeThemeId = profileResponse.themeId ?? null;
this.customCss = profileResponse.customCss ?? '';
this.editorCss = this.customCss.split('/* SL-NO-CODE */')[0];
if(this.customCss.split('/* SL-NO-CODE */').length > 1) {
this.builderCss = this.customCss.split('/* SL-NO-CODE */')[1];
}
this.builderCssLoaded = true;
this.customHtml = profileResponse.customHtml ?? '';
} catch (err) {
console.log('Error getting user data');
Expand All @@ -633,9 +536,12 @@ export default Vue.extend({
async saveChanges() {
try {
console.log('Builder CSS');
console.log(this.builderCss);
await this.$axios.$post('/profile/update', {
token: this.$store.getters['auth/getToken'],
customCss: this.customCss,
customCss: this.editorCss + '/* SL-NO-CODE */' + this.builderCss,
customHtml: this.customHtml
});
Expand Down

0 comments on commit 7097a1a

Please sign in to comment.