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

Jump to bottom

Sidebar enhancements #1089

Merged
merged 3 commits into from Jul 2, 2023
Merged

Sidebar enhancements #1089

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2910425
Sidebar enchancements
alaskanpuffin Jul 1, 2023
af1cdb0
Favorite form enhancements
alaskanpuffin Jul 1, 2023
3b28f39
Favorite form enhancements
alaskanpuffin Jul 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
39 changes: 36 additions & 3 deletions src/components/FavoriteEditionForm.vue
View file
Open in desktop
Expand Up @@ -19,7 +19,6 @@
:limit="8"
:options-limit="8"
:max-height="8 * 45"
:close-on-select="false"
:clear-on-select="false"
:preserve-search="false"
:placeholder="categoryPH"
Expand All @@ -42,7 +41,8 @@
<textarea v-model="comment"
:placeholder="commentPH"
:readonly="!favorite.isUpdateable"
rows="1" />
rows="1"
style="resize: vertical;" />
<span class="icon icon-address" />
<input
v-model="location"
Expand All @@ -57,7 +57,7 @@
type="primary"
@click="onOkClick">
<template>
{{ t('maps', 'OK') }}
{{ t('maps', 'Save') }}
</template>
</NcButton>
<NcButton :disabled="!favorite.isUpdateable"
Expand Down Expand Up @@ -202,9 +202,42 @@ export default {
display: grid;
grid-template: 1fr / 40px 1fr;

input {
height: auto !important;
}

input,
textarea {
width: 100%;
padding: 12px 10px;
}

span,
input,
textarea,
.multiselect {
margin-top: 10px;
}
}

::v-deep .multiselect__tags {
border: 2px solid var(--color-border-maxcontrast) !important;

.multiselect__single {
color: var(--color-main-text) !important;
}

&:hover {
border-color: var(--color-primary-element) !important;
}
}

.buttons {
margin-top: 20px;

button {
width: 100%;
margin: 0px 5px !important;
}
}

Expand Down
92 changes: 18 additions & 74 deletions src/components/Sidebar.vue
View file
Open in desktop
Expand Up @@ -9,6 +9,9 @@
@closing="handleClosing"
@closed="handleClosed"
@close="$emit('close')">
<template v-slot:header>
<span :class="['header-icon icon', icon]" v-if="icon"></span>
</template>
<FavoriteSidebarTab v-if="activeTab === 'favorite'"
:favorite="favorite"
:categories="favoriteCategories"
Expand Down Expand Up @@ -167,6 +170,7 @@ export default {
isFullScreen: false,
typeOpened: '',
title: null,
icon: null,
}
},

Expand Down Expand Up @@ -249,34 +253,18 @@ export default {
return OC.Util.humanFileSize(this.fileInfo.size)
},

/**
* File background/figure to illustrate the sidebar header
*
* @return {string}
*/
background() {
const iconColor = OCA.Accessibility?.theme === 'dark' ? 'ffffff' : '000000'
if (this.typeOpened === 'track') {
return generateFilePath('maps', 'img', 'road.svg')
}
if (this.typeOpened === 'maps') {
return generateFilePath('maps', 'img', 'maps.png')
}
return this.getPreviewIfAny(this.fileInfo)
},

/**
* App sidebar v-binding object
*
* @return {object}
*/
appSidebar() {
this.icon = null // Reset header icon
if (this.fileInfo) {
return {
'data-mimetype': this.fileInfo.mimetype,
'star-loading': this.starLoading,
active: this.activeTab,
background: this.background,
class: {
'app-sidebar--has-preview': this.fileInfo.hasPreview && !this.isFullScreen,
'app-sidebar--full': this.isFullScreen,
Expand All @@ -299,15 +287,14 @@ export default {
// no fileInfo yet, showing empty data
return {
loading: this.loading,
subtitle: t('maps', 'Shows cool information'),
title: t('maps', 'Sidebar'),
subtitle: '',
title: '',
}
} else if (this.activeTab === 'favorite') {
const iconColor = OCA.Accessibility?.theme === 'dark' ? 'ffffff' : '000000'
this.icon = 'icon-favorite'
return {
title: t('maps', 'Favorite'),
compact: true,
background: generateUrl('/svg/core/actions/star?color=' + iconColor),
subtitle: '',
active: this.activeTab,
class: {
Expand All @@ -316,11 +303,10 @@ export default {
},
}
} else if (this.activeTab === 'photo-suggestion') {
const iconColor = OCA.Accessibility?.theme === 'dark' ? 'ffffff' : '000000'
this.icon = 'icon-picture'
return {
title: t('maps', 'Photo suggestions'),
compact: true,
background: generateUrl('/apps/theming/img/core/filetypes/image.svg?color=' + iconColor),
subtitle: '',
active: this.activeTab,
class: {
Expand All @@ -329,11 +315,9 @@ export default {
},
}
} else if (this.activeTab === 'maps-track-metadata') {
const iconColor = OCA.Accessibility?.theme === 'dark' ? 'ffffff' : '000000'
return {
title: t('maps', 'Track metadata'),
compact: true,
background: this.background,
subtitle: '',
active: this.activeTab,
class: {
Expand All @@ -344,8 +328,8 @@ export default {
} else {
return {
loading: false,
subtitle: t('maps', 'Shows cool information'),
title: t('maps', 'Sidebar'),
subtitle: '',
title: '',
}
}
},
Expand Down Expand Up @@ -380,53 +364,6 @@ export default {
return OCA && 'SystemTags' in OCA
},
},

/*
sidebarTitle() {
if (this.activeTab === 'track') {
return t('maps', 'Track')
} else if (this.activeTab === 'favorite') {
return t('maps', 'Favorite')
} else if (this.activeTab === 'photo') {
return this.photo.basename
} else if (this.activeTab === 'photo-suggestion') {
return t('maps', 'Photo location suggestions')
} else if (this.activeTab === 'myMaps') {
return this.myMap.name
}
return t('maps', 'Sidebar')
},
sidebarSubtitle() {
if (this.activeTab === 'track') {
return ''
} else if (this.activeTab === 'favorite') {
return ''
} else if (this.activeTab === 'photo') {
return this.photo.filename
} else if (this.activeTab === 'photo-suggestion') {
return ''
} else if (this.activeTab === 'myMaps') {
return this.myMap.path ?? ''
}
return t('maps', 'Shows cool information')
},
backgroundImageUrl() {
const iconColor = OCA.Accessibility?.theme === 'dark' ? 'ffffff' : '000000'
if (this.activeTab === 'track') {
return generateUrl('/svg/maps/road?color=' + iconColor)
} else if (this.activeTab === 'favorite') {
return generateUrl('/svg/core/actions/star?color=' + iconColor)
} else if (this.activeTab === 'photo') {
return this.previewUrl()
} else if (this.activeTab === 'photo-suggestion') {
return generateUrl('/apps/theming/img/core/filetypes') + '/image.svg?v=2'
} else if (this.activeTab === 'myMaps') {
return generateFilePath('maps', 'img', 'maps.png')
}
return ''
},
}, */

watch: {
},
methods: {
Expand Down Expand Up @@ -698,4 +635,11 @@ export default {
}
}
}

.header-icon {
display: block;
width: 70px;
height: 60px;
background-size: 40px 40px;
}
</style>
1 change: 0 additions & 1 deletion src/components/map/HistoryControl.vue
View file
Open in desktop
Expand Up @@ -93,7 +93,6 @@ export default {

#history {
display: flex;
margin-right: 50px;
> button {
width: 44px;
height: 44px;
Expand Down
10 changes: 3 additions & 7 deletions src/views/App.vue
View file
Open in desktop
Expand Up @@ -169,13 +169,6 @@
@redo="redoAction"
@slider-range-changed="sliderStart = $event.start; sliderEnd = $event.end" />
</div>
<NcActions
class="content-buttons"
:title="t('maps', 'Details')">
<NcActionButton
icon="icon-menu-sidebar"
@click="onMainDetailClicked" />
</NcActions>
</NcAppContent>
<Sidebar
v-if="true"
Expand Down Expand Up @@ -1632,6 +1625,7 @@ export default {
this.favorites[f.id].lat = f.lat
this.favorites[f.id].lng = f.lng
this.lastUsedFavoriteCategory = f.category
showSuccess(t('maps', 'Favorite {name} was saved', { name: f.name }))
}).catch((error) => {
console.error(error)
})
Expand All @@ -1645,6 +1639,8 @@ export default {
})
}
this.selectedFavorite = null
this.closeSidebar()
showError(t('maps', 'Favorite was deleted'))
this.$delete(this.favorites, favid)
}).catch((error) => {
console.error(error)
Expand Down