Skip to content

Commit 9a94e9f

Browse files
rogdenrogden
committed
Update section styles/layout. Add copy functionality
1 parent 605d9f5 commit 9a94e9f

File tree

14 files changed

+298
-125
lines changed

14 files changed

+298
-125
lines changed

‎src/components/Canvas/CanvasBlockLabel.vue‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<template>
2+
<div class="relative">
3+
<div
4+
:class="{show: showCopyTooltip}"
5+
class="tooltip pointer-events-none absolute py-1 px-2 text-sm bg-gray-800 text-white rounded">{{ copyText }}</div>
6+
<input
7+
class="
8+
text-sm text-gray-700
9+
font-semibold hover:text-teal-600
10+
bg-transparent
11+
inline-block rounded
12+
cursor-pointer focus:outline-none
13+
"
14+
readonly
15+
ref="label"
16+
:value="label"
17+
@click="copy"
18+
@mouseover="showCopy"
19+
@mouseout="hideCopy"
20+
>
21+
<div class="text-sm text-gray-600 break-words">
22+
{{ value }}
23+
</div>
24+
</div>
25+
</template>
26+
27+
<script>
28+
export default {
29+
props: {
30+
label: {
31+
type: String,
32+
required: true
33+
},
34+
value: {
35+
type: String,
36+
required: true
37+
}
38+
},
39+
40+
data () {
41+
return {
42+
showCopyTooltip: false,
43+
copyText: 'Copy'
44+
}
45+
},
46+
47+
methods: {
48+
copy () {
49+
this.$refs.label.select()
50+
this.copyText = 'Copied'
51+
document.execCommand('copy')
52+
this.$refs.label.blur()
53+
window.getSelection().removeAllRanges()
54+
},
55+
56+
showCopy () {
57+
this.copyText = 'Copy'
58+
this.showCopyTooltip = true
59+
},
60+
61+
hideCopy () {
62+
this.showCopyTooltip = false
63+
}
64+
}
65+
}
66+
</script>
67+
68+
<style scoped>
69+
.tooltip {
70+
bottom: 100%;
71+
opacity: 0;
72+
transform: translateY(10px);
73+
visibility: hidden;
74+
transition: .15s ease-out;
75+
}
76+
77+
.tooltip.show {
78+
opacity: 1;
79+
transform: translateY(0);
80+
visibility: visible;
81+
}
82+
</style>

‎src/components/Canvas/CanvasSection.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<template>
22
<section class="mb-16 max-w-full">
3-
<h1 class="mb-2 text-4xl text-gray-800">{{ title }}</h1>
4-
<div class="bg-white p-6 rounded shadow-xl">
3+
<h1 class="mb-1 text-4xl text-gray-800">{{ title }}</h1>
4+
<p class="mb-4 text-gray-600">This is the description of the section. You can use it to do cool things.</p>
5+
<div class="bg-white p-6 rounded border-gray-300 border">
56
<slot />
67
</div>
78
</section>

‎src/components/Canvas/Sections/BorderRadius.vue‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,27 @@
11
<template>
22
<div class="flex">
3-
<div
4-
v-for="(value, prop) in data"
5-
class="mr-4 bg-gray-400"
6-
:key="prop"
7-
:style="{
8-
width: '100px',
9-
height: '100px',
10-
borderRadius: value
11-
}">
12-
{{ prop }}
3+
<div v-for="(value, prop) in data" :key="prop" class="mr-4">
4+
<div
5+
class="bg-gray-400 mb-2 w-40 h-40"
6+
:style="{
7+
borderRadius: value
8+
}"
9+
/>
10+
<CanvasBlockLabel
11+
:label="`rounded-${prop}`"
12+
:value="value"
13+
/>
1314
</div>
1415
</div>
1516
</template>
1617

1718
<script>
19+
import CanvasBlockLabel from '../CanvasBlockLabel'
20+
1821
export default {
22+
components: {
23+
CanvasBlockLabel
24+
},
1925
props: {
2026
data: {
2127
type: Object,

‎src/components/Canvas/Sections/BorderWidth.vue‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,29 @@
33
<div
44
v-for="(value, prop) in data"
55
:key="prop"
6-
class="mr-2 bg-gray-400 border-gray-600"
7-
:style="{
8-
height: '100px',
9-
width: '100px',
10-
borderWidth: value
11-
}">
12-
{{ prop }}
6+
class="mr-4"
7+
>
8+
<div
9+
class="mb-2 w-40 h-40 bg-gray-200 border-gray-400"
10+
:style="{
11+
borderWidth: value
12+
}"
13+
/>
14+
<CanvasBlockLabel
15+
:label="`rounded-${prop}`"
16+
:value="value"
17+
/>
1318
</div>
1419
</div>
1520
</template>
1621

1722
<script>
23+
import CanvasBlockLabel from '../CanvasBlockLabel'
24+
1825
export default {
26+
components: {
27+
CanvasBlockLabel
28+
},
1929
props: {
2030
data: {
2131
type: Object,

‎src/components/Canvas/Sections/Colors.vue‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,29 +15,33 @@
1515
@click="selectedProp = 'border'">Border</button>
1616
</div>
1717
<div class="flex flex-wrap">
18-
<button
18+
<div
1919
v-for="(value, prop) in data"
2020
:key="prop"
21-
class="flex px-1 py-1 md:w-1/3 xl:w-1/5 border-transparent border hover:border-gray-400 hover:bg-gray-200"
21+
class="mb-4"
2222
>
2323
<div
24-
class="mr-2 flex-none"
25-
:style="{
26-
backgroundColor: value,
27-
width: '100px',
28-
height: '100px'
29-
}" />
30-
<div>
31-
<div class="text-sm font-semibold">{{selectedProp}}-{{ prop }}</div>
32-
<div class="text-sm text-left">{{ value }}</div>
33-
</div>
34-
</button>
24+
class="mr-4 mb-2 flex-none w-40 h-40"
25+
:style="{
26+
backgroundColor: value
27+
}"
28+
/>
29+
<CanvasBlockLabel
30+
:label="`${selectedProp}-${prop}`"
31+
:value="value"
32+
/>
33+
</div>
3534
</div>
3635
</div>
3736
</template>
3837

3938
<script>
39+
import CanvasBlockLabel from '../CanvasBlockLabel'
40+
4041
export default {
42+
components: {
43+
CanvasBlockLabel
44+
},
4145
props: {
4246
data: {
4347
type: Object,

‎src/components/Canvas/Sections/FontSizes.vue‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,34 @@
22
<div class="">
33
<div
44
v-for="(value, prop) in data"
5-
class="mb-4 leading-none"
5+
class="mb-4"
66
:key="prop"
7-
:style="{
8-
fontSize: value
9-
}">
10-
<div class="text-sm mb-2">text-{{ prop }}</div>
11-
<p>The quick brown fox jumped over the lazy dog.</p>
7+
>
8+
<div class="border p-4 rounded">
9+
<p
10+
class="mb-2 leading-none"
11+
:style="{
12+
fontSize: value
13+
}"
14+
>
15+
The quick brown fox jumped over the lazy dog.
16+
</p>
17+
<CanvasBlockLabel
18+
:label="`text-${prop}`"
19+
:value="value"
20+
/>
21+
</div>
1222
</div>
1323
</div>
1424
</template>
1525

1626
<script>
27+
import CanvasBlockLabel from '../CanvasBlockLabel'
28+
1729
export default {
30+
components: {
31+
CanvasBlockLabel
32+
},
1833
props: {
1934
data: {
2035
type: Object,

‎src/components/Canvas/Sections/Height.vue‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,31 @@
11
<template>
2-
<div class="flex flex-wrap">
2+
<div class="">
33
<div
44
v-for="(value, prop) in data"
55
:key="prop"
6-
class="mr-4 mb-4"
6+
class="mb-6"
77
>
8-
<div>h-{{ prop }}</div>
9-
<div class="bg-gray-200 h-full">
108
<div
11-
class="bg-gray-400"
9+
class="mb-2 bg-gray-400"
1210
:style="{
13-
width: '100px',
1411
height: value
1512
}"
1613
/>
17-
</div>
14+
<CanvasBlockLabel
15+
:label="`h-${prop}`"
16+
:value="value"
17+
/>
1818
</div>
1919
</div>
2020
</template>
2121

2222
<script>
23+
import CanvasBlockLabel from '../CanvasBlockLabel'
24+
2325
export default {
26+
components: {
27+
CanvasBlockLabel
28+
},
2429
props: {
2530
data: {
2631
type: Object,

‎src/components/Canvas/Sections/LetterSpacing.vue‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,32 @@
22
<div class="">
33
<div
44
v-for="(value, prop) in data"
5-
class="mb-3"
5+
class="mb-4"
66
:key="prop"
7-
>
8-
<div class="text-sm">tracking-{{ prop }}</div>
7+
>
8+
<div class="border p-4 rounded">
99
<p
10-
class="text-xl"
10+
class="mb-2 text-2xl leading-none"
1111
:style="{
1212
letterSpacing: value
1313
}"
1414
>The quick brown fox jumped over the lazy dog.</p>
15+
<CanvasBlockLabel
16+
:label="`tracking-${prop}`"
17+
:value="value"
18+
/>
19+
</div>
1520
</div>
1621
</div>
1722
</template>
1823

1924
<script>
25+
import CanvasBlockLabel from '../CanvasBlockLabel'
26+
2027
export default {
28+
components: {
29+
CanvasBlockLabel
30+
},
2131
props: {
2232
data: {
2333
type: Object,

‎src/components/Canvas/Sections/LineHeight.vue‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,35 @@
22
<div class="">
33
<div
44
v-for="(value, prop) in data"
5-
class="mb-3"
5+
class="mb-4"
66
:key="prop"
7-
>
8-
<div class="text-sm">leading-{{ prop }}</div>
7+
>
8+
<div class="border p-4 rounded">
99
<div
10-
class="text-lg"
10+
class="text-lg mb-2"
1111
:style="{
1212
lineHeight: value
1313
}"
1414
>
1515
<p>The quick brown fox jumped over the lazy dog.</p>
1616
<p>The quick brown fox jumped over the lazy dog.</p>
1717
</div>
18+
<CanvasBlockLabel
19+
:label="`leading-${prop}`"
20+
:value="value"
21+
/>
22+
</div>
1823
</div>
1924
</div>
2025
</template>
2126

2227
<script>
28+
import CanvasBlockLabel from '../CanvasBlockLabel'
29+
2330
export default {
31+
components: {
32+
CanvasBlockLabel
33+
},
2434
props: {
2535
data: {
2636
type: Object,

0 commit comments

Comments
 (0)