Merge pull request #139 from Nekoya3/feature/137-add-editing-screen-action

editing screenの中身を作る

Author: NEKOYASAN

src/components/ContentCard.vue

@@ -1,57 +1,89 @@
 <template>
-  <v-card class="ContentCard elevation-4">
-    <v-card-actions class="ContentCard-Actions">
-      <subject-tag
-        v-for="(item, idx) in subjects"
-        :key="idx"
-        class="ContentCard-SubjectTag"
-        :name="item.name || '教科名'"
-        :icon="item.icon || ''"
-        :icon-color="item.iconColor || 'white'"
-        :background-color="item.backgroundColor || '#A5D8FF'"
+  <div class="ContentCard-Outer">
+    <v-card class="ContentCard elevation-4">
+      <v-card-actions class="ContentCard-Actions">
+        <subject-tag
+          class="ContentCard-SubjectTag"
+          :name="lesson.subject.name || '教科名'"
+          icon-color="white"
+          :background-color="lesson.subject.color || '#A5D8FF'"
+        />
+        <subject-tag
+          v-if="lesson.videos.length > 0"
+          class="ContentCard-SubjectTag"
+          :name="'動画'"
+          :icon="'mdi-video'"
+          :icon-color="'#424242'"
+          :background-color="'#E0E0E0'"
+        />
+      </v-card-actions>
+      <v-card-title>
+        <h2 class="ContentCard-Title">{{ lesson.title }}</h2>
+      </v-card-title>
+      <v-card-text>
+        <p class="ContentCard-Description">{{ lesson.description }}</p>
+      </v-card-text>
+    </v-card>
+    <div v-if="editable" class="ContentCard-Button-Outer">
+      <content-card-editor-button
+        class="ContentCard-Button"
+        icon-name="mdi-eye-off"
+        @click="$emit('toggleHidden')"
       />
-      <subject-tag
-        class="ContentCard-SubjectTag"
-        :name="'動画'"
-        :icon="'mdi-video'"
-        :icon-color="'#424242'"
-        :background-color="'#E0E0E0'"
+      <content-card-editor-button
+        class="ContentCard-Button"
+        icon-name="mdi-pencil"
+        @click="$emit('clickEditButton')"
       />
-    </v-card-actions>
-    <v-card-title>
-      <h2 class="ContentCard-Title">{{ title }}</h2>
-    </v-card-title>
-    <v-card-text>
-      <p class="ContentCard-Description">{{ description }}</p>
-    </v-card-text>
-  </v-card>
+      <!--
+      <content-card-editor-button
+        class="ContentCard-Button"
+        icon-name="mdi-file-multiple"
+      />
+      -->
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 import SubjectTag from '@/components/SubjectTag.vue'
+import ContentCardEditorButton from '@/components/ContentCardEditorButton.vue'
+import { classData } from '~/types/store/classData'
 
 export default Vue.extend({
-  components: { SubjectTag },
+  components: {
+    SubjectTag,
+    ContentCardEditorButton
+  },
   props: {
-    subjects: {
-      type: Array,
-      default: () => []
-    },
-    title: {
-      type: String,
-      default: ''
+    lesson: {
+      type: Object as () => classData.Lesson,
+      required: true
     },
-    description: {
-      type: String,
-      default: ''
+    editable: {
+      type: Boolean,
+      default: false
     }
   }
 })
 </script>
 
 <style scoped lang="scss">
+.ContentCard-Outer {
+  display: flex;
+}
+.ContentCard-Button-Outer {
+  display: flex;
+  flex-direction: column;
+  flex: 0 1 auto;
+  margin-left: 12px;
+  .ContentCard-Button {
+    margin-bottom: 12px;
+  }
+}
 .ContentCard {
+  flex: 1 1 auto;
   color: $color-gray;
   border-radius: 14px !important;
   .ContentCard-Actions {

src/components/ContentCardEditable.vue

@@ -1,5 +1,10 @@
 <template>
-  <v-btn class="editorButton" width="48px" height="48px">
+  <v-btn
+    class="editorButton"
+    width="48px"
+    height="48px"
+    @click="$emit('click')"
+  >
     <v-icon :color="iconColor" :size="iconSize">{{ iconName }}</v-icon>
   </v-btn>
 </template>