Skip to content

Commit

Permalink
#918 feat: Webpage Workshop: border & border radius properties
Browse files Browse the repository at this point in the history
  • Loading branch information
@aqordeon
aqordeon committed Oct 3, 2024
1 parent e2a6d5f commit b61edc9
Show file tree
Hide file tree
Showing 8 changed files with 74 additions and 38 deletions.
1 change: 1 addition & 0 deletions database/seeders/datasets/web-block-type-categories/text.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@
"color": "#000000",
"unit": "px",
"rounded": {
"unit": "px",
"topright" : {
"value": 0
},
Expand Down
8 changes: 6 additions & 2 deletions resources/js/Components/Fulfilment/Website/Block/TextContent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const emits = defineEmits<{
</script>

<template>
<div class="relative box-border" id="blockTextContent"
<div class="relative box-border overflow-hidden" id="blockTextContent"
:style="{
paddingTop: (properties.padding.top.value || 0) + properties.padding.unit,
paddingBottom: (properties.padding.bottom.value || 0) + properties.padding.unit,
Expand All @@ -35,6 +35,10 @@ const emits = defineEmits<{
borderBottom: `${properties.border.bottom.value}${properties.border.unit} solid ${properties.border.color}`,
borderRight: `${properties.border.right.value}${properties.border.unit} solid ${properties.border.color}`,
borderLeft: `${properties.border.left.value}${properties.border.unit} solid ${properties.border.color}`,
borderTopRightRadius: `${properties.border.rounded.topright.value}${properties.border.rounded.unit}`,
borderBottomRightRadius: `${properties.border.rounded.bottomright.value}${properties.border.rounded.unit}`,
borderBottomLeftRadius: `${properties.border.rounded.bottomleft.value}${properties.border.rounded.unit}`,
borderTopLeftRadius: `${properties.border.rounded.topleft.value}${properties.border.rounded.unit}`,
}"
>
<Editor
Expand All @@ -49,7 +53,7 @@ const emits = defineEmits<{
</template>


<style lang="scss">
<style lang="scss" scoped>
/* Basic editor styles */
#blockTextContent blockquote {
Expand Down
28 changes: 21 additions & 7 deletions resources/js/Components/Utils/ColorPicker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,17 +43,31 @@ const emits = defineEmits<{
(e: 'changeColor', value: Color): void
}>()
// Method: change 0.2 to '33' (hexadecimal)
const opacityToHexCode = (opacity: number) => {
if (opacity < 0 || opacity > 1) {
return 'ff'
}
// Convert the opacity to a value between 0 and 255
const alphaValue = Math.round(opacity * 255);
// Return the base color with the new alpha value
return alphaValue.toString(16).padStart(2, '0');
}
</script>


<template>
<Popover v-slot="{ open }" class="relative">
<PopoverButton>
<div v-bind="$attrs" class="h-12 w-12" :style="{
backgroundColor: color
}">
<slot />
</div>
<PopoverButton as="template">
<slot name="button">
<div v-bind="$attrs" class="h-12 w-12 cursor-pointer" :style="{
backgroundColor: color
}">
</div>
</slot>
</PopoverButton>

<PopoverPanel v-slot="{ close }" class="absolute left-8 top-0 z-10 mt-3">
Expand All @@ -64,7 +78,7 @@ const emits = defineEmits<{
theme="dark"
:color="color"
:sucker-hide="true"
@changeColor="(e) => emits('changeColor', e)"
@changeColor="(e) => emits('changeColor', {...e, hex: e.hex + opacityToHexCode(e.rgba.a)})"
/>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion resources/js/Components/Websites/Fields/Properties/BackgroundProperty.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ const routeList = {
<ColorPicker
:color="model.color"
class="h-8 w-8 rounded-md border border-gray-300"
@changeColor="(newColor)=> model.color = newColor.hex"
@changeColor="(newColor)=> model.color = `rgba(${newColor.rgba.r}, ${newColor.rgba.g}, ${newColor.rgba.b}, ${newColor.rgba.a}`"
closeButton
/>
<!-- <div v-else class="h-8 w-8 rounded-md border border-gray-300 shadow" :style="{background: model.color}" /> -->
Expand Down
41 changes: 27 additions & 14 deletions resources/js/Components/Websites/Fields/Properties/BorderProperty.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,16 @@ import { ref } from 'vue'
import { faBorderTop, faBorderLeft, faBorderBottom, faBorderRight, faBorderOuter } from "@fad"
import { library } from "@fortawesome/fontawesome-svg-core"
import { faLink, faUnlink } from "@fal"
import { faExclamation } from "@fas"
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import ColorPicker from '@/Components/Utils/ColorPicker.vue'
library.add(faBorderTop, faBorderLeft, faBorderBottom, faBorderRight, faBorderOuter, faLink, faUnlink)
library.add(faExclamation, faBorderTop, faBorderLeft, faBorderBottom, faBorderRight, faBorderOuter, faLink, faUnlink)
interface Borderproperty {
color: string
unit: string
rounded: {
unit: string
topright: {
value: number
}
Expand Down Expand Up @@ -47,17 +50,17 @@ const model = defineModel<Borderproperty>({
const isBorderSameValue = ref(false)
const changeBorderValueToSame = (newVal: number) => {
for (let key in model.value) {
if (model.value[key as keyof Borderproperty].hasOwnProperty('value') && model.value[key as keyof Borderproperty] != 'rounded') {
if (model.value[key as keyof Borderproperty].hasOwnProperty('value')) {
model.value[key as keyof Borderproperty].value = newVal; // Set value to 99
}
}
}
const isRoundedSameValue = ref(false)
const changeRoundedValueToSame = (newVal: number) => {
for (let key in model.value) {
if (model.value[key as keyof Borderproperty].hasOwnProperty('value') && model.value[key as keyof Borderproperty] != 'rounded') {
model.value[key as keyof Borderproperty].value = newVal; // Set value to 99
for (let key in model.value.rounded) {
if (model.value.rounded[key as keyof Borderproperty].hasOwnProperty('value')) {
model.value.rounded[key as keyof Borderproperty].value = newVal; // Set value to 99
}
}
}
Expand Down Expand Up @@ -89,10 +92,21 @@ const iconRoundedCorner = `<svg xmlns="http://www.w3.org/2000/svg" width="100%"
<div class="text-xs">{{ trans('Color') }}</div>
<ColorPicker
:color="model.color"
class="h-8 w-8 rounded-md border border-gray-300"
@changeColor="(newColor)=> model.color = newColor.hex"
@changeColor="(newColor)=> model.color = `rgba(${newColor.rgba.r}, ${newColor.rgba.g}, ${newColor.rgba.b}, ${newColor.rgba.a}`"
closeButton
/>
>
<template #button>
<div v-bind="$attrs" class="overflow-hidden h-7 w-7 rounded-md border border-gray-300 cursor-pointer flex justify-center items-center" :style="{
border: `4px solid ${model.color}`
}"
v-tooltip="!(model.top.value || model.right.value || model.bottom.value || model.left.value) ? trans('Will not show due have no border width') : undefined"
>
<Transition name="spin-to-down">
<FontAwesomeIcon v-if="!(model.top.value || model.right.value || model.bottom.value || model.left.value)" icon='fas fa-exclamation' class='text-gray-400 text-xs' fixed-width aria-hidden='true' />
</Transition>
</div>
</template>
</ColorPicker>
</div>

<!-- Toggle: Border same value -->
Expand Down Expand Up @@ -152,6 +166,7 @@ const iconRoundedCorner = `<svg xmlns="http://www.w3.org/2000/svg" width="100%"
</Transition>
</div>


<!-- Toggle: Rounded same value -->
<div class="px-3 flex justify-between items-center mb-2">
<div class="text-xs">{{ trans('Rounded same value') }}</div>
Expand All @@ -171,12 +186,10 @@ const iconRoundedCorner = `<svg xmlns="http://www.w3.org/2000/svg" width="100%"
<!-- Rounded -->
<div class="pl-2 pr-4 flex items-center relative">
<Transition name="slide-to-up">
<div v-if="isRoundedSameValue">
<div class="grid grid-cols-5 items-center">
<FontAwesomeIcon icon='fad fa-border-outer' v-tooltip="trans('Padding all')" class='' fixed-width aria-hidden='true' />
<div class="col-span-4">
<PureInputNumber v-model="model.rounded.topright.value" @update:modelValue="(newVal) => isRoundedSameValue ? changeRoundedValueToSame(newVal) : false" class="" suffix="px" />
</div>
<div v-if="isRoundedSameValue" class="grid grid-cols-5 items-center">
<FontAwesomeIcon icon='fad fa-border-outer' v-tooltip="trans('Padding all')" class='' fixed-width aria-hidden='true' />
<div class="col-span-4">
<PureInputNumber v-model="model.rounded.topright.value" @update:modelValue="(newVal) => isRoundedSameValue ? changeRoundedValueToSame(newVal) : false" class="" suffix="px" />
</div>
</div>

Expand Down
4 changes: 2 additions & 2 deletions resources/js/Layouts/Iris/Header.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ const props = defineProps<{
<template>
<div>
<component
:is="getRenderComponent(data.data.key)"
:is="getRenderComponent(data?.data?.key)"
:loginMode="false"
:loginRoute="data.data.loginRoute"
:loginRoute="data?.data?.loginRoute"
:data="data.data"
:colorThemed="colorThemed"
:menu="menu"
Expand Down
12 changes: 8 additions & 4 deletions resources/js/Pages/Grp/Org/Web/WebpageWorkshop.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ const setIframeView = (view: String) => {
} else if (view === 'tablet') {
iframeClass.value = 'w-[768px] h-[1024px] mx-auto'; // iPad size
} else {
iframeClass.value = 'w-full h-full'; // Full width for desktop
iframeClass.value = 'w-full h-full mx-auto'; // Full width for desktop
}
}

Expand Down Expand Up @@ -265,9 +265,13 @@ const openFullScreenPreview = () => {
</div>

<div class="h-full w-full bg-white">
<iframe :src="iframeSrc" :title="props.title"
:class="[iframeClass, isIframeLoading ? 'hidden' : '']" @error="handleIframeError"
@load="isIframeLoading = false" />
<iframe
:src="iframeSrc"
:title="props.title"
:class="[iframeClass, isIframeLoading ? 'hidden' : '']"
@error="handleIframeError"
@load="isIframeLoading = false"
/>
</div>
</div>
</div>
Expand Down
16 changes: 8 additions & 8 deletions resources/js/Pages/Grp/Web/PreviewWorkshop.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,14 +85,14 @@ console.log('preview',props)

<template>
<div class="container max-w-7xl mx-auto shadow-xl">
<component
:is="getComponentsHeader(layout?.header?.header?.key)"
:loginMode="true"
:previewMode="true"
v-model="layout.header.header"
:uploadImageRoute="layout.header.uploadImageRoute"
:colorThemed="layout.colorThemed"
/>
<component
:is="getComponentsHeader(layout?.header?.header?.key)"
:loginMode="true"
:previewMode="true"
v-model="layout.header.header"
:uploadImageRoute="layout.header.uploadImageRoute"
:colorThemed="layout.colorThemed"
/>
<div v-if="data" class="relative">
<div class="container max-w-7xl mx-auto">
<div class="h-full overflow-auto w-full ">
Expand Down

0 comments on commit b61edc9

Please sign in to comment.