feat: card updates

see #26 * dark theme * new internal layout
asvae · Apr 28, 2019 · 5007913 · 5007913
1 parent fb16fe0
commit 5007913
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 55 deletions.
diff --git a/README.md b/README.md
@@ -126,6 +126,7 @@ You can consider this component as both 'card' and 'test-case'.
 * `width` - String. Card width.
 * `height` - String. Card height.
 * `color` - String. Card color.
+* `dark` - Boolean. Dark color theme.
  
 * `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. 
 

diff --git a/packages/vue-book/package.json b/packages/vue-book/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-book",
-  "version": "0.1.0-alpha.16",
+  "version": "0.1.0-alpha.17",
   "description": "Tree view for your demo components",
   "main": "dist/js/app.js",
   "private": false,

diff --git a/packages/vue-book/src/components/Exposed/VbCard.demo.vue b/packages/vue-book/src/components/Exposed/VbCard.demo.vue
@@ -1,34 +1,52 @@
 <template>
   <VbDemo>
     <VbCard>
-      Default container
+      Default
     </VbCard>
     <VbCard no-padding>
       No padding
     </VbCard>
     <VbCard dashed>
       Dashed
     </VbCard>
-    <VbCard title="With title">
-      With title
+    <VbCard title="Title">
+      Content
     </VbCard>
-    <VbCard title="With title" refresh>
+    <VbCard no-padding title="No padding + title">
+      Content
+    </VbCard>
+    <VbCard title="Title" refresh>
+
       With title and refresh
     </VbCard>
-    <VbCard refresh height="100px" width="300px">
-      <div style="background-color: #1fc8db; height: 100%; width: 150px">With refresh</div>
+    <VbCard refresh>
+      <div style="background-color: #1fc8db; height: 100%; width: 150px">Refresh (<RefreshCounter/>)</div>
+    </VbCard>
+    <VbCard height="100px" width="150px">
+      150x100
+    </VbCard>
+    <VbCard title="Dark" dark refresh dashed>
+      <span style="color: white">Content</span>
+    </VbCard>
+    <VbCard title="Color" refresh color="orange">
+      Content
+    </VbCard>
+    <VbCard title="Dark + color" dark refresh color="orange">
+      <span style="color: white">Content</span>
     </VbCard>
   </VbDemo>
 </template>
 
 <script>
 import VbDemo from './VbDemo'
 import VbCard from './VbCard'
+import RefreshCounter from './__demo__/RefreshCounter'
 
 export default {
   components: {
+    RefreshCounter,
     VbCard,
     VbDemo,
-  }
+  },
 }
 </script>
diff --git a/packages/vue-book/src/components/Exposed/VbCard.vue b/packages/vue-book/src/components/Exposed/VbCard.vue
@@ -3,31 +3,40 @@
     class="VbCard"
     :class="computedClass"
     v-if="!isHiddenAsUnfocused"
+    :style="computedStyle"
   >
-    <div class="VbCard__title" v-if="title || refresh">
-      <div class="VbCard__title__text" v-if="title">
-        {{ title }}
-      </div>
-      <div class="VbCard__title__spacer"/>
-      <div
-        v-if="refresh"
-        class="VbCard__title__icon"
-        @click="doRefresh()"
-        title="Refresh"
-      >
-        <FontAwesomeIcon
+    <template v-if="title || refresh">
+      <div class="VbCard__title">
+        <div class="VbCard__title__text" v-if="title">
+          {{ title }}
+        </div>
+        <div class="VbCard__title__spacer"/>
+        <div
+          v-if="focus"
+          class="VbCard__title__icon"
+          title="This card is focused. Not focused cards won't be displayed"
+          style="font-weight: 700; color: white; background-color: #d8365d; border-radius: 16px; width: 16px"
+        >
+          <span>F</span>
+        </div>
+        <div
+          v-if="refresh"
+          class="VbCard__title__icon"
+          style="cursor: pointer"
+          @click="doRefresh()"
           title="Refresh"
-          icon="sync"
-        />
+        >
+          <FontAwesomeIcon
+            title="Refresh"
+            icon="sync"
+          />
+        </div>
       </div>
-    </div>
-    <div
-      class="VbCard__content"
-      ref="content"
-      :style="computedStyle"
-    >
-      <slot v-if="show"/>
-    </div>
+
+      <div class="VbCard__separator"/>
+    </template>
+
+    <slot v-if="show"/>
   </div>
 </template>
 
@@ -43,50 +52,49 @@ export default {
   ],
   data: () => ({
     show: true,
-    contentStyleTemp: null,
+    cardStyleTemp: null,
   }),
   props: {
     noPadding: Boolean,
     dashed: Boolean,
     title: String,
     refresh: Boolean,
+    dark: Boolean,
     width: String,
     height: String,
     color: String,
   },
   computed: {
     computedStyle () {
-      const computedStyle = {
-        'min-width': this.width,
-        'min-height': this.height,
-        height: undefined,
-        width: undefined,
-        backgroundColor: this.color,
+      if (this.cardStyleTemp) {
+        return {
+          ...this.cardStyleTemp,
+          backgroundColor: this.color,
+        }
       }
-      if (this.contentStyleTemp) {
-        computedStyle.height = this.contentStyleTemp.height
-        computedStyle.width = this.contentStyleTemp.width
+
+      return {
+        height: this.height,
+        width: this.width,
+        backgroundColor: this.color,
       }
-      return computedStyle
     },
     computedClass () {
       return {
         'VbCard--no-padding': this.noPadding,
         'VbCard--dashed': this.dashed,
+        'VbCard--dark': this.dark,
       }
     },
   },
   methods: {
     doRefresh () {
-      const computedStyle = window.getComputedStyle(this.$refs.content)
-      this.contentStyleTemp = {
-        width: computedStyle.width,
-        height: computedStyle.height,
-      }
+      const { width, height } = window.getComputedStyle(this.$el)
+      this.cardStyleTemp = { width, height }
       this.show = false
 
       setTimeout(() => {
-        this.contentStyleTemp = null
+        this.cardStyleTemp = null
         this.show = true
       })
     },
@@ -95,16 +103,46 @@ export default {
 </script>
 
 <style lang="scss">
+@import "../../scss/resources";
+
+$card-content-padding: 20px;
+
 .VbCard {
   margin: 5px;
   background-color: white;
+  padding: $card-content-padding;
+
+  &--dark {
+    background-color: #252525;
+
+    .VbCard__title {
+      color: #ededed;
+      background-color: #252525;
+    }
+
+    .VbCard__separator {
+      background-color: #9d9d9d;
+    }
+
+    &.VbCard--dashed {
+      border: dashed #d0daee 1px;
+    }
+  }
 
   &__title {
+    background-color: white;
     display: flex;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+    margin: (-$card-content-padding) (-$card-content-padding) 0;
+    padding: 3px 5px;
+    align-items: center;
+
+    @at-root {
+      .VbCard.VbCard--no-padding & {
+        margin: 0;
+      }
+    }
 
     &__text {
-      padding: 3px 5px;
       font-weight: 700;
     }
 
@@ -113,26 +151,34 @@ export default {
     }
 
     &__icon {
-      font-size: 12px;
-      padding: 4px;
+      margin-left: 4px;
+      font-size: 14px;
+      padding: 2px;
       user-select: none;
+      @include flexCenter();
 
       &:hover {
-        cursor: pointer;
         color: gray;
       }
     }
   }
 
-  &__content {
-    padding: 20px;
+  &__separator {
+    height: 1px;
+    background-color: rgba(0, 0, 0, 0.2);
+    margin: 0 (-$card-content-padding) $card-content-padding;
+
     @at-root {
       .VbCard.VbCard--no-padding & {
-        padding: 0;
+        margin: 0;
       }
     }
   }
 
+  &--no-padding {
+    padding: 0;
+  }
+
   &--dashed {
     border: dashed #7c8391 1px;
   }

diff --git a/packages/vue-book/src/components/Exposed/__demo__/RefreshCounter.vue b/packages/vue-book/src/components/Exposed/__demo__/RefreshCounter.vue
@@ -0,0 +1,21 @@
+<template>
+  <span class="RefreshCounter">
+    {{refreshCounter}}
+  </span>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+let refreshCounter = 0
+
+@Component({})
+export default class RefreshCounter extends Vue {
+  created() {
+    console.log('created')
+  }
+  get refreshCounter () {
+    return ++refreshCounter
+  }
+}
+</script>