Skip to content

Updating Opacity and Animating collapse #107

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
monicakochofar merged 2 commits into from
Oct 10, 2023
Merged

Updating Opacity and Animating collapse #107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
59a25b0
adding animation to collapse
monicakochofar Oct 10, 2023
b602347
updating opacity'
monicakochofar Oct 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10,152 changes: 7,748 additions & 2,404 deletions app_vue/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions app_vue/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@
"sass": "^1.66.1",
"sass-loader": "^13.3.2",
"vite": "^4.4.9",
"vite-svg-loader": "^4.0.0",
"vue-tsc": "^1.8.8"
},
"lint-staged": {
Expand Down
23 changes: 22 additions & 1 deletion app_vue/src/assets/stylesheets/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@
// Media queries
$extraSmallScreenWidth: 300px;
$smallScreenWidth: 500px;
$mediumScreenWidth: 814px;
$mediumScreenWidth: 768px;
$largeScreenWidth: 1200px;
$extraLargeScreenWidth: 1600px;

Expand Down Expand Up @@ -131,3 +131,24 @@ $extraLargeScreenWidth: 1600px;
@content;
}
}

//Animations
@mixin slide-fade-animation($translateY: -10px, $timingLeave: .2s, $timingEnter: .3s) {
.slide-fade-leave-to {
transform: translateY($translateY);
opacity: 0;
}
.slide-fade-leave-active {
transition: all $timingLeave ease;
}
.slide-fade-enter-from {
transform: translateY($translateY);
opacity: 0;
}
.slide-fade-enter-to {
opacity: 1;
}
.slide-fade-enter-active {
transition: all $timingEnter ease;
}
}
2 changes: 1 addition & 1 deletion app_vue/src/components/sensorMap.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ onDeactivated(() => {
// leaflet css override for mobile views
:deep img.low-opacity {
// class from sensorMapMaker that handles filtered out bins opacity
opacity: 0.2;
opacity: 0.47;
}
:deep .leaflet-pane .leaflet-layer {
// handles map opacity level
Expand Down
4 changes: 2 additions & 2 deletions app_vue/src/components/sensorRouteBlock.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ function draggedRoute() {
routeStore.googUpdateRouteStats();
}

function exportRouteClicked() {
function exportToCSV() {
let csv = '';
const duration = routeStore.getRouteDuration || '';
const distance = routeStore.getRouteDistance || 0;
Expand Down Expand Up @@ -191,7 +191,7 @@ function exportRouteClicked() {
<v-btn
class="pa-0 route-display__export"
variant="plain"
@click="exportRouteClicked"
@click="exportToCSV"
>
Export route
<vue-feather type="upload"></vue-feather>
Expand Down
163 changes: 87 additions & 76 deletions app_vue/src/components/sensorSideBarFilters.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ const thresholdRange = ref([0, 100]);

// route store
const routeStore = useRouteStore();
const { getShouldDisplayRoute } = storeToRefs(routeStore);

// sensor store
const sensorStore = useSensorStore();
Expand Down Expand Up @@ -40,6 +41,10 @@ const state = reactive({
}
});

watch(getShouldDisplayRoute, () => {
state.isCollapsed = routeStore.getShouldDisplayRoute;
});

// watching for store state updates and updating component variables
watch(getRoutableSensors, () => {
state.totalSensorsShown = sensorStore.getRoutableSensors.length || 0;
Expand Down Expand Up @@ -187,83 +192,88 @@ function getFilterCount() {
</v-btn>
</div>

<section
v-if="!state.isCollapsed"
class="filter-list__fields"
<transition
name="slide-fade"
mode="out-in"
>
<div class="filter-list__fill-level">
<div class="filter-list__label color-gray-grey">Fill Level</div>
<v-range-slider
class="filter-list__slider"
v-model="state.selectedFillRange"
strict
:color="telusUi.green"
:track-color="telusUi.green"
:ticks="[0, 50, 100]"
show-ticks="always"
tick-size="0"
:step="1"
:max="thresholdRange[1]"
:min="thresholdRange[0]"
:thumb-label="state.showFillLabel"
@mouseup="state.showFillLabel = false"
@mousedown="state.showFillLabel = true"
@update:modelValue="updateFillRangeFilter"
>
<template v-slot:thumb-label="{ modelValue }">{{ modelValue }}%</template>
</v-range-slider>
</div>

<v-autocomplete
class="filter-list__dropdown"
v-model="state.selectedGroup"
label="Group"
chips
multiple
:items="state.group"
@update:modelValue="updateGroupFilter"
></v-autocomplete>

<v-autocomplete
class="filter-list__dropdown"
v-model="state.selectedMaterialType"
label="Material Type"
chips
multiple
:items="state.materialType"
@update:modelValue="updateMaterialTypeFilter"
></v-autocomplete>

<v-autocomplete
class="filter-list__dropdown"
v-model="state.selectedAssetTag"
label="Asset Tag"
chips
multiple
:items="state.assetTag"
@update:modelValue="updateAssetTagFilter"
></v-autocomplete>

<v-autocomplete
class="filter-list__dropdown"
v-model="state.selectedBinVolume"
label="Bin Volume"
chips
multiple
:items="state.binVolume"
@update:modelValue="updateBinVolumeFilter"
></v-autocomplete>

<v-autocomplete
class="filter-list__dropdown"
v-model="state.selectedBinType"
label="Bin Type"
chips
multiple
:items="state.binType"
@update:modelValue="updateBinTypeFilter"
></v-autocomplete>
</section>
<section
v-if="!state.isCollapsed"
class="filter-list__fields"
>
<div class="filter-list__fill-level">
<div class="filter-list__label color-gray-grey">Fill Level</div>
<v-range-slider
class="filter-list__slider"
v-model="state.selectedFillRange"
strict
:color="telusUi.green"
:track-color="telusUi.green"
:ticks="[0, 50, 100]"
show-ticks="always"
tick-size="0"
:step="1"
:max="thresholdRange[1]"
:min="thresholdRange[0]"
:thumb-label="state.showFillLabel"
@mouseup="state.showFillLabel = false"
@mousedown="state.showFillLabel = true"
@update:modelValue="updateFillRangeFilter"
>
<template v-slot:thumb-label="{ modelValue }">{{ modelValue }}%</template>
</v-range-slider>
</div>

<v-autocomplete
class="filter-list__dropdown"
v-model="state.selectedGroup"
label="Group"
chips
multiple
:items="state.group"
@update:modelValue="updateGroupFilter"
></v-autocomplete>

<v-autocomplete
class="filter-list__dropdown"
v-model="state.selectedMaterialType"
label="Material Type"
chips
multiple
:items="state.materialType"
@update:modelValue="updateMaterialTypeFilter"
></v-autocomplete>

<v-autocomplete
class="filter-list__dropdown"
v-model="state.selectedAssetTag"
label="Asset Tag"
chips
multiple
:items="state.assetTag"
@update:modelValue="updateAssetTagFilter"
></v-autocomplete>

<v-autocomplete
class="filter-list__dropdown"
v-model="state.selectedBinVolume"
label="Bin Volume"
chips
multiple
:items="state.binVolume"
@update:modelValue="updateBinVolumeFilter"
></v-autocomplete>

<v-autocomplete
class="filter-list__dropdown"
v-model="state.selectedBinType"
label="Bin Type"
chips
multiple
:items="state.binType"
@update:modelValue="updateBinTypeFilter"
></v-autocomplete>
</section>
</transition>

<div class="mb-6">
<span class="font-weight-bold">Result: {{ state.totalSensorsShown }} bin{{ state.totalSensorsShown > 1 ? 's' : '' }}</span>
Expand Down Expand Up @@ -302,6 +312,7 @@ function getFilterCount() {

.filter-list {
width: 100%;
@include slide-fade-animation;

&__fields {
margin-bottom: 20px;
Expand Down
16 changes: 0 additions & 16 deletions app_vue/src/components/sensorSidebar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,22 +37,6 @@ function positionSidebar() {
<SensorSideBarFilters></SensorSideBarFilters>

<SensorSideBarRoutes></SensorSideBarRoutes>

<!-- Map Updated button -->
<v-btn
class="map-updated"
variant="plain"
disabled
>
<vue-feather
class="map-updated__icon"
type="refresh-ccw"
></vue-feather>
<div>
<span class="map-updated__text">Map updated:</span>
<span>Just now</span>
</div>
</v-btn>
</div>
</v-navigation-drawer>
</div>
Expand Down
4 changes: 2 additions & 2 deletions app_vue/vite.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { fileURLToPath, URL } from 'node:url';

import svgLoader from 'vite-svg-loader';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

Expand All @@ -8,7 +8,7 @@ export default defineConfig({
define: {
'process.env': process.env
},
plugins: [vue()],
plugins: [vue(), svgLoader()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
Expand Down