Skip to content

Commit 5007913

Browse files
asvaeasvae
committed
feat: card updates
see #26 * dark theme * new internal layout
1 parent fb16fe0 commit 5007913

File tree

5 files changed

+141
-55
lines changed

5 files changed

+141
-55
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@ You can consider this component as both 'card' and 'test-case'.
126126
* `width` - String. Card width.
127127
* `height` - String. Card height.
128128
* `color` - String. Card color.
129+
* `dark` - Boolean. Dark color theme.
129130
130131
* `focus` - Boolean. If any `VbCard` is focused - only focused cards will be shown in demo. This is useful when you want to work on specific case and hide unneeded ones.
131132

‎packages/vue-book/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-book",
3-
"version": "0.1.0-alpha.16",
3+
"version": "0.1.0-alpha.17",
44
"description": "Tree view for your demo components",
55
"main": "dist/js/app.js",
66
"private": false,

‎packages/vue-book/src/components/Exposed/VbCard.demo.vue‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,52 @@
11
<template>
22
<VbDemo>
33
<VbCard>
4-
Default container
4+
Default
55
</VbCard>
66
<VbCard no-padding>
77
No padding
88
</VbCard>
99
<VbCard dashed>
1010
Dashed
1111
</VbCard>
12-
<VbCard title="With title">
13-
With title
12+
<VbCard title="Title">
13+
Content
1414
</VbCard>
15-
<VbCard title="With title" refresh>
15+
<VbCard no-padding title="No padding + title">
16+
Content
17+
</VbCard>
18+
<VbCard title="Title" refresh>
19+
1620
With title and refresh
1721
</VbCard>
18-
<VbCard refresh height="100px" width="300px">
19-
<div style="background-color: #1fc8db; height: 100%; width: 150px">With refresh</div>
22+
<VbCard refresh>
23+
<div style="background-color: #1fc8db; height: 100%; width: 150px">Refresh (<RefreshCounter/>)</div>
24+
</VbCard>
25+
<VbCard height="100px" width="150px">
26+
150x100
27+
</VbCard>
28+
<VbCard title="Dark" dark refresh dashed>
29+
<span style="color: white">Content</span>
30+
</VbCard>
31+
<VbCard title="Color" refresh color="orange">
32+
Content
33+
</VbCard>
34+
<VbCard title="Dark + color" dark refresh color="orange">
35+
<span style="color: white">Content</span>
2036
</VbCard>
2137
</VbDemo>
2238
</template>
2339

2440
<script>
2541
import VbDemo from './VbDemo'
2642
import VbCard from './VbCard'
43+
import RefreshCounter from './__demo__/RefreshCounter'
2744
2845
export default {
2946
components: {
47+
RefreshCounter,
3048
VbCard,
3149
VbDemo,
32-
}
50+
},
3351
}
3452
</script>

‎packages/vue-book/src/components/Exposed/VbCard.vue‎

Lines changed: 93 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,40 @@
33
class="VbCard"
44
:class="computedClass"
55
v-if="!isHiddenAsUnfocused"
6+
:style="computedStyle"
67
>
7-
<div class="VbCard__title" v-if="title || refresh">
8-
<div class="VbCard__title__text" v-if="title">
9-
{{ title }}
10-
</div>
11-
<div class="VbCard__title__spacer"/>
12-
<div
13-
v-if="refresh"
14-
class="VbCard__title__icon"
15-
@click="doRefresh()"
16-
title="Refresh"
17-
>
18-
<FontAwesomeIcon
8+
<template v-if="title || refresh">
9+
<div class="VbCard__title">
10+
<div class="VbCard__title__text" v-if="title">
11+
{{ title }}
12+
</div>
13+
<div class="VbCard__title__spacer"/>
14+
<div
15+
v-if="focus"
16+
class="VbCard__title__icon"
17+
title="This card is focused. Not focused cards won't be displayed"
18+
style="font-weight: 700; color: white; background-color: #d8365d; border-radius: 16px; width: 16px"
19+
>
20+
<span>F</span>
21+
</div>
22+
<div
23+
v-if="refresh"
24+
class="VbCard__title__icon"
25+
style="cursor: pointer"
26+
@click="doRefresh()"
1927
title="Refresh"
20-
icon="sync"
21-
/>
28+
>
29+
<FontAwesomeIcon
30+
title="Refresh"
31+
icon="sync"
32+
/>
33+
</div>
2234
</div>
23-
</div>
24-
<div
25-
class="VbCard__content"
26-
ref="content"
27-
:style="computedStyle"
28-
>
29-
<slot v-if="show"/>
30-
</div>
35+
36+
<div class="VbCard__separator"/>
37+
</template>
38+
39+
<slot v-if="show"/>
3140
</div>
3241
</template>
3342

@@ -43,50 +52,49 @@ export default {
4352
],
4453
data: () => ({
4554
show: true,
46-
contentStyleTemp: null,
55+
cardStyleTemp: null,
4756
}),
4857
props: {
4958
noPadding: Boolean,
5059
dashed: Boolean,
5160
title: String,
5261
refresh: Boolean,
62+
dark: Boolean,
5363
width: String,
5464
height: String,
5565
color: String,
5666
},
5767
computed: {
5868
computedStyle () {
59-
const computedStyle = {
60-
'min-width': this.width,
61-
'min-height': this.height,
62-
height: undefined,
63-
width: undefined,
64-
backgroundColor: this.color,
69+
if (this.cardStyleTemp) {
70+
return {
71+
...this.cardStyleTemp,
72+
backgroundColor: this.color,
73+
}
6574
}
66-
if (this.contentStyleTemp) {
67-
computedStyle.height = this.contentStyleTemp.height
68-
computedStyle.width = this.contentStyleTemp.width
75+
76+
return {
77+
height: this.height,
78+
width: this.width,
79+
backgroundColor: this.color,
6980
}
70-
return computedStyle
7181
},
7282
computedClass () {
7383
return {
7484
'VbCard--no-padding': this.noPadding,
7585
'VbCard--dashed': this.dashed,
86+
'VbCard--dark': this.dark,
7687
}
7788
},
7889
},
7990
methods: {
8091
doRefresh () {
81-
const computedStyle = window.getComputedStyle(this.$refs.content)
82-
this.contentStyleTemp = {
83-
width: computedStyle.width,
84-
height: computedStyle.height,
85-
}
92+
const { width, height } = window.getComputedStyle(this.$el)
93+
this.cardStyleTemp = { width, height }
8694
this.show = false
8795
8896
setTimeout(() => {
89-
this.contentStyleTemp = null
97+
this.cardStyleTemp = null
9098
this.show = true
9199
})
92100
},
@@ -95,16 +103,46 @@ export default {
95103
</script>
96104

97105
<style lang="scss">
106+
@import "../../scss/resources";
107+
108+
$card-content-padding: 20px;
109+
98110
.VbCard {
99111
margin: 5px;
100112
background-color: white;
113+
padding: $card-content-padding;
114+
115+
&--dark {
116+
background-color: #252525;
117+
118+
.VbCard__title {
119+
color: #ededed;
120+
background-color: #252525;
121+
}
122+
123+
.VbCard__separator {
124+
background-color: #9d9d9d;
125+
}
126+
127+
&.VbCard--dashed {
128+
border: dashed #d0daee 1px;
129+
}
130+
}
101131
102132
&__title {
133+
background-color: white;
103134
display: flex;
104-
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
135+
margin: (-$card-content-padding) (-$card-content-padding) 0;
136+
padding: 3px 5px;
137+
align-items: center;
138+
139+
@at-root {
140+
.VbCard.VbCard--no-padding & {
141+
margin: 0;
142+
}
143+
}
105144
106145
&__text {
107-
padding: 3px 5px;
108146
font-weight: 700;
109147
}
110148
@@ -113,26 +151,34 @@ export default {
113151
}
114152
115153
&__icon {
116-
font-size: 12px;
117-
padding: 4px;
154+
margin-left: 4px;
155+
font-size: 14px;
156+
padding: 2px;
118157
user-select: none;
158+
@include flexCenter();
119159
120160
&:hover {
121-
cursor: pointer;
122161
color: gray;
123162
}
124163
}
125164
}
126165
127-
&__content {
128-
padding: 20px;
166+
&__separator {
167+
height: 1px;
168+
background-color: rgba(0, 0, 0, 0.2);
169+
margin: 0 (-$card-content-padding) $card-content-padding;
170+
129171
@at-root {
130172
.VbCard.VbCard--no-padding & {
131-
padding: 0;
173+
margin: 0;
132174
}
133175
}
134176
}
135177
178+
&--no-padding {
179+
padding: 0;
180+
}
181+
136182
&--dashed {
137183
border: dashed #7c8391 1px;
138184
}

‎packages/vue-book/src/components/Exposed/__demo__/RefreshCounter.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<span class="RefreshCounter">
3+
{{refreshCounter}}
4+
</span>
5+
</template>
6+
7+
<script lang="ts">
8+
import { Component, Vue } from 'vue-property-decorator'
9+
10+
let refreshCounter = 0
11+
12+
@Component({})
13+
export default class RefreshCounter extends Vue {
14+
created() {
15+
console.log('created')
16+
}
17+
get refreshCounter () {
18+
return ++refreshCounter
19+
}
20+
}
21+
</script>

0 commit comments

Comments
 (0)