julien/tps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

extract controls from dashboard

Browse Source
This commit is contained in:
Julien Calixte
2023-07-30 19:16:18 +02:00
parent 5adb8c8b8e
commit ea4183d309
2 changed files with 63 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/modules/feature/FlowControls.vue Normal file
View File

@@ -0,0 +1,48 @@
<script setup lang="ts">
import EraserIcon from '@/icons/EraserIcon.vue'
import ProblemSolvingIcon from '@/icons/ProblemSolvingIcon.vue'
import PullSystemIcon from '@/icons/PullSystemIcon.vue'
import PushSystemIcon from '@/icons/PushSystemIcon.vue'
import { useFeatureStore } from '@/modules/feature/feature-store'
const NUMBER_OF_FEATURES = 20
const featureStore = useFeatureStore()
</script>
<template>
<div class="flow-controls">
<div class="row">
<button
@click="featureStore.nextDay('push')"
:disabled="featureStore.isProjectFinished"
>
<PushSystemIcon color="white" />
</button>
<button
@click="featureStore.nextDay('pull')"
:disabled="featureStore.isProjectFinished"
>
<PullSystemIcon color="white" />
</button>
<button
@click="featureStore.nextDay('problem-solving')"
:disabled="featureStore.isProjectFinished"
>
<ProblemSolvingIcon color="white" />
</button>
<button @click="featureStore.initBoard(NUMBER_OF_FEATURES)">
<EraserIcon color="white" />
</button>
</div>
</div>
</template>
<style scoped lang="scss">
.flow-controls {
.row {
display: flex;
justify-content: center;
}
}
</style>

44
src/modules/feature/FlowDashboard.vue
View File

@@ -1,8 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import ProblemSolvingIcon from '@/icons/ProblemSolvingIcon.vue'
import PullSystemIcon from '@/icons/PullSystemIcon.vue'
import PushSystemIcon from '@/icons/PushSystemIcon.vue'
import SeparatorIcon from '@/icons/SeparatorIcon.vue' import SeparatorIcon from '@/icons/SeparatorIcon.vue'
import FlowControls from '@/modules/feature/FlowControls.vue'
import { useFeatureStore } from '@/modules/feature/feature-store' import { useFeatureStore } from '@/modules/feature/feature-store'
const featureStore = useFeatureStore() const featureStore = useFeatureStore()
@@ -58,26 +56,7 @@ const featureStore = useFeatureStore()
</div> </div>
</div> </div>
<SeparatorIcon /> <SeparatorIcon />
<div class="row"> <FlowControls />
<button
@click="featureStore.nextDay('push')"
:disabled="featureStore.isProjectFinished"
>
<PushSystemIcon color="white" />
</button>
<button
@click="featureStore.nextDay('pull')"
:disabled="featureStore.isProjectFinished"
>
<PullSystemIcon color="white" />
</button>
<button
@click="featureStore.nextDay('problem-solving')"
:disabled="featureStore.isProjectFinished"
>
<ProblemSolvingIcon color="white" />
</button>
</div>
</div> </div>
</template> </template>
@@ -88,11 +67,6 @@ const featureStore = useFeatureStore()
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.row {
display: flex;
justify-content: center;
}
.cards { .cards {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -102,7 +76,19 @@ const featureStore = useFeatureStore()
} }
.card { .card {
background-color: #f7d794; background-image: linear-gradient(
335deg,
hsl(223deg 58% 88%) 0%,
hsl(224deg 57% 88%) 21%,
hsl(224deg 58% 89%) 30%,
hsl(223deg 57% 89%) 39%,
hsl(222deg 56% 89%) 46%,
hsl(223deg 57% 90%) 54%,
hsl(222deg 55% 90%) 61%,
hsl(223deg 53% 91%) 69%,
hsl(221deg 56% 91%) 79%,
hsl(222deg 53% 92%) 100%
);
padding: 0 1rem; padding: 0 1rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;