-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add dashboard edit mode and card sorting (#63)
- Hide buttons on small screens behind an "edit mode" that can be toggled from a button on the top toolbar - Add trash can icon to dashboard to quickly remove sensor cards - Add sort buttons to allow sorting dashboard sensor cards in the preferred order - Sort button and trash can are visible on hover on desktops
- Loading branch information
Showing
16 changed files
with
422 additions
and
58 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,38 @@ | ||
| <template> | ||
| <div class="header"> | ||
| <div class="header" :class="{ 'edit-mode': editMode }"> | ||
| <slot /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| props: { | ||
| editMode: { | ||
| required: true, | ||
| type: Boolean | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| /* Offset to account for buttons when in edit mode */ | ||
| .edit-mode { | ||
| left: 12%; | ||
| } | ||
| .header { | ||
| position: absolute; | ||
| left: 12%; | ||
| font-size: 1.14em; | ||
| font-weight: bold; | ||
| z-index: 1; | ||
| text-shadow: 2px 2px var(--v-text-inverse-base); | ||
| } | ||
| </style>> | ||
| /* Buttons are always present on larger screen widths */ | ||
| @media screen and not (max-width: 1000px) { | ||
| .header { | ||
| left: 12%; | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| <template> | ||
| <div class="sort-buttons" :class="{ 'edit-mode': editMode }"> | ||
| <v-btn x-small @click="moveCard('left')"> | ||
| <v-icon class="up-arrow">mdi-arrow-up-thick</v-icon> | ||
| <v-icon class="left-arrow">mdi-arrow-left-thick</v-icon> | ||
| </v-btn> | ||
| <v-btn x-small @click="moveCard('right')"> | ||
| <v-icon class="down-arrow">mdi-arrow-down-thick</v-icon> | ||
| <v-icon class="right-arrow">mdi-arrow-right-thick</v-icon> | ||
| </v-btn> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| props: { | ||
| editMode: { | ||
| required: true, | ||
| type: Boolean | ||
| }, | ||
| sensorId: { | ||
| required: true, | ||
| type: String | ||
| } | ||
| }, | ||
| methods: { | ||
| moveCard(direction) { | ||
| this.$store.commit('moveSensorCard', { | ||
| sensorId: this.sensorId, | ||
| direction | ||
| }) | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .sort-buttons { | ||
| bottom: 0; | ||
| display: none; | ||
| left: 0; | ||
| padding-bottom: 4px; | ||
| padding-left: 4px; | ||
| position: absolute; | ||
| z-index: 1; | ||
| } | ||
| .sort-buttons.edit-mode { | ||
| display: block; | ||
| } | ||
| .up-arrow { | ||
| display: none; | ||
| } | ||
| .down-arrow { | ||
| display: none; | ||
| } | ||
| .left-arrow { | ||
| display: block; | ||
| } | ||
| .right-arrow { | ||
| display: block; | ||
| } | ||
| /* Display up/down arrows instead on small displays | ||
| since we're now in a vertical layout. */ | ||
| @media screen and (max-width: 640px) { | ||
| .up-arrow { | ||
| display: block; | ||
| } | ||
| .down-arrow { | ||
| display: block; | ||
| } | ||
| .left-arrow { | ||
| display: none; | ||
| } | ||
| .right-arrow { | ||
| display: none; | ||
| } | ||
| } | ||
| </style> |
Oops, something went wrong.