ouyang/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make the styling consistent across all pages of the mobile version

Browse Source
This commit is contained in:
MaysWind
2025-12-01 00:45:48 +08:00
parent 96561ec2be
commit c8b3daa915
56 changed files with 525 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/common/MapView.vue
View File

@@ -14,6 +14,7 @@ import { ref, computed, useTemplateRef } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import type { Coordinate } from '@/core/coordinate.ts';
import { isNumber } from '@/lib/common.ts';
import type { MapInstance } from '@/lib/map/base.ts';
import { createMapInstance } from '@/lib/map/index.ts';
@@ -21,6 +22,7 @@ const props = defineProps<{
height?: string;
mapClass?: string;
mapStyle?: Record<string, string>;
enableZoomControl?: boolean;
geoLocation?: Coordinate;
}>();
@@ -31,7 +33,9 @@ const emit = defineEmits<{
const { tt, getCurrentLanguageInfo } = useI18n();
const mapContainer = useTemplateRef<HTMLElement>('mapContainer');
const mapInstance = ref<MapInstance | null>(createMapInstance());
const mapInstance = ref<MapInstance | null>(createMapInstance({
enableZoomControl: props.enableZoomControl
}));
const initCenter = ref<Coordinate>({
latitude: 0,
longitude: 0
@@ -67,7 +71,7 @@ function initMapView(): void {
if (initCenter.value.latitude !== props.geoLocation.latitude || initCenter.value.longitude !== props.geoLocation.longitude) {
initCenter.value.latitude = props.geoLocation.latitude;
initCenter.value.longitude = props.geoLocation.longitude;
zoomLevel.value = mapInstance.value.defaultZoomLevel;
zoomLevel.value = mapInstance.value.getDefaultZoomLevel();
centerChanged = true;
}
@@ -75,7 +79,7 @@ function initMapView(): void {
if (initCenter.value.latitude || initCenter.value.longitude) {
initCenter.value.latitude = 0;
initCenter.value.longitude = 0;
zoomLevel.value = mapInstance.value.minZoomLevel;
zoomLevel.value = mapInstance.value.getMinZoomLevel();
centerChanged = true;
}
@@ -94,7 +98,14 @@ function initMapView(): void {
},
onClick: (geoLocation: Coordinate) => {
emit('click', geoLocation);
}
},
onZoomChange(level: number) {
if (isNumber(level)) {
zoomLevel.value = level;
} else if (mapInstance.value) {
zoomLevel.value = Math.round(mapInstance.value.getZoomLevel());
}
},
});
if (mapInstance.value.inited) {
@@ -106,9 +117,9 @@ function initMapView(): void {
mapInstance.value.setMapCenterTo(initCenter.value, zoomLevel.value);
}
if (centerChanged && zoomLevel.value > mapInstance.value.minZoomLevel) {
if (centerChanged && zoomLevel.value > mapInstance.value.getMinZoomLevel()) {
mapInstance.value.setMapCenterMarker(initCenter.value);
} else if (centerChanged && zoomLevel.value <= mapInstance.value.minZoomLevel) {
} else if (centerChanged && zoomLevel.value <= mapInstance.value.getMinZoomLevel()) {
mapInstance.value.removeMapCenterMarker();
}
}
@@ -123,8 +134,44 @@ function setMarkerPosition(geoLocation?: Coordinate): void {
}
}
function allowZoomIn(): boolean {
if (!mapSupported.value || !mapDependencyLoaded.value || !mapInstance.value) {
return false;
}
return zoomLevel.value < mapInstance.value.getMaxZoomLevel();
}
function allowZoomOut(): boolean {
if (!mapSupported.value || !mapDependencyLoaded.value || !mapInstance.value) {
return false;
}
return zoomLevel.value > mapInstance.value.getMinZoomLevel();
}
function zoomIn(): void {
if (!mapInstance.value) {
return;
}
mapInstance.value.zoomIn();
}
function zoomOut(): void {
if (!mapInstance.value) {
return;
}
mapInstance.value.zoomOut();
}
defineExpose({
initMapView,
setMarkerPosition
setMarkerPosition,
allowZoomIn,
allowZoomOut,
zoomIn,
zoomOut
});
</script>

7
src/components/mobile/AIImageRecognitionSheet.vue
View File

@@ -4,10 +4,13 @@
<f7-toolbar>
<div class="swipe-handler"></div>
<div class="left">
<f7-link :class="{ 'disabled': loading || recognizing }" :text="tt('Cancel')" @click="cancel"></f7-link>
<f7-link icon-f7="xmark" :class="{ 'disabled': loading || recognizing }"
@click="cancel"></f7-link>
</div>
<div class="right">
<f7-link :class="{ 'disabled': loading || recognizing || !imageFile }" :text="tt('Recognize')" @click="confirm"></f7-link>
<f7-button round fill icon-f7="checkmark_alt"
:class="{ 'disabled': loading || recognizing || !imageFile }"
@click="confirm"></f7-button>
</div>
</f7-toolbar>
<f7-page-content class="no-margin-vertical no-padding-vertical">

10
src/components/mobile/ColorSelectionSheet.vue
View File

@@ -4,10 +4,10 @@
@sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<f7-toolbar>
<div class="swipe-handler"></div>
<div class="left"></div>
<div class="right">
<f7-link sheet-close :text="tt('Done')"></f7-link>
<div class="left">
<f7-link sheet-close icon-f7="xmark"></f7-link>
</div>
<div class="right"></div>
</f7-toolbar>
<f7-page-content>
<f7-block class="margin-vertical no-padding">
@@ -31,8 +31,6 @@
<script setup lang="ts">
import { ref, computed } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import type { ColorValue, ColorInfo } from '@/core/color.ts';
import { arrayContainsFieldValue } from '@/lib/common.ts';
import { getColorsInRows } from '@/lib/color.ts';
@@ -50,8 +48,6 @@ const emit = defineEmits<{
(e: 'update:show', value: boolean): void;
}>();
const { tt } = useI18n();
const currentValue = ref<ColorValue>(props.modelValue);
const itemPerRow = ref<number>(props.columnCount || 7);

2
src/components/mobile/DateRangeSelectionSheet.vue
View File

@@ -1,7 +1,7 @@
<template>
<f7-sheet swipe-to-close swipe-handler=".swipe-handler" style="height:auto"
:opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<div class="swipe-handler" style="z-index: 10"></div>
<div class="swipe-handler"></div>
<f7-page-content>
<div class="display-flex padding justify-content-space-between align-items-center">
<div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>

4
src/components/mobile/DateSelectionSheet.vue
View File

@@ -7,11 +7,11 @@
<f7-link :text="tt('Clear')" @click="clear"></f7-link>
</div>
<div class="right">
<f7-link :text="tt('Done')" @click="confirm"></f7-link>
<f7-button round fill icon-f7="checkmark_alt" @click="confirm"></f7-button>
</div>
</f7-toolbar>
<f7-page-content>
<div class="block block-outline no-margin no-padding">
<div class="block no-margin no-padding">
<date-time-picker datetime-picker-class="justify-content-center"
:is-dark-mode="isDarkMode"
:enable-time-picker="false"

22
src/components/mobile/DateTimeSelectionSheet.vue
View File

@@ -7,11 +7,12 @@
<f7-link :text="tt('Now')" @click="setCurrentTime"></f7-link>
</div>
<div class="right">
<f7-link :text="tt('Done')" @click="confirm"></f7-link>
<f7-link :icon-f7="mode === 'time' ? 'calendar' : 'clock'" @click="switchMode"></f7-link>
<f7-button round fill icon-f7="checkmark_alt" @click="confirm"></f7-button>
</div>
</f7-toolbar>
<f7-page-content class="padding-bottom">
<div class="block block-outline no-margin no-padding">
<div class="block no-margin no-padding">
<date-time-picker ref="datetimepicker"
datetime-picker-class="justify-content-center"
:is-dark-mode="isDarkMode"
@@ -21,7 +22,7 @@
v-show="mode === 'date'">
</date-time-picker>
</div>
<div class="block block-outline no-margin no-padding padding-vertical-half" v-show="mode === 'time'">
<div class="block no-margin no-padding padding-vertical-half" v-show="mode === 'time'">
<div class="time-picker-container" ref="timePickerContainer">
<div class="picker picker-inline picker-3d">
<div class="picker-columns">
@@ -91,12 +92,6 @@
</div>
</div>
<input id="time-picker-input" style="display: none" type="text" :readonly="true"/>
<div class="margin-top text-align-center">
<div class="display-flex padding-horizontal justify-content-space-between">
<div class="align-self-center">{{ displayTime }}</div>
<f7-button outline :text="tt(switchButtonTitle)" @click="switchMode"></f7-button>
</div>
</div>
</f7-page-content>
</f7-sheet>
</template>
@@ -116,10 +111,7 @@ import { NumeralSystem } from '@/core/numeral.ts';
import { isDefined } from '@/lib/common.ts';
import {
getHourIn12HourFormat,
getTimezoneOffsetMinutes,
getBrowserTimezoneOffsetMinutes,
getLocalDatetimeFromUnixTime,
getActualUnixTimeForStore,
getCurrentUnixTime,
getUnixTimeFromLocalDatetime,
getAMOrPM,
@@ -141,8 +133,7 @@ const emit = defineEmits<{
const {
tt,
getCurrentNumeralSystemType,
formatUnixTimeToLongDateTime
getCurrentNumeralSystemType
} = useI18n();
const { showToast } = useI18nUIComponents();
@@ -176,9 +167,6 @@ const timePickerItemHeight = ref<number | undefined>(undefined);
const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
const numeralSystem = computed<NumeralSystem>(() => getCurrentNumeralSystemType());
const displayTime = computed<string>(() => formatUnixTimeToLongDateTime(getActualUnixTimeForStore(getUnixTimeFromLocalDatetime(dateTime.value), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes())));
const switchButtonTitle = computed<string>(() => mode.value === 'time' ? 'Date' : 'Time');
const hourItems = computed<TimePickerValue[]>(() => generateAllHours(3, isHourTwoDigits.value));
const minuteItems = computed<TimePickerValue[]>(() => generateAllMinutesOrSeconds(3, isMinuteTwoDigits.value));
const secondItems = computed<TimePickerValue[]>(() => generateAllMinutesOrSeconds(3, isSecondTwoDigits.value));

4
src/components/mobile/FiscalYearStartSelectionSheet.vue
View File

@@ -7,11 +7,11 @@
<f7-link :text="tt('Reset')" @click="reset"></f7-link>
</div>
<div class="right">
<f7-link :text="tt('Done')" @click="confirm"></f7-link>
<f7-button round fill icon-f7="checkmark_alt" @click="confirm"></f7-button>
</div>
</f7-toolbar>
<f7-page-content>
<div class="block block-outline no-margin no-padding">
<div class="block no-margin no-padding">
<date-time-picker datetime-picker-class="justify-content-center"
:is-dark-mode="isDarkMode"
:numeral-system="numeralSystem"

10
src/components/mobile/IconSelectionSheet.vue
View File

@@ -4,10 +4,10 @@
@sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<f7-toolbar>
<div class="swipe-handler"></div>
<div class="left"></div>
<div class="right">
<f7-link sheet-close :text="tt('Done')"></f7-link>
<div class="left">
<f7-link sheet-close icon-f7="xmark"></f7-link>
</div>
<div class="right"></div>
</f7-toolbar>
<f7-page-content>
<f7-block class="margin-vertical no-padding">
@@ -31,8 +31,6 @@
<script setup lang="ts">
import { ref, computed } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import type { IconInfo, IconInfoWithId } from '@/core/icon.ts';
import { arrayContainsFieldValue } from '@/lib/common.ts';
import { getIconsInRows } from '@/lib/icon.ts';
@@ -51,8 +49,6 @@ const emit = defineEmits<{
(e: 'update:show', value: boolean): void;
}>();
const { tt } = useI18n();
const currentValue = ref<string>(props.modelValue);
const itemPerRow = ref<number>(props.columnCount || 7);

2
src/components/mobile/InformationSheet.vue
View File

@@ -1,7 +1,7 @@
<template>
<f7-sheet swipe-to-close swipe-handler=".swipe-handler" style="height:auto"
:opened="show" @sheet:closed="onSheetClosed">
<div class="swipe-handler" style="z-index: 10"></div>
<div class="swipe-handler"></div>
<f7-page-content class="margin-top no-padding-top">
<div class="display-flex padding justify-content-space-between align-items-center">
<div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>

32
src/components/mobile/ListItemSelectionPopup.vue
View File

@@ -2,20 +2,14 @@
<f7-popup push :opened="show" @popup:open="onPopupOpen" @popup:closed="onPopupClosed">
<f7-page>
<f7-navbar :outline="false">
<f7-nav-left>
<f7-link popup-close icon-f7="xmark"></f7-link>
</f7-nav-left>
<f7-nav-title :title="title" v-if="title"></f7-nav-title>
<f7-nav-right>
<f7-link popup-close :text="tt('Done')"></f7-link>
</f7-nav-right>
</f7-navbar>
<f7-searchbar ref="searchbar" custom-searchs
:value="filterContent"
:placeholder="filterPlaceholder"
:disable-button="false"
v-if="enableFilter"
@input="filterContent = $event.target.value">
</f7-searchbar>
<f7-block class="no-padding">
<f7-list strong outline dividers>
<f7-block class="no-margin no-padding">
<f7-list class="no-margin" strong outline dividers>
<f7-list-item link="#" no-chevron
:title="ti((titleField ? (item as Record<string, unknown>)[titleField] : item) as string, !!titleI18n)"
:value="getItemValue(item, index, valueField, valueType)"
@@ -38,6 +32,16 @@
:title="filterNoItemsText"></f7-list-item>
</f7-list>
</f7-block>
<f7-toolbar bottom>
<f7-searchbar ref="searchbar" custom-searchs
:value="filterContent"
:placeholder="filterPlaceholder"
:disable-button="false"
v-if="enableFilter"
@input="filterContent = $event.target.value">
</f7-searchbar>
</f7-toolbar>
</f7-page>
</f7-popup>
</template>
@@ -76,7 +80,7 @@ const emit = defineEmits<{
(e: 'update:show', value: boolean): void;
}>();
const { tt, ti } = useI18n();
const { ti } = useI18n();
const searchbar = useTemplateRef<Searchbar.Searchbar>('searchbar');
@@ -177,7 +181,7 @@ function onItemClicked(item: unknown, index: number): void {
function onPopupOpen(event: { $el: Framework7Dom }): void {
currentValue.value = props.modelValue;
scrollToSelectedItem(event.$el, '.page-content', 'li.list-item-selected');
scrollToSelectedItem(event.$el, '.page-content', 'li.list-item-selected', true);
}
function onPopupClosed(): void {

7
src/components/mobile/ListItemSelectionSheet.vue
View File

@@ -4,9 +4,10 @@
@sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<f7-toolbar>
<div class="swipe-handler"></div>
<div class="right">
<f7-link sheet-close :text="tt('Done')"></f7-link>
<div class="left">
<f7-link sheet-close icon-f7="xmark"></f7-link>
</div>
<div class="right"></div>
</f7-toolbar>
<f7-page-content>
<f7-list dividers class="no-margin-vertical">
@@ -60,7 +61,7 @@ const emit = defineEmits<{
(e: 'update:show', value: boolean): void;
}>();
const { tt, ti } = useI18n();
const { ti } = useI18n();
const currentValue = ref<unknown>(props.modelValue);

43
src/components/mobile/MapSheet.vue
View File

@@ -1,20 +1,23 @@
<template>
<f7-sheet swipe-to-close swipe-handler=".swipe-handler" style="height:auto"
<f7-sheet swipe-to-close swipe-handler=".swipe-handler" class="map-sheet" style="height:auto"
:opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<f7-toolbar>
<div class="swipe-handler"></div>
<div class="left">
<f7-link :text="tt('Disable Click to Set Location')" @click="switchSetGeoLocationByClickMap(false)" v-if="!readonly && isSupportGetGeoLocationByClick() && props.setGeoLocationByClickMap"></f7-link>
<f7-link :text="tt('Enable Click to Set Location')" @click="switchSetGeoLocationByClickMap(true)" v-if="!readonly && isSupportGetGeoLocationByClick() && !props.setGeoLocationByClickMap"></f7-link>
<f7-link icon-f7="minus" :class="{ 'disabled': !map?.allowZoomOut() }" @click="map?.zoomOut()"></f7-link>
<f7-link icon-f7="plus" :class="{ 'disabled': !map?.allowZoomIn() }" @click="map?.zoomIn()"></f7-link>
</div>
<div class="right">
<f7-link :text="tt('Done')" @click="save"></f7-link>
<div class="right map-sheet-toolbar-right">
<f7-link :text="tt('Disable Click to Set Location')" @click="switchSetGeoLocationByClickMap(false)" v-if="!readonly && isSupportGetGeoLocationByClick() && props.setGeoLocationByClickMap"></f7-link>
<f7-link class="map-sheet-toolbar-auto-hidden" :text="tt('Enable Click to Set Location')" @click="switchSetGeoLocationByClickMap(true)" v-if="!readonly && isSupportGetGeoLocationByClick() && !props.setGeoLocationByClickMap"></f7-link>
</div>
</f7-toolbar>
<f7-page-content>
<map-view ref="map" height="400px" :geo-location="geoLocation" @click="updateSpecifiedGeoLocation">
<f7-page-content class="no-margin no-padding">
<map-view ref="map" height="400px"
:enable-zoom-control="false" :geo-location="geoLocation"
@click="updateSpecifiedGeoLocation">
<template #error-title="{ mapSupported, mapDependencyLoaded }">
<div class="display-flex padding justify-content-space-between align-items-center">
<div class="display-flex map-sheet-error-title padding justify-content-space-between align-items-center">
<div class="ebk-sheet-title" v-if="!mapSupported"><b>{{ tt('Unsupported Map Provider') }}</b></div>
<div class="ebk-sheet-title" v-else-if="!mapDependencyLoaded"><b>{{ tt('Cannot Initialize Map') }}</b></div>
<div class="ebk-sheet-title" v-else></div>
@@ -82,10 +85,6 @@ function switchSetGeoLocationByClickMap(value: boolean): void {
emit('update:setGeoLocationByClickMap', value);
}
function save(): void {
emit('update:show', false);
}
function close(): void {
emit('update:show', false);
}
@@ -100,3 +99,23 @@ function onSheetClosed(): void {
close();
}
</script>
<style>
.map-sheet .map-sheet-error-title {
margin-top: var(--f7-toolbar-height);
}
.map-sheet .map-sheet-toolbar-right {
overflow: hidden;
.map-sheet-toolbar-auto-hidden {
overflow: hidden;
> span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
</style>

2
src/components/mobile/MonthRangeSelectionSheet.vue
View File

@@ -1,7 +1,7 @@
<template>
<f7-sheet swipe-to-close swipe-handler=".swipe-handler" class="month-range-selection-sheet" style="height:auto"
:opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<div class="swipe-handler" style="z-index: 10"></div>
<div class="swipe-handler"></div>
<f7-page-content>
<div class="display-flex padding justify-content-space-between align-items-center">
<div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>

2
src/components/mobile/MonthSelectionSheet.vue
View File

@@ -1,7 +1,7 @@
<template>
<f7-sheet swipe-to-close swipe-handler=".swipe-handler" class="month-selection-sheet" style="height:auto"
:opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<div class="swipe-handler" style="z-index: 10"></div>
<div class="swipe-handler"></div>
<f7-page-content>
<div class="display-flex padding justify-content-space-between align-items-center">
<div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>

10
src/components/mobile/NumberPadSheet.vue
View File

@@ -1,7 +1,7 @@
<template>
<f7-sheet swipe-to-close swipe-handler=".swipe-handler" class="numpad-sheet" style="height: auto"
:opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<div class="swipe-handler" style="z-index: 10"></div>
<div class="swipe-handler"></div>
<f7-page-content class="margin-top no-padding-top">
<div class="margin-top padding-horizontal" v-if="hint">
<span>{{ hint }}</span>
@@ -111,6 +111,7 @@ const isSupportClipboard = !!navigator.clipboard;
const previousValue = ref<string>('');
const currentSymbol = ref<string>('');
const currentValue = ref<string>(getInitedStringValue(props.modelValue, props.flipNegative));
const pasteingAmount = ref<boolean>(false);
const numeralSystem = computed<NumeralSystem>(() => getCurrentNumeralSystemType());
@@ -316,11 +317,16 @@ function clear(): void {
}
function paste(): void {
if (!isiOS() || !isSupportClipboard) {
if (!isiOS() || !isSupportClipboard || pasteingAmount.value) {
pasteingAmount.value = false;
return;
}
pasteingAmount.value = true;
navigator.clipboard.readText().then(text => {
pasteingAmount.value = false;
if (!text) {
return;
}

2
src/components/mobile/PasscodeInputSheet.vue
View File

@@ -1,7 +1,7 @@
<template>
<f7-sheet swipe-to-close swipe-handler=".swipe-handler" style="height:auto"
:opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<div class="swipe-handler" style="z-index: 10"></div>
<div class="swipe-handler"></div>
<f7-page-content class="margin-top no-padding-top">
<div class="display-flex padding justify-content-space-between align-items-center">
<div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>

2
src/components/mobile/PasswordInputSheet.vue
View File

@@ -1,7 +1,7 @@
<template>
<f7-sheet swipe-to-close swipe-handler=".swipe-handler" style="height:auto"
:opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<div class="swipe-handler" style="z-index: 10"></div>
<div class="swipe-handler"></div>
<f7-page-content class="margin-top no-padding-top">
<div class="display-flex padding justify-content-space-between align-items-center">
<div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>

2
src/components/mobile/PinCodeInputSheet.vue
View File

@@ -1,7 +1,7 @@
<template>
<f7-sheet swipe-to-close swipe-handler=".swipe-handler" style="height:auto"
:opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<div class="swipe-handler" style="z-index: 10"></div>
<div class="swipe-handler"></div>
<f7-page-content class="margin-top no-padding-top">
<div class="display-flex padding justify-content-space-between align-items-center">
<div class="ebk-sheet-title"><b>{{ title }}</b></div>

4
src/components/mobile/ScheduleFrequencySheet.vue
View File

@@ -4,10 +4,10 @@
<f7-toolbar>
<div class="swipe-handler"></div>
<div class="left">
<f7-link sheet-close :text="tt('Cancel')"></f7-link>
<f7-link sheet-close icon-f7="xmark"></f7-link>
</div>
<div class="right">
<f7-link :text="tt('Done')" @click="save"></f7-link>
<f7-button round fill icon-f7="checkmark_alt" @click="save"></f7-button>
</div>
</f7-toolbar>
<f7-page-content>

9
src/components/mobile/TransactionTagSelectionSheet.vue
View File

@@ -5,12 +5,13 @@
<f7-toolbar>
<div class="swipe-handler"></div>
<div class="left">
<f7-link sheet-close :text="tt('Cancel')"></f7-link>
<f7-link sheet-close icon-f7="xmark"></f7-link>
</div>
<div class="right">
<f7-link :text="tt('Done')" v-if="allTags && allTags.length && !noAvailableTag" @click="save"></f7-link>
<f7-link :class="{'disabled': newTag}"
:text="tt('Add')" v-if="!allTags || !allTags.length || noAvailableTag" @click="addNewTag"></f7-link>
<f7-button round fill icon-f7="checkmark_alt" @click="save"
v-if="allTags && allTags.length && !noAvailableTag"></f7-button>
<f7-link icon-f7="plus" :class="{'disabled': newTag}" @click="addNewTag"
v-if="!allTags || !allTags.length || noAvailableTag"></f7-link>
</div>
</f7-toolbar>
<f7-page-content :class="heightClass">

11
src/components/mobile/TreeViewSelectionSheet.vue
View File

@@ -3,12 +3,7 @@
style="height: auto" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<f7-toolbar>
<div class="swipe-handler"></div>
<div class="right">
<f7-link sheet-close :text="tt('Done')"></f7-link>
</div>
</f7-toolbar>
<f7-page-content :class="heightClass">
<f7-searchbar ref="searchbar" custom-searchs
<f7-searchbar ref="searchbar" class="margin-top" custom-searchs
:value="filterContent"
:placeholder="filterPlaceholder"
:disable-button="false"
@@ -16,6 +11,8 @@
@input="filterContent = $event.target.value"
@focus="onSearchBarFocus">
</f7-searchbar>
</f7-toolbar>
<f7-page-content :class="'margin-top ' + heightClass">
<f7-list class="no-margin-top no-margin-bottom" v-if="!filteredItems || !filteredItems.length">
<f7-list-item :title="filterNoItemsText"></f7-list-item>
</f7-list>
@@ -67,7 +64,7 @@ const emit = defineEmits<{
(e: 'update:show', value: boolean): void;
}>();
const { tt, ti } = useI18n();
const { ti } = useI18n();
const {
filterContent,

12
src/components/mobile/TwoColumnListItemSelectionSheet.vue
View File

@@ -3,13 +3,7 @@
style="height: auto" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<f7-toolbar>
<div class="swipe-handler"></div>
<div class="left"></div>
<div class="right">
<f7-link sheet-close :text="tt('Done')"></f7-link>
</div>
</f7-toolbar>
<f7-page-content>
<f7-searchbar ref="searchbar" custom-searchs
<f7-searchbar ref="searchbar" class="margin-top" custom-searchs
:value="filterContent"
:placeholder="filterPlaceholder"
:disable-button="false"
@@ -17,6 +11,8 @@
@input="filterContent = $event.target.value"
@focus="onSearchBarFocus">
</f7-searchbar>
</f7-toolbar>
<f7-page-content class="margin-top">
<div class="grid grid-gap" :class="{ 'grid-cols-2': filteredItems && filteredItems.length }">
<div>
<div class="primary-list-container">
@@ -89,7 +85,7 @@ const emit = defineEmits<{
(e: 'update:show', value: boolean): void;
}>();
const { tt, ti } = useI18n();
const { ti } = useI18n();
const {
filterContent,

90
src/lib/map/amap.ts
View File

@@ -1,8 +1,9 @@
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck
import type { Coordinate } from '@/core/coordinate.ts';
import type { MapProvider, MapInstance, MapInstanceInitOptions } from './base.ts';
import type { MapProvider, MapInstance, MapCreateOptions, MapInstanceInitOptions } from './base.ts';
import { isFunction, isArray } from '@/lib/common.ts';
import { asyncLoadAssets } from '@/lib/misc.ts';
import services from '@/lib/services.ts';
import {
@@ -13,6 +14,7 @@ import {
import logger from '@/lib/logger.ts';
export class AmapMapProvider implements MapProvider {
// https://lbs.amap.com/api/javascript-api-v2/documentation
public static AMap: unknown = null;
public getWebsite(): string {
@@ -52,8 +54,8 @@ export class AmapMapProvider implements MapProvider {
return asyncLoadAssets('js', services.generateAmapJavascriptUrl('onAMapCallback'));
}
public createMapInstance(): MapInstance | null {
return new AmapMapInstance();
public createMapInstance(options: MapCreateOptions): MapInstance | null {
return new AmapMapInstance(options);
}
}
@@ -61,16 +63,19 @@ export class AmapMapInstance implements MapInstance {
public dependencyLoaded: boolean = false;
public inited: boolean = false;
public readonly defaultZoomLevel: number = 14;
public readonly minZoomLevel: number = 1;
private readonly defaultZoomLevel: number = 14;
private readonly minZoomLevel: number = 2;
private readonly maxZoomLevel: number = 19;
private readonly mapCreateOptions: MapCreateOptions;
private amapInstance: unknown = null;
private amapToolbar: unknown = null;
private amapCenterPosition: unknown = null;
private amapCenterMarker: unknown | null;
public constructor() {
public constructor(options: MapCreateOptions) {
this.dependencyLoaded = !!AmapMapProvider.AMap;
this.mapCreateOptions = options;
}
public initMapInstance(mapContainer: HTMLElement, options: MapInstanceInitOptions): void {
@@ -86,10 +91,12 @@ export class AmapMapInstance implements MapInstance {
jogEnable: false
});
const amapToolbar = new AMap.ToolBar({
position: 'LT'
});
amapInstance.addControl(amapToolbar);
if (this.mapCreateOptions.enableZoomControl) {
this.amapToolbar = new AMap.ToolBar({
position: 'LT'
});
amapInstance.addControl(this.amapToolbar);
}
amapInstance.on('click', function(e) {
if (options.onClick) {
@@ -100,11 +107,56 @@ export class AmapMapInstance implements MapInstance {
}
});
amapInstance.on('zoomend', function() {
if (options.onZoomChange && isFunction(amapInstance.getZoom)) {
options.onZoomChange(amapInstance.getZoom());
}
});
this.amapInstance = amapInstance;
this.amapToolbar = amapToolbar;
this.inited = true;
}
public getDefaultZoomLevel(): number {
return this.defaultZoomLevel;
}
public getMinZoomLevel(): number {
if (!this.amapInstance || !isFunction(this.amapInstance.getZooms)) {
return this.minZoomLevel;
}
const zooms = this.amapInstance.getZooms();
if (!zooms || !isArray(zooms) || zooms.length !== 2) {
return this.minZoomLevel;
}
return zooms[0];
}
public getMaxZoomLevel(): number {
if (!this.amapInstance || !isFunction(this.amapInstance.getZooms)) {
return this.maxZoomLevel;
}
const zooms = this.amapInstance.getZooms();
if (!zooms || !isArray(zooms) || zooms.length !== 2) {
return this.maxZoomLevel;
}
return zooms[1];
}
public getZoomLevel(): number {
if (!this.amapInstance || !isFunction(this.amapInstance.getZoom)) {
return this.defaultZoomLevel;
}
return this.amapInstance?.getZoom() ?? this.defaultZoomLevel;
}
public setMapCenterTo(center: Coordinate, zoomLevel: number): void {
if (!AmapMapProvider.AMap || !this.amapInstance) {
return;
@@ -187,6 +239,22 @@ export class AmapMapInstance implements MapInstance {
this.amapCenterMarker = null;
}
public zoomIn(): void {
if (!this.amapInstance) {
return;
}
this.amapInstance.zoomIn();
}
public zoomOut(): void {
if (!this.amapInstance) {
return;
}
this.amapInstance.zoomOut();
}
private setMaker(point: unknown): void {
if (!AmapMapProvider.AMap || !this.amapInstance) {
return;

93
src/lib/map/baidumap.ts
View File

@@ -1,13 +1,15 @@
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck
import type { Coordinate } from '@/core/coordinate.ts';
import type { MapProvider, MapInstance, MapInstanceInitOptions } from './base.ts';
import type { MapProvider, MapInstance, MapCreateOptions, MapInstanceInitOptions } from './base.ts';
import { isFunction } from '@/lib/common.ts';
import { asyncLoadAssets } from '@/lib/misc.ts';
import services from '@/lib/services.ts';
import logger from '@/lib/logger.ts';
export class BaiduMapProvider implements MapProvider {
// https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_reference_3_0.html
public static BMap: unknown = null;
public static BMAP_NAVIGATION_CONTROL_ZOOM: unknown = window.BMAP_NAVIGATION_CONTROL_ZOOM || 3;
public static BMAP_ANCHOR_TOP_LEFT: unknown = window.BMAP_ANCHOR_TOP_LEFT || 0;
@@ -41,8 +43,8 @@ export class BaiduMapProvider implements MapProvider {
return asyncLoadAssets('js', services.generateBaiduMapJavascriptUrl('onBMapCallback'));
}
public createMapInstance(): MapInstance | null {
return new BaiduMapInstance();
public createMapInstance(options: MapCreateOptions): MapInstance | null {
return new BaiduMapInstance(options);
}
}
@@ -50,17 +52,20 @@ export class BaiduMapInstance implements MapInstance {
public dependencyLoaded: boolean = false;
public inited: boolean = false;
public readonly defaultZoomLevel: number = 15;
public readonly minZoomLevel: number = 1;
private readonly defaultZoomLevel: number = 15;
private readonly minZoomLevel: number = 4;
private readonly maxZoomLevel: number = 19;
private readonly mapCreateOptions: MapCreateOptions;
private baiduMapInstance: unknown = null;
private baiduMapConverter: unknown = null;
private baiduMapNavigationControl: unknown = null;
private baiduMapCenterPosition: unknown = null;
private baiduMapCenterMarker: unknown | null;
public constructor() {
public constructor(options: MapCreateOptions) {
this.dependencyLoaded = !!BaiduMapProvider.BMap;
this.mapCreateOptions = options;
}
public initMapInstance(mapContainer: HTMLElement, options: MapInstanceInitOptions): void {
@@ -74,11 +79,14 @@ export class BaiduMapInstance implements MapInstance {
});
baiduMapInstance.enableScrollWheelZoom();
const baiduMapNavigationControl = new BMap.NavigationControl({
type: BaiduMapProvider.BMAP_NAVIGATION_CONTROL_ZOOM,
anchor: BaiduMapProvider.BMAP_ANCHOR_TOP_LEFT
});
baiduMapInstance.addControl(baiduMapNavigationControl);
if (this.mapCreateOptions.enableZoomControl) {
this.baiduMapNavigationControl = new BMap.NavigationControl({
type: BaiduMapProvider.BMAP_NAVIGATION_CONTROL_ZOOM,
anchor: BaiduMapProvider.BMAP_ANCHOR_TOP_LEFT
});
baiduMapInstance.addControl(this.baiduMapNavigationControl);
}
baiduMapInstance.centerAndZoom(new BMap.Point(options.initCenter.longitude, options.initCenter.latitude), options.zoomLevel);
baiduMapInstance.addEventListener('click', function(e) {
@@ -90,12 +98,57 @@ export class BaiduMapInstance implements MapInstance {
}
});
baiduMapInstance.addEventListener('zoomend', function() {
if (options.onZoomChange && isFunction(baiduMapInstance.getZoom)) {
options.onZoomChange(baiduMapInstance.getZoom());
}
});
this.baiduMapInstance = baiduMapInstance;
this.baiduMapConverter = new BMap.Convertor();
this.baiduMapNavigationControl = baiduMapNavigationControl;
this.inited = true;
}
public getDefaultZoomLevel(): number {
return this.defaultZoomLevel;
}
public getMinZoomLevel(): number {
if (!this.baiduMapInstance || !isFunction(this.baiduMapInstance.getMapType)) {
return this.minZoomLevel;
}
const mapType = this.baiduMapInstance.getMapType();
if (!mapType || !isFunction(mapType.getMinZoom)) {
return this.minZoomLevel;
}
return mapType.getMinZoom() ?? this.minZoomLevel;
}
public getMaxZoomLevel(): number {
if (!this.baiduMapInstance || !isFunction(this.baiduMapInstance.getMapType)) {
return this.maxZoomLevel;
}
const mapType = this.baiduMapInstance.getMapType();
if (!mapType || !isFunction(mapType.getMaxZoom)) {
return this.maxZoomLevel;
}
return mapType.getMaxZoom() ?? this.maxZoomLevel;
}
public getZoomLevel(): number {
if (!this.baiduMapInstance || !isFunction(this.baiduMapInstance.getZoom)) {
return this.defaultZoomLevel;
}
return this.baiduMapInstance.getZoom() ?? this.defaultZoomLevel;
}
public setMapCenterTo(center: Coordinate, zoomLevel: number): void {
if (!BaiduMapProvider.BMap || !this.baiduMapInstance) {
return;
@@ -186,6 +239,22 @@ export class BaiduMapInstance implements MapInstance {
this.baiduMapCenterMarker = null;
}
public zoomIn(): void {
if (!this.baiduMapInstance) {
return;
}
this.baiduMapInstance.zoomIn();
}
public zoomOut(): void {
if (!this.baiduMapInstance) {
return;
}
this.baiduMapInstance.zoomOut();
}
private setMaker(point: unknown): void {
if (!BaiduMapProvider.BMap || !this.baiduMapInstance) {
return;

15
src/lib/map/base.ts
View File

@@ -4,18 +4,26 @@ export interface MapProvider {
getWebsite(): string;
isSupportGetGeoLocationByClick(): boolean;
asyncLoadAssets(language?: string): Promise<unknown>;
createMapInstance(): MapInstance | null;
createMapInstance(options: MapCreateOptions): MapInstance | null;
}
export interface MapInstance {
dependencyLoaded: boolean;
inited: boolean;
readonly defaultZoomLevel: number;
readonly minZoomLevel: number;
initMapInstance(mapContainer: HTMLElement, options: MapInstanceInitOptions): void;
getDefaultZoomLevel(): number;
getMinZoomLevel(): number;
getMaxZoomLevel(): number;
getZoomLevel(): number;
setMapCenterTo(center: Coordinate, zoomLevel: number): void;
setMapCenterMarker(position: Coordinate): void;
removeMapCenterMarker(): void;
zoomIn(): void;
zoomOut(): void;
}
export interface MapCreateOptions {
readonly enableZoomControl?: boolean;
}
export interface MapInstanceInitOptions {
@@ -27,4 +35,5 @@ export interface MapInstanceInitOptions {
readonly zoomOut: string;
};
readonly onClick?: (position: Coordinate) => void;
readonly onZoomChange?: (level: number) => void;
}

71
src/lib/map/googlemap.ts
View File

@@ -1,12 +1,14 @@
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck
import type { Coordinate } from '@/core/coordinate.ts';
import type { MapProvider, MapInstance, MapInstanceInitOptions } from './base.ts';
import type { MapProvider, MapInstance, MapCreateOptions, MapInstanceInitOptions } from './base.ts';
import { isFunction } from '@/lib/common.ts';
import { asyncLoadAssets } from '@/lib/misc.ts';
import services from '@/lib/services.ts';
export class GoogleMapProvider implements MapProvider {
// https://developers.google.com/maps/documentation/javascript/reference/map
public static GoogleMap: unknown = null;
public static ControlPosition = {
LEFT_TOP: (window.google && window.google.maps && window.google.maps.ControlPosition) ? window.google.maps.ControlPosition.LEFT_TOP : 5
@@ -37,8 +39,8 @@ export class GoogleMapProvider implements MapProvider {
return asyncLoadAssets('js', services.generateGoogleMapJavascriptUrl(language, 'onGoogleMapCallback'));
}
public createMapInstance(): MapInstance | null {
return new GoogleMapInstance();
public createMapInstance(options: MapCreateOptions): MapInstance | null {
return new GoogleMapInstance(options);
}
}
@@ -46,14 +48,17 @@ export class GoogleMapInstance implements MapInstance {
public dependencyLoaded: boolean = false;
public inited: boolean = false;
public readonly defaultZoomLevel: number = 14;
public readonly minZoomLevel: number = 1;
private readonly defaultZoomLevel: number = 14;
private readonly minZoomLevel: number = 0;
private readonly maxZoomLevel: number = 19;
private readonly mapCreateOptions: MapCreateOptions;
private googleMapInstance: unknown = null;
private googleMapCenterMarker: unknown | null;
public constructor() {
public constructor(options: MapCreateOptions) {
this.dependencyLoaded = !!GoogleMapProvider.GoogleMap;
this.mapCreateOptions = options;
}
public initMapInstance(mapContainer: HTMLElement, options: MapInstanceInitOptions): void {
@@ -62,27 +67,26 @@ export class GoogleMapInstance implements MapInstance {
}
const googleMap = GoogleMapProvider.GoogleMap;
this.googleMapInstance = new googleMap.Map(mapContainer, {
const googleMapInstance = new googleMap.Map(mapContainer, {
zoom: options.zoomLevel,
center: {
lat: options.initCenter.latitude,
lng: options.initCenter.longitude
},
maxZoom: 19,
zoomControl: true,
zoomControl: !!this.mapCreateOptions.enableZoomControl,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
fullscreenControl: false,
gestureHandling: 'greedy',
zoomControlOptions: {
zoomControlOptions: this.mapCreateOptions.enableZoomControl ? {
position: GoogleMapProvider.ControlPosition.LEFT_TOP
}
} : undefined
});
this.googleMapInstance.addListener('click', function(e) {
googleMapInstance.addListener('click', function(e) {
if (options.onClick) {
options.onClick({
latitude: e.latLng.lat(),
@@ -91,9 +95,36 @@ export class GoogleMapInstance implements MapInstance {
}
});
googleMapInstance.addListener('zoom_changed', function() {
if (options.onZoomChange && isFunction(googleMapInstance.getZoom)) {
options.onZoomChange(googleMapInstance.getZoom());
}
});
this.googleMapInstance = googleMapInstance;
this.inited = true;
}
public getDefaultZoomLevel(): number {
return this.defaultZoomLevel;
}
public getMinZoomLevel(): number {
return this.minZoomLevel;
}
public getMaxZoomLevel(): number {
return this.maxZoomLevel;
}
public getZoomLevel(): number {
if (!this.googleMapInstance || !isFunction(this.googleMapInstance.getZoom)) {
return this.defaultZoomLevel;
}
return this.googleMapInstance.getZoom() ?? this.defaultZoomLevel;
}
public setMapCenterTo(center: Coordinate, zoomLevel: number): void {
if (!GoogleMapProvider.GoogleMap || !this.googleMapInstance) {
return;
@@ -129,6 +160,22 @@ export class GoogleMapInstance implements MapInstance {
}
}
public zoomIn(): void {
if (!this.googleMapInstance) {
return;
}
this.googleMapInstance.setZoom(this.googleMapInstance.getZoom() + 1);
}
public zoomOut(): void {
if (!this.googleMapInstance) {
return;
}
this.googleMapInstance.setZoom(this.googleMapInstance.getZoom() - 1);
}
public removeMapCenterMarker(): void {
if (!this.googleMapInstance || !this.googleMapCenterMarker) {
return;

6
src/lib/map/index.ts
View File

@@ -1,7 +1,7 @@
import { LEAFLET_TILE_SOURCES } from '@/consts/map.ts';
import { getMapProvider } from '@/lib/server_settings.ts';
import type { MapProvider, MapInstance } from './base.ts';
import type { MapProvider, MapInstance, MapCreateOptions } from './base.ts';
import { LeafletMapProvider } from './leaflet.ts';
import { GoogleMapProvider } from './googlemap.ts';
import { BaiduMapProvider } from './baidumap.ts';
@@ -35,6 +35,6 @@ export function isSupportGetGeoLocationByClick(): boolean {
return mapProvider?.isSupportGetGeoLocationByClick() || false;
}
export function createMapInstance(): MapInstance | null {
return mapProvider?.createMapInstance() || null;
export function createMapInstance(options: MapCreateOptions): MapInstance | null {
return mapProvider?.createMapInstance(options) || null;
}

73
src/lib/map/leaflet.ts
View File

@@ -4,8 +4,9 @@ import type { Coordinate } from '@/core/coordinate.ts';
import { type LeafletTileSource, type LeafletTileSourceExtraParam, LEAFLET_TILE_SOURCES } from '@/consts/map.ts';
import type { MapProvider, MapInstance, MapInstanceInitOptions } from './base.ts';
import type { MapProvider, MapInstance, MapCreateOptions, MapInstanceInitOptions } from './base.ts';
import { isFunction, isNumber } from '@/lib/common.ts';
import {
isMapDataFetchProxyEnabled,
getCustomMapTileLayerUrl,
@@ -20,6 +21,7 @@ import {
import services from '@/lib/services.ts';
export class LeafletMapProvider implements MapProvider {
// https://leafletjs.com/reference.html#pan-options
public static Leaflet: unknown = null;
private readonly mapProvider: string;
@@ -49,14 +51,14 @@ export class LeafletMapProvider implements MapProvider {
]);
}
public createMapInstance(): MapInstance | null {
public createMapInstance(options: MapCreateOptions): MapInstance | null {
const mapTileSource = LEAFLET_TILE_SOURCES[this.mapProvider];
if (this.mapProvider !== 'custom' && !mapTileSource) {
return null;
}
return new LeafletMapInstance(this.mapProvider, mapTileSource);
return new LeafletMapInstance(this.mapProvider, mapTileSource, options);
}
}
@@ -64,11 +66,13 @@ export class LeafletMapInstance implements MapInstance {
public dependencyLoaded: boolean = false;
public inited: boolean = false;
public readonly defaultZoomLevel: number;
public readonly minZoomLevel: number;
private readonly defaultZoomLevel: number;
private readonly minZoomLevel: number;
private readonly maxZoomLevel: number;
private readonly mapProvider: string;
private readonly presetMapTileSource: LeafletTileSource;
private readonly mapCreateOptions: MapCreateOptions;
private leafletInstance: unknown | null;
private leafletTileLayer: unknown | null;
@@ -77,14 +81,16 @@ export class LeafletMapInstance implements MapInstance {
private leafletAttribution: unknown | null;
private leafletCenterMarker: unknown | null;
public constructor(mapProvider: string, mapTileSource: LeafletTileSource) {
public constructor(mapProvider: string, mapTileSource: LeafletTileSource, options: MapCreateOptions) {
this.dependencyLoaded = !!LeafletMapProvider.Leaflet;
this.mapProvider = mapProvider;
this.presetMapTileSource = mapTileSource;
this.mapCreateOptions = options;
this.defaultZoomLevel = this.presetMapTileSource?.defaultZoomLevel || getCustomMapDefaultZoomLevel();
this.minZoomLevel = this.presetMapTileSource?.minZoom || getCustomMapMinZoomLevel();
this.maxZoomLevel = this.presetMapTileSource?.maxZoom || getCustomMapMaxZoomLevel();
}
public initMapInstance(mapContainer: HTMLElement, options: MapInstanceInitOptions): void {
@@ -149,11 +155,13 @@ export class LeafletMapInstance implements MapInstance {
this.leafletAnnotationLayer = annotationLayer;
}
const zoomControl = leaflet.control.zoom({
zoomInTitle: options.text.zoomIn,
zoomOutTitle: options.text.zoomOut
});
zoomControl.addTo(leafletInstance);
if (this.mapCreateOptions.enableZoomControl) {
this.leafletZoomControl = leaflet.control.zoom({
zoomInTitle: options.text.zoomIn,
zoomOutTitle: options.text.zoomOut
});
this.leafletZoomControl.addTo(leafletInstance);
}
if (this.presetMapTileSource && this.presetMapTileSource.attribution) {
const attribution = leaflet.control.attribution({
@@ -173,12 +181,37 @@ export class LeafletMapInstance implements MapInstance {
}
});
leafletInstance.addEventListener('zoomanim', function(e) {
if (options.onZoomChange && 'zoom' in e && isNumber(e.zoom)) {
options.onZoomChange(e.zoom);
}
});
this.leafletInstance = leafletInstance;
this.leafletTileLayer = tileLayer;
this.leafletZoomControl = zoomControl;
this.inited = true;
}
public getDefaultZoomLevel(): number {
return this.defaultZoomLevel;
}
public getMinZoomLevel(): number {
return this.minZoomLevel;
}
public getMaxZoomLevel(): number {
return this.maxZoomLevel;
}
public getZoomLevel(): number {
if (!this.leafletInstance || !isFunction(this.leafletInstance.getZoom)) {
return this.defaultZoomLevel;
}
return this.leafletInstance.getZoom() ?? this.defaultZoomLevel;
}
public setMapCenterTo(center: Coordinate, zoomLevel: number): void {
if (!this.leafletInstance) {
return;
@@ -221,6 +254,22 @@ export class LeafletMapInstance implements MapInstance {
this.leafletCenterMarker = null;
}
public zoomIn(): void {
if (!this.leafletInstance) {
return;
}
this.leafletInstance.zoomIn();
}
public zoomOut(): void {
if (!this.leafletInstance) {
return;
}
this.leafletInstance.zoomOut();
}
private getFinalUrlFormat(urlFormat: string, urlExtraParams: LeafletTileSourceExtraParam[], options: MapInstanceInitOptions) {
const params: string[] = [];

7
src/lib/ui/mobile.ts
View File

@@ -138,7 +138,7 @@ export function getElementBoundingRect(selector: string): DOMRect | null {
return el.getBoundingClientRect();
}
export function scrollToSelectedItem(parentEl: Framework7Dom, containerSelector: string, selectedItemSelector: string): void {
export function scrollToSelectedItem(parentEl: Framework7Dom, containerSelector: string, selectedItemSelector: string, hasBottomToolbar?: boolean): void {
if (!parentEl || !parentEl.length) {
return;
}
@@ -175,6 +175,11 @@ export function scrollToSelectedItem(parentEl: Framework7Dom, containerSelector:
return;
}
if (hasBottomToolbar) {
const toolbarHeight = parentEl.find('.toolbar.toolbar-bottom').outerHeight() || 0;
targetPos += toolbarHeight / 2;
}
container.scrollTop(targetPos);
}

2
src/styles/mobile/font-size-default.scss
View File

@@ -7,7 +7,7 @@
--f7-searchbar-input-height: 44px;
--f7-toolbar-font-size: 17px;
--f7-tabbar-icon-size: 28px;
--f7-tabbar-icons-height: 80px;
--f7-tabbar-icons-height: 64px;
--f7-tabbar-label-font-size: 12px;
--f7-label-font-size: 12px;
--f7-label-height: 16px;

2
src/styles/mobile/font-size-large.scss
View File

@@ -7,7 +7,7 @@
--f7-searchbar-input-height: 44px;
--f7-toolbar-font-size: 18px;
--f7-tabbar-icon-size: 29px;
--f7-tabbar-icons-height: 80px;
--f7-tabbar-icons-height: 66px;
--f7-tabbar-label-font-size: 13px;
--f7-label-font-size: 13px;
--f7-label-height: 16px;

2
src/styles/mobile/font-size-small.scss
View File

@@ -7,7 +7,7 @@
--f7-searchbar-input-height: 44px;
--f7-toolbar-font-size: 16px;
--f7-tabbar-icon-size: 28px;
--f7-tabbar-icons-height: 80px;
--f7-tabbar-icons-height: 62px;
--f7-tabbar-label-font-size: 12px;
--f7-label-font-size: 12px;
--f7-label-height: 16px;

2
src/styles/mobile/font-size-x-large.scss
View File

@@ -7,7 +7,7 @@
--f7-searchbar-input-height: 44px;
--f7-toolbar-font-size: 19px;
--f7-tabbar-icon-size: 30px;
--f7-tabbar-icons-height: 84px;
--f7-tabbar-icons-height: 68px;
--f7-tabbar-label-font-size: 14px;
--f7-label-font-size: 14px;
--f7-label-height: 16px;

2
src/styles/mobile/font-size-xx-large.scss
View File

@@ -7,7 +7,7 @@
--f7-searchbar-input-height: 46px;
--f7-toolbar-font-size: 20px;
--f7-tabbar-icon-size: 32px;
--f7-tabbar-icons-height: 92px;
--f7-tabbar-icons-height: 74px;
--f7-tabbar-label-font-size: 17px;
--f7-label-font-size: 16px;
--f7-label-height: 18px;

2
src/styles/mobile/font-size-xxx-large.scss
View File

@@ -7,7 +7,7 @@
--f7-searchbar-input-height: 48px;
--f7-toolbar-font-size: 22px;
--f7-tabbar-icon-size: 34px;
--f7-tabbar-icons-height: 96px;
--f7-tabbar-icons-height: 78px;
--f7-tabbar-label-font-size: 19px;
--f7-label-font-size: 18px;
--f7-label-height: 20px;

2
src/styles/mobile/font-size-xxxx-large.scss
View File

@@ -7,7 +7,7 @@
--f7-searchbar-input-height: 50px;
--f7-toolbar-font-size: 24px;
--f7-tabbar-icon-size: 36px;
--f7-tabbar-icons-height: 100px;
--f7-tabbar-icons-height: 82px;
--f7-tabbar-label-font-size: 21px;
--f7-label-font-size: 20px;
--f7-label-height: 22px;

42
src/styles/mobile/global.scss
View File

@@ -139,6 +139,12 @@ i.icon.la, i.icon.las, i.icon.lab {
opacity: 0.55 !important;
}
.item-input.item-input-outline {
> .item-inner {
min-height: calc(var(--f7-input-height) + 6px);
}
}
/** custom class **/
:root {
--default-icon-color: #000;
@@ -298,10 +304,24 @@ html[dir="rtl"] i.icon.icon-with-direction {
/** Replacing the default style of @vuepic/vue-datepicker **/
.dp__theme_light {
--dp-primary-color: #c67e48;
--dp-background-color: inherit;
--dp-border-color: #aaa;
--dp-menu-border-color: #aaa;
.dp__overlay {
--dp-background-color: #e1e1e2;
}
}
.dp__theme_dark {
--dp-primary-color: #c67e48;
--dp-background-color: inherit;
--dp-border-color: #555;
--dp-menu-border-color: #555;
.dp__overlay {
--dp-background-color: #1f1f1f;
}
}
/** Common class for replacing the default style of framework7 **/
@@ -314,11 +334,12 @@ html[dir="rtl"] i.icon.icon-with-direction {
background-color: inherit;
}
.toolbar-inner {
gap: 2px !important;
.toolbar.toolbar-bottom .toolbar-inner {
padding-bottom: 0 !important;
gap: 2px;
> .link {
padding: 0 !important;
padding: 0;
}
}
@@ -326,7 +347,7 @@ html[dir="rtl"] i.icon.icon-with-direction {
padding-inline-start: 16px;
padding-inline-end: 16px;
justify-content: space-between;
gap: 4px !important;
gap: 4px;
}
.toolbar-item-auto-size .toolbar-inner > .link {
@@ -566,6 +587,7 @@ html[dir="rtl"] .icon.las .badge.right-bottom-icon {
width: 100%;
top: 0;
cursor: pointer;
z-index: 10;
}
.swipe-handler:after {
@@ -765,18 +787,6 @@ html[dir="rtl"] .combination-list-wrapper .list.combination-list-header .combina
}
/** Fix @vuepic/vue-datepicker style issue **/
.dp__theme_light {
--dp-background-color: inherit;
--dp-border-color: #aaa;
--dp-menu-border-color: #aaa;
}
.dp__theme_dark {
--dp-background-color: inherit;
--dp-border-color: #555;
--dp-menu-border-color: #555;
}
.dp__main.dp__flex_display {
flex-direction: column;
}

4
src/views/desktop/transactions/list/dialogs/EditDialog.vue
View File

@@ -393,7 +393,9 @@
<v-window-item value="map">
<v-row>
<v-col cols="12" md="12">
<map-view ref="map" map-class="transaction-edit-map-view" :geo-location="transaction.geoLocation" @click="updateSpecifiedGeoLocation">
<map-view ref="map" map-class="transaction-edit-map-view"
:enable-zoom-control="true" :geo-location="transaction.geoLocation"
@click="updateSpecifiedGeoLocation">
<template #error-title="{ mapSupported, mapDependencyLoaded }">
<span class="text-subtitle-1" v-if="!mapSupported"><b>{{ tt('Unsupported Map Provider') }}</b></span>
<span class="text-subtitle-1" v-else-if="!mapDependencyLoaded"><b>{{ tt('Cannot Initialize Map') }}</b></span>

2
src/views/mobile/AboutPage.vue
View File

@@ -37,7 +37,7 @@
<f7-popup push swipe-to-close swipe-handler=".swipe-handler" class="license-popup">
<f7-page>
<f7-navbar>
<div class="swipe-handler" style="z-index: 10"></div>
<div class="swipe-handler"></div>
<f7-nav-title class="license-title">{{ tt('License') }}</f7-nav-title>
</f7-navbar>
<f7-block strong outline class="license-content no-margin-top">

2
src/views/mobile/LoginPage.vue
View File

@@ -135,7 +135,7 @@
style="height:auto"
:opened="showForgetPasswordSheet" @sheet:closed="showForgetPasswordSheet = false"
>
<div class="swipe-handler" style="z-index: 10"></div>
<div class="swipe-handler"></div>
<f7-page-content>
<div class="display-flex padding justify-content-space-between align-items-center">
<div class="ebk-sheet-title"><b>{{ tt('Forget Password?') }}</b></div>

5
src/views/mobile/accounts/EditPage.vue
View File

@@ -3,9 +3,9 @@
<f7-navbar>
<f7-nav-left :back-link="tt('Back')"></f7-nav-left>
<f7-nav-title :title="tt(title)"></f7-nav-title>
<f7-nav-right>
<f7-nav-right class="navbar-compact-icons">
<f7-link icon-f7="ellipsis" :class="{ 'disabled': account.type !== AccountType.MultiSubAccounts.type }" @click="showMoreActionSheet = true"></f7-link>
<f7-link :class="{ 'disabled': inputIsEmpty || submitting }" :text="tt(saveButtonTitle)" @click="save"></f7-link>
<f7-link icon-f7="checkmark_alt" :class="{ 'disabled': inputIsEmpty || submitting }" @click="save"></f7-link>
</f7-nav-right>
</f7-navbar>
@@ -576,7 +576,6 @@ const {
account,
subAccounts,
title,
saveButtonTitle,
inputEmptyProblemMessage,
inputIsEmpty,
allAccountCategories,

2
src/views/mobile/accounts/ListPage.vue
View File

@@ -5,7 +5,7 @@
<f7-nav-title :title="tt('Account List')"></f7-nav-title>
<f7-nav-right class="navbar-compact-icons">
<f7-link icon-f7="ellipsis" :class="{ 'disabled': !allAccountCount }" v-if="!sortable" @click="showMoreActionSheet = true"></f7-link>
<f7-link href="/account/add" icon-f7="plus" v-if="!sortable"></f7-link>
<f7-link icon-f7="plus" href="/account/add" v-if="!sortable"></f7-link>
<f7-link :text="tt('Done')" :class="{ 'disabled': displayOrderSaving }" @click="saveSortResult" v-else-if="sortable"></f7-link>
</f7-nav-right>
</f7-navbar>

4
src/views/mobile/accounts/MoveAllTransactionsPage.vue
View File

@@ -4,7 +4,9 @@
<f7-nav-left :back-link="tt('Back')"></f7-nav-left>
<f7-nav-title :title="tt('Move All Transactions')"></f7-nav-title>
<f7-nav-right>
<f7-link :class="{ 'disabled': !fromAccount || !toAccountId || fromAccount?.id === toAccountId || !toAccountName || !isToAccountNameValid || moving }" :text="tt('Confirm')" @click="confirm"></f7-link>
<f7-link icon-f7="checkmark_alt"
:class="{ 'disabled': !fromAccount || !toAccountId || fromAccount?.id === toAccountId || !toAccountName || !isToAccountNameValid || moving }"
@click="confirm"></f7-link>
</f7-nav-right>
</f7-navbar>

9
src/views/mobile/accounts/ReconciliationStatementPage.vue
View File

@@ -6,12 +6,13 @@
<span style="color: var(--f7-text-color)" v-if="!finishQuery">{{ tt('Reconciliation Statement') }}</span>
<f7-link popover-open=".display-mode-popover-menu" v-if="finishQuery">
<span style="color: var(--f7-text-color)">{{ tt('Reconciliation Statement') }}</span>
<f7-icon class="page-title-bar-icon" color="gray" style="opacity: 0.5" f7="chevron_down_circle_fill"></f7-icon>
<f7-icon class="page-title-bar-icon" style="opacity: 0.5"
color="gray" f7="chevron_down_circle_fill"></f7-icon>
</f7-link>
</f7-nav-title>
<f7-nav-right>
<f7-link :class="{ 'disabled': !validQuery }" :text="tt('Next')" @click="reload(false)" v-if="!finishQuery"></f7-link>
<f7-link :class="{ 'disabled': loading }" icon-f7="ellipsis" v-if="finishQuery" @click="showMoreActionSheet = true"></f7-link>
<f7-nav-right class="navbar-compact-icons">
<f7-link icon-f7="checkmark_alt" :class="{ 'disabled': !validQuery }" @click="reload(false)" v-if="!finishQuery"></f7-link>
<f7-link icon-f7="ellipsis" :class="{ 'disabled': loading }" v-if="finishQuery" @click="showMoreActionSheet = true"></f7-link>
</f7-nav-right>
</f7-navbar>

3
src/views/mobile/categories/EditPage.vue
View File

@@ -4,7 +4,7 @@
<f7-nav-left :back-link="tt('Back')"></f7-nav-left>
<f7-nav-title :title="tt(title)"></f7-nav-title>
<f7-nav-right>
<f7-link :class="{ 'disabled': inputIsEmpty || submitting }" :text="tt(saveButtonTitle)" @click="save"></f7-link>
<f7-link icon-f7="checkmark_alt" :class="{ 'disabled': inputIsEmpty || submitting }" @click="save"></f7-link>
</f7-nav-right>
</f7-navbar>
@@ -180,7 +180,6 @@ const {
category,
allAvailableCategories,
title,
saveButtonTitle,
inputEmptyProblemMessage,
inputIsEmpty
} = useCategoryEditPageBase(query['type'] ? parseInt(query['type']) as CategoryType : undefined, query['parentId']);

2
src/views/mobile/categories/ListPage.vue
View File

@@ -5,7 +5,7 @@
<f7-nav-title :title="tt(title)"></f7-nav-title>
<f7-nav-right class="navbar-compact-icons">
<f7-link icon-f7="ellipsis" :class="{ 'disabled': !categories.length }" v-if="!sortable" @click="showMoreActionSheet = true"></f7-link>
<f7-link :href="'/category/add?type=' + categoryType + '&parentId=' + primaryCategoryId + (currentPrimaryCategory ? `&color=${currentPrimaryCategory.color}&icon=${currentPrimaryCategory.icon}` : '')" icon-f7="plus" v-if="!sortable"></f7-link>
<f7-link icon-f7="plus" :href="'/category/add?type=' + categoryType + '&parentId=' + primaryCategoryId + (currentPrimaryCategory ? `&color=${currentPrimaryCategory.color}&icon=${currentPrimaryCategory.icon}` : '')" v-if="!sortable"></f7-link>
<f7-link :text="tt('Done')" :class="{ 'disabled': displayOrderSaving }" @click="saveSortResult" v-else-if="sortable"></f7-link>
</f7-nav-right>
</f7-navbar>

5
src/views/mobile/settings/AccountFilterSettingsPage.vue
View File

@@ -3,9 +3,9 @@
<f7-navbar>
<f7-nav-left :back-link="tt('Back')"></f7-nav-left>
<f7-nav-title :title="tt(title)"></f7-nav-title>
<f7-nav-right>
<f7-nav-right class="navbar-compact-icons">
<f7-link icon-f7="ellipsis" :class="{ 'disabled': !hasAnyAvailableAccount }" @click="showMoreActionSheet = true"></f7-link>
<f7-link :text="tt(applyText)" :class="{ 'disabled': !hasAnyVisibleAccount }" @click="save"></f7-link>
<f7-link icon-f7="checkmark_alt" :class="{ 'disabled': !hasAnyVisibleAccount }" @click="save"></f7-link>
</f7-nav-right>
</f7-navbar>
@@ -173,7 +173,6 @@ const {
showHidden,
filterAccountIds,
title,
applyText,
allowHiddenAccount,
allCategorizedAccounts,
hasAnyAvailableAccount,

5
src/views/mobile/settings/CategoryFilterSettingsPage.vue
View File

@@ -3,9 +3,9 @@
<f7-navbar>
<f7-nav-left :back-link="tt('Back')"></f7-nav-left>
<f7-nav-title :title="tt(title)"></f7-nav-title>
<f7-nav-right>
<f7-nav-right class="navbar-compact-icons">
<f7-link icon-f7="ellipsis" :class="{ 'disabled': !hasAnyAvailableCategory }" @click="showMoreActionSheet = true"></f7-link>
<f7-link :text="tt(applyText)" :class="{ 'disabled': !hasAnyVisibleCategory }" @click="save"></f7-link>
<f7-link icon-f7="checkmark_alt" :class="{ 'disabled': !hasAnyVisibleCategory }" @click="save"></f7-link>
</f7-nav-right>
</f7-navbar>
@@ -181,7 +181,6 @@ const {
showHidden,
filterCategoryIds,
title,
applyText,
allTransactionCategories,
hasAnyAvailableCategory,
hasAnyVisibleCategory,

2
src/views/mobile/settings/TextSizeSettingsPage.vue
View File

@@ -4,7 +4,7 @@
<f7-nav-left :back-link="tt('Back')"></f7-nav-left>
<f7-nav-title :title="tt('Text Size')"></f7-nav-title>
<f7-nav-right>
<f7-link :text="tt('Done')" @click="setFontSize"></f7-link>
<f7-link icon-f7="checkmark_alt" @click="setFontSize"></f7-link>
</f7-nav-right>
</f7-navbar>

5
src/views/mobile/settings/TransactionTagFilterSettingsPage.vue
View File

@@ -3,9 +3,9 @@
<f7-navbar>
<f7-nav-left :back-link="tt('Back')"></f7-nav-left>
<f7-nav-title :title="tt(title)"></f7-nav-title>
<f7-nav-right>
<f7-nav-right class="navbar-compact-icons">
<f7-link icon-f7="ellipsis" :class="{ 'disabled': !hasAnyAvailableTag }" @click="showMoreActionSheet = true"></f7-link>
<f7-link :text="tt(applyText)" :class="{ 'disabled': !hasAnyVisibleTag }" @click="save"></f7-link>
<f7-link icon-f7="checkmark_alt" :class="{ 'disabled': !hasAnyVisibleTag }" @click="save"></f7-link>
</f7-nav-right>
</f7-navbar>
@@ -180,7 +180,6 @@ const {
includeTagsCount,
excludeTagsCount,
title,
applyText,
allTags,
hasAnyAvailableTag,
hasAnyVisibleTag,

4
src/views/mobile/tags/ListPage.vue
View File

@@ -4,8 +4,8 @@
<f7-nav-left :back-link="tt('Back')"></f7-nav-left>
<f7-nav-title :title="tt('Transaction Tags')"></f7-nav-title>
<f7-nav-right class="navbar-compact-icons">
<f7-link :class="{ 'disabled': hasEditingTag || !tags.length }" icon-f7="ellipsis" v-if="!sortable" @click="showMoreActionSheet = true"></f7-link>
<f7-link :class="{ 'disabled': hasEditingTag }" icon-f7="plus" v-if="!sortable" @click="add"></f7-link>
<f7-link icon-f7="ellipsis" :class="{ 'disabled': hasEditingTag || !tags.length }" v-if="!sortable" @click="showMoreActionSheet = true"></f7-link>
<f7-link icon-f7="plus" :class="{ 'disabled': hasEditingTag }" v-if="!sortable" @click="add"></f7-link>
<f7-link :text="tt('Done')" :class="{ 'disabled': displayOrderSaving || hasEditingTag }" v-else-if="sortable" @click="saveSortResult"></f7-link>
</f7-nav-right>
</f7-navbar>

2
src/views/mobile/templates/ListPage.vue
View File

@@ -5,7 +5,7 @@
<f7-nav-title :title="templateType === TemplateType.Schedule.type ? tt('Scheduled Transactions') : tt('Transaction Templates')"></f7-nav-title>
<f7-nav-right class="navbar-compact-icons">
<f7-link icon-f7="ellipsis" :class="{ 'disabled': !templates.length }" v-if="!sortable" @click="showMoreActionSheet = true"></f7-link>
<f7-link :href="'/template/add?templateType=' + templateType" icon-f7="plus" v-if="!sortable"></f7-link>
<f7-link icon-f7="plus" :href="'/template/add?templateType=' + templateType" v-if="!sortable"></f7-link>
<f7-link :text="tt('Done')" :class="{ 'disabled': displayOrderSaving }" @click="saveSortResult" v-else-if="sortable"></f7-link>
</f7-nav-right>
</f7-navbar>

2
src/views/mobile/transactions/AmountFilterPage.vue
View File

@@ -4,7 +4,7 @@
<f7-nav-left :back-link="tt('Back')"></f7-nav-left>
<f7-nav-title :title="tt('Filter Amount')"></f7-nav-title>
<f7-nav-right>
<f7-link :text="tt('Apply')" @click="confirm"></f7-link>
<f7-link icon-f7="checkmark_alt" @click="confirm"></f7-link>
</f7-nav-right>
</f7-navbar>

6
src/views/mobile/transactions/EditPage.vue
View File

@@ -3,9 +3,9 @@
<f7-navbar>
<f7-nav-left :back-link="tt('Back')"></f7-nav-left>
<f7-nav-title :title="tt(title)"></f7-nav-title>
<f7-nav-right v-if="mode !== TransactionEditPageMode.View || transaction.type !== TransactionType.ModifyBalance">
<f7-nav-right class="navbar-compact-icons" v-if="mode !== TransactionEditPageMode.View || transaction.type !== TransactionType.ModifyBalance">
<f7-link icon-f7="ellipsis" @click="showMoreActionSheet = true"></f7-link>
<f7-link :class="{ 'disabled': inputIsEmpty || submitting }" :text="tt(saveButtonTitle)" @click="save" v-if="mode !== TransactionEditPageMode.View"></f7-link>
<f7-link icon-f7="checkmark_alt" :class="{ 'disabled': inputIsEmpty || submitting }" @click="save" v-if="mode !== TransactionEditPageMode.View"></f7-link>
</f7-nav-right>
<f7-subnavbar>
@@ -433,7 +433,7 @@
<f7-actions-button v-if="mode !== TransactionEditPageMode.View" @click="clearGeoLocation">{{ tt('Clear Geographic Location') }}</f7-actions-button>
</f7-actions-group>
<f7-actions-group v-if="!!getMapProvider()">
<f7-actions-button :class="{ 'disabled': !transaction.geoLocation }" @click="showGeoLocationMapSheet = true">{{ tt('Show on the map') }}</f7-actions-button>
<f7-actions-button :class="{ 'disabled': !transaction.geoLocation }" @click="setGeoLocationByClickMap = false; showGeoLocationMapSheet = true">{{ tt('Show on the map') }}</f7-actions-button>
</f7-actions-group>
<f7-actions-group>
<f7-actions-button bold close>{{ tt('Cancel') }}</f7-actions-button>

2
src/views/mobile/users/DataManagementPage.vue
View File

@@ -37,7 +37,7 @@
:swipe-to-close="!exportingData" :close-on-escape="!exportingData"
:close-by-backdrop-click="!exportingData" :close-by-outside-click="!exportingData"
:opened="showExportDataSheet" @sheet:closed="showExportDataSheet = false; exportedData = null;">
<div class="swipe-handler" style="z-index: 10"></div>
<div class="swipe-handler"></div>
<f7-page-content class="margin-top no-padding-top">
<div class="display-flex padding justify-content-space-between align-items-center">
<div class="ebk-sheet-title"><b>{{ tt('Are you sure you want to export all transaction data to file?') }}</b></div>

2
src/views/mobile/users/UserProfilePage.vue
View File

@@ -5,7 +5,7 @@
<f7-nav-title :title="tt('User Profile')"></f7-nav-title>
<f7-nav-right class="navbar-compact-icons">
<f7-link icon-f7="ellipsis" :class="{ 'disabled': !isUserVerifyEmailEnabled() || loading || emailVerified }" @click="showMoreActionSheet = true"></f7-link>
<f7-link :class="{ 'disabled': inputIsNotChanged || inputIsInvalid || saving }" :text="tt('Save')" @click="save(currentNoPassword)"></f7-link>
<f7-link icon-f7="checkmark_alt" :class="{ 'disabled': inputIsNotChanged || inputIsInvalid || saving }" @click="save(currentNoPassword)"></f7-link>
</f7-nav-right>
</f7-navbar>