diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/ActionBar.vue | 31 | ||||
| -rw-r--r-- | src/components/EditorLists.vue | 75 | ||||
| -rw-r--r-- | src/components/FileUpload.vue | 11 | ||||
| -rw-r--r-- | src/components/List.vue | 17 | ||||
| -rw-r--r-- | src/components/UIButton.vue | 32 |
5 files changed, 131 insertions, 35 deletions
diff --git a/src/components/ActionBar.vue b/src/components/ActionBar.vue index 96dbaae..e50c791 100644 --- a/src/components/ActionBar.vue +++ b/src/components/ActionBar.vue @@ -1,25 +1,26 @@ <template> - <div> - <file-upload + <div id="action-bar"> + <FileUpload :accept="'text/plain'" :multiple="true" - @file-changed="handlePtChange">Upload PT Schedule</file-upload> - <file-upload + @fileChanged="handlePtChange">Upload PT Schedule</FileUpload> + <FileUpload :accept="'application/json'" - @file-changed="handleLabChange">Upload Lab Schedule</file-upload> - <button @click="save">Export</button> + @fileChanged="handleLabChange">Import Lab Schedule</FileUpload> + <UIButton @click="save">Export</UIButton> </div> </template> <script> import FileUpload from '@/components/FileUpload.vue'; - import { parseLabFile, parsePtSchedule } from '@/features/parser'; +import UIButton from '@/components/UIButton.vue'; export default { name: 'ActionBar', components: { FileUpload, + UIButton, }, methods: { handleLabChange(files) { @@ -73,3 +74,19 @@ export default { }, }; </script> + +<style> +#action-bar { + max-width: 100vw; + overflow-x: auto; + white-space: nowrap; +} + +#action-bar > * { + margin-left: 0.5rem; +} + +#action-bar > *:first-child { + margin-left: 0; +} +</style> diff --git a/src/components/EditorLists.vue b/src/components/EditorLists.vue index ae0aa22..60c965c 100644 --- a/src/components/EditorLists.vue +++ b/src/components/EditorLists.vue @@ -1,19 +1,28 @@ <template> - <div id="editor"> + <div id="editor-lists"> <div class="column"> - <list :items="peerTeachers" @selection-changed="handlePtClick" #default="pt"> - {{ pt.item.name }} <button @click.stop="deletePeerTeacher(pt.item.id)">X</button> - </list> + <h3 class="column-header">Peer Teachers</h3> + <List :items="peerTeachers" @selection-changed="handlePtClick" #default="pt"> + <span class="list-item"> + {{ pt.item.name }} <button @click.stop="deletePeerTeacher(pt.item.id)">x</button> + </span> + </List> </div> <div class="column"> - <list :items="compatibleLabs" #default="lab"> - {{ lab.item.fullInfo }} <button @click.stop="assignLab(lab.item.id)">+</button> - </list> + <h3 class="column-header">Labs</h3> + <List :items="compatibleLabs" #default="lab"> + <span class="list-item"> + {{ lab.item.fullInfo }} <button @click.stop="assignLab(lab.item.id)">+</button> + </span> + </List> </div> <div class="column"> - <list :items="selectedPeerTeacherAssignments" #default="lab"> - {{ lab.item.fullInfo }} <button @click.stop="unassignLab(lab.item.id)">X</button> - </list> + <h3 class="column-header">{{ this.selectedPeerTeacher.name }}</h3> + <List :items="selectedPeerTeacherAssignments" #default="lab"> + <span class="list-item"> + {{ lab.item.fullInfo }} <button @click.stop="unassignLab(lab.item.id)">x</button> + </span> + </List> </div> </div> </template> @@ -84,13 +93,57 @@ export default defineComponent({ </script> <style> -#editor { +#editor-lists { display: flex; max-height: inherit; + min-height: 0; +} + +.column-header { + margin: 0; } .column { flex: 1; overflow: auto; } + +.list-item { + align-items: center; + background-color: #f0f0f0; + display: flex; + justify-content: space-between; + margin: 0.5em; + padding: 0.5em; +} + +.list-item:hover { + background-color: #c0c0c0; +} + +.list-item > button { + background-color: #500000; + border: none; + color: white; + font-size: 1em; +} + +@media (prefers-color-scheme: dark) { + .column-header { + color: white; + } + + .list-item { + background-color: #303030; + color: white; + } + + .list-item:hover { + background-color: #707070; + } + + .list-item > button { + background-color: #81302b; + } +} </style> diff --git a/src/components/FileUpload.vue b/src/components/FileUpload.vue index b2fdb14..fe3ef1e 100644 --- a/src/components/FileUpload.vue +++ b/src/components/FileUpload.vue @@ -20,7 +20,7 @@ export default { }, }, emits: { - selectionChanged: null, + fileChanged: null, }, }; </script> @@ -29,8 +29,7 @@ export default { .file-upload-lbl { background-color: #500000; color: white; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - padding: 5px; + padding: 0.5em; text-align: center; } @@ -38,4 +37,10 @@ export default { color: grey; cursor: pointer; } + +@media (prefers-color-scheme: dark) { + .file-upload-lbl { + background-color: #81302b; + } +} </style> diff --git a/src/components/List.vue b/src/components/List.vue index 031f708..f1ef690 100644 --- a/src/components/List.vue +++ b/src/components/List.vue @@ -3,8 +3,7 @@ <li v-for="item in items" :key="item.id" - @click="$emit('selectionChanged', item)" - class="list-item"> + @click="$emit('selectionChanged', item)"> <slot :item="item">{{ item }}</slot> </li> </ul> @@ -25,17 +24,7 @@ export default { <style scoped> .list { list-style-type: none; -} - -.list-item { - border: 1px solid grey; - border-radius: 5px; - margin: 5px 0; - padding: 0.15em; - text-align: center; -} - -.list-item:hover { - background-color: rgb(182, 182, 182); + margin: 0; + padding: 0; } </style> diff --git a/src/components/UIButton.vue b/src/components/UIButton.vue new file mode 100644 index 0000000..57b155b --- /dev/null +++ b/src/components/UIButton.vue @@ -0,0 +1,32 @@ +<template> + <button class="ui-button"><slot></slot></button> +</template> + +<script lang="ts"> +import { defineComponent } from 'vue'; + +export default defineComponent({ + name: 'UIButton', +}); +</script> + +<style> +.ui-button { + background-color: #500000; + border: none; + color: white; + font-size: 1em; + padding: 0.5em; +} + +.ui-button:hover { + color: grey; + cursor: pointer; +} + +@media (prefers-color-scheme: dark) { + .ui-button { + background-color: #81302b; + } +} +</style> |