Skip to content
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

Replaced BottomBar with BottomToolBar #4491

Merged
merged 6 commits into from
Apr 11, 2024
Merged

Replaced BottomBar with BottomToolBar #4491

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
eec1f04
Replaced BottomBar with BottomToolBar
Wck-iipi Mar 28, 2024
0b65aca
Revert "Replaced BottomBar with BottomToolBar"
Wck-iipi Mar 29, 2024
0f1ac7e
Replaced BottomToolBar with BottomBar
Wck-iipi Mar 29, 2024
37d755b
Fixed linting issues
Wck-iipi Apr 3, 2024
f7746ca
Added appearanceOverrides and removed unnecessary wrappers
Wck-iipi Apr 4, 2024
26d11af
generalized appearanceOverrides
Wck-iipi Apr 5, 2024
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
108 changes: 54 additions & 54 deletions contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<!-- Results bar -->
<VFlex xs12 class="mb-2">
<h1 class="mb-2 ml-1 title">
{{ $tr('resultsText', { count: page.count }) }}
{{ $tr("resultsText", { count: page.count }) }}
</h1>
<ActionLink
v-if="page.count && !selecting"
Expand Down Expand Up @@ -46,60 +46,55 @@
<ChannelItem
:channelId="item.id"
:detailsRouteName="detailsRouteName"
style="flex-grow: 1; width: 100%;"
style="flex-grow: 1; width: 100%"
/>
</VLayout>
</VFlex>
<VFlex xs12 style="padding-bottom: 72px;">
<VFlex xs12 style="padding-bottom: 72px">
<VLayout justify-center>
<Pagination
:pageNumber="page.page_number"
:totalPages="page.total_pages"
/>
<Pagination :pageNumber="page.page_number" :totalPages="page.total_pages" />
</VLayout>
</VFlex>
</VLayout>
<BottomToolBar
<BottomBar
v-if="selecting"
clipped-left
color="white"
flat
data-test="toolbar"
:height="$vuetify.breakpoint.xsOnly ? '72px' : '56px'"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This height prop isnt working now, and this is happening on mobile screens, the bottom bar now doesnt have an appropiate height:

Before:
image

After:
image

One thing we can do is that the BottomBar component receives an appearanceOverrides, where we can pass overrides styles to the bar, and we can end with something like:
<BottomBar :appearanceOverrides=" { height: ... } ">

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have made the desired changes and tested it on the screen above.

>
<VLayout row wrap align-center>
<VFlex xs12 sm4 class="pb-1">
{{ $tr('channelSelectionCount', { count: selectedCount }) }}
</VFlex>
<VFlex xs12 sm8>
<VLayout row>
<VSpacer />
<VBtn flat data-test="cancel" class="ma-0" @click="setSelection(false)">
{{ $tr('cancelButton') }}
</VBtn>
<Menu top>
<template #activator="{ on }">
<VBtn color="primary" class="ma-0 mx-2" v-on="on">
{{ $tr('downloadButton') }}
<Icon class="ml-1">
arrow_drop_up
</Icon>
</VBtn>
</template>
<VList>
<VListTile @click="downloadPDF">
<VListTileTitle>{{ $tr('downloadPDF') }}</VListTileTitle>
</VListTile>
<VListTile data-test="download-csv" @click="downloadCSV">
<VListTileTitle>{{ $tr('downloadCSV') }}</VListTileTitle>
</VListTile>
</VList>
</Menu>
</VLayout>
</VFlex>
</VLayout>

</BottomToolBar>
<div class="content-wrapper">
Wck-iipi marked this conversation as resolved.
Show resolved Hide resolved
<VLayout row wrap align-center>
<VFlex xs12 sm4 class="pb-1">
{{ $tr("channelSelectionCount", { count: selectedCount }) }}
</VFlex>
<VFlex xs12 sm8>
<VLayout row>
<VSpacer />
<VBtn flat data-test="cancel" class="ma-0" @click="setSelection(false)">
{{ $tr("cancelButton") }}
</VBtn>
<Menu top>
<template #activator="{ on }">
<VBtn color="primary" class="ma-0 mx-2" v-on="on">
{{ $tr("downloadButton") }}
<Icon class="ml-1">
arrow_drop_up
</Icon>
</VBtn>
</template>
<VList>
<VListTile @click="downloadPDF">
<VListTileTitle>{{ $tr("downloadPDF") }}</VListTileTitle>
</VListTile>
<VListTile data-test="download-csv" @click="downloadCSV">
<VListTileTitle>{{ $tr("downloadCSV") }}</VListTileTitle>
</VListTile>
</VList>
</Menu>
</VLayout>
</VFlex>
</VLayout>
</div>
</BottomBar>
</VContainer>
</div>

Expand All @@ -118,7 +113,7 @@
import ChannelItem from './ChannelItem';
import LoadingText from 'shared/views/LoadingText';
import Pagination from 'shared/views/Pagination';
import BottomToolBar from 'shared/views/BottomToolBar';
import BottomBar from 'shared/views/BottomBar';
import Checkbox from 'shared/views/form/Checkbox';
import ToolBar from 'shared/views/ToolBar';
import OfflineText from 'shared/views/OfflineText';
Expand All @@ -132,7 +127,7 @@
LoadingText,
CatalogFilters,
Pagination,
BottomToolBar,
BottomBar,
Checkbox,
ToolBar,
OfflineText,
Expand All @@ -145,17 +140,17 @@
selecting: false,

/*
jayoshih: router guard makes it difficult to track
differences between previous query params and new
query params, so just track it manually
*/
jayoshih: router guard makes it difficult to track
differences between previous query params and new
query params, so just track it manually
*/
previousQuery: this.$route.query,

/*
jayoshih: using excluded logic here instead of selected
to account for selections across pages (some channels
not in current page)
*/
jayoshih: using excluded logic here instead of selected
to account for selections across pages (some channels
not in current page)
*/
excluded: [],
};
},
Expand Down Expand Up @@ -282,4 +277,9 @@
margin: 0 auto;
}

.content-wrapper {
display: flex;
width: 100%;
}

</style>
2 changes: 2 additions & 0 deletions contentcuration/contentcuration/frontend/shared/views/BottomBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@
.bottom-bar {
position: fixed;
bottom: 0;
left: 0;
z-index: 3;
display: flex;
width: 100%;
height: 64px;
background-color: #ffffff;
Expand Down
24 changes: 0 additions & 24 deletions contentcuration/contentcuration/frontend/shared/views/BottomToolBar.vue
View file
Open in desktop

This file was deleted.

27 changes: 15 additions & 12 deletions contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
transition="dialog-bottom-transition"
v-bind="$attrs"
>
<VCard style="overflow-y: auto;">
<VCard style="overflow-y: auto">
<VToolbar
:color="color"
dark
Expand All @@ -34,11 +34,7 @@
<VSpacer />
<slot name="action"></slot>
<template v-if="$slots.tabs" #extension>
<Tabs
:color="color"
slider-color="white"
align-with-title
>
<Tabs :color="color" slider-color="white" align-with-title>
<slot name="tabs"></slot>
</Tabs>
</template>
Expand All @@ -47,9 +43,11 @@
<VContainer :style="`margin-top: ${contentOffset}px;`" fluid class="pa-0">
<slot></slot>
</VContainer>
<BottomToolBar v-if="$slots.bottom" color="white" flat clipped-left clipped-right>
<slot name="bottom"></slot>
</BottomToolBar>
<BottomBar v-if="$slots.bottom">
<div class="slot-wrapper">
Wck-iipi marked this conversation as resolved.
Show resolved Hide resolved
<slot name="bottom"></slot>
</div>
</BottomBar>
</VCard>
</VDialog>

Expand All @@ -59,14 +57,14 @@

import { mapState } from 'vuex';
import OfflineText from './OfflineText';
import BottomToolBar from './BottomToolBar';
import BottomBar from './BottomBar';
import Tabs from './Tabs';

export default {
name: 'FullscreenModal',
components: {
OfflineText,
BottomToolBar,
BottomBar,
Tabs,
},
props: {
Expand Down Expand Up @@ -118,7 +116,6 @@

</script>


<style lang="less" scoped>

/deep/ .v-tabs__div {
Expand All @@ -129,4 +126,10 @@
padding: 0;
}

.slot-wrapper {
display: flex;
align-items: center;
width: 100%;
}

</style>