diff --git a/src/components/mobile/ColorSelectionSheet.vue b/src/components/mobile/ColorSelectionSheet.vue new file mode 100644 index 00000000..0e0b30f2 --- /dev/null +++ b/src/components/mobile/ColorSelectionSheet.vue @@ -0,0 +1,61 @@ + + + diff --git a/src/components/mobile/IconSelectionSheet.vue b/src/components/mobile/IconSelectionSheet.vue new file mode 100644 index 00000000..5b62239b --- /dev/null +++ b/src/components/mobile/IconSelectionSheet.vue @@ -0,0 +1,72 @@ + + + diff --git a/src/mobile-main.js b/src/mobile-main.js index d44b0adb..df293f10 100644 --- a/src/mobile-main.js +++ b/src/mobile-main.js @@ -35,6 +35,9 @@ import accountIconFilter from './filters/accountIcon.js'; import categoryIconFilter from './filters/categoryIcon.js'; import tokenDeviceFilter from './filters/tokenDevice.js'; import tokenIconFilter from './filters/tokenIcon.js'; + +import IconSelectionSheet from "./components/mobile/IconSelectionSheet.vue"; +import ColorSelectionSheet from "./components/mobile/ColorSelectionSheet.vue"; import App from './Mobile.vue'; Vue.use(VueI18n); @@ -42,6 +45,8 @@ Vue.use(VueI18nFilter); Vue.use(VueMoment, { moment }); Vue.use(VueClipboard); Vue.component('PincodeInput', PincodeInput); +Vue.component('IconSelectionSheet', IconSelectionSheet); +Vue.component('ColorSelectionSheet', ColorSelectionSheet); Framework7.use(Framework7Vue); const i18n = new VueI18n(getI18nOptions()); diff --git a/src/views/mobile/accounts/Edit.vue b/src/views/mobile/accounts/Edit.vue index 2503ece7..710bf5fb 100644 --- a/src/views/mobile/accounts/Edit.vue +++ b/src/views/mobile/accounts/Edit.vue @@ -202,51 +202,22 @@ - - -
-
- -
- - - - - - - - - - - - - - - - + - - -
-
- -
- - - - - - - - - - - - - - - - + @@ -295,50 +266,6 @@ export default { allAccountCategories() { return this.$constants.account.allCategories; }, - allAccountIconRows() { - const allAccountIcons = this.$constants.icons.allAccountIcons; - const ret = []; - let rowCount = 0; - - for (let accountIconId in allAccountIcons) { - if (!Object.prototype.hasOwnProperty.call(allAccountIcons, accountIconId)) { - continue; - } - - const accountIcon = allAccountIcons[accountIconId]; - - if (!ret[rowCount]) { - ret[rowCount] = []; - } else if (ret[rowCount] && ret[rowCount].length >= this.iconCountPerRow) { - rowCount++; - ret[rowCount] = []; - } - - ret[rowCount].push({ - id: accountIconId, - icon: accountIcon.icon - }); - } - - return ret; - }, - allAccountColorRows() { - const allAccountColors = this.$constants.colors.allAccountColors; - const ret = []; - let rowCount = -1; - - for (let i = 0; i < allAccountColors.length; i++) { - if (i % this.iconCountPerRow === 0) { - ret[++rowCount] = []; - } - - ret[rowCount].push({ - color: allAccountColors[i] - }); - } - - return ret; - }, allCurrencies() { return this.$locale.getAllCurrencies(); } @@ -437,16 +364,16 @@ export default { this.accountChoosingIcon = account; this.showIconSelection = true; }, - setSelectedIcon(accountIcon) { + onIconChanged(icon) { if (!this.accountChoosingIcon) { return; } - this.accountChoosingIcon.icon = accountIcon.id; + this.accountChoosingIcon.icon = icon; this.accountChoosingIcon = null; this.showIconSelection = false; }, - hideIconSelectionSheet() { + onIconSelectionSheetClosed() { this.accountChoosingIcon = null; this.showIconSelection = false; }, @@ -454,7 +381,7 @@ export default { this.accountChoosingColor = account; this.showColorSelection = true; }, - setSelectedColor(color) { + onColorChanged(color) { if (!this.accountChoosingColor) { return; } @@ -463,7 +390,7 @@ export default { this.accountChoosingColor = null; this.showColorSelection = false; }, - hideColorSelectionSheet() { + onColorSelectionSheetClosed() { this.accountChoosingColor = null; this.showColorSelection = false; }, diff --git a/src/views/mobile/categories/Edit.vue b/src/views/mobile/categories/Edit.vue index eedf7a7c..b6bf13ad 100644 --- a/src/views/mobile/categories/Edit.vue +++ b/src/views/mobile/categories/Edit.vue @@ -56,51 +56,22 @@ - - -
-
- -
- - - - - - - - - - - - - - - - + - - -
-
- -
- - - - - - - - - - - - - - - - + @@ -149,50 +120,6 @@ export default { return 'Save'; } }, - allCategoryIconRows() { - const allCategoryIcons = this.$constants.icons.allCategoryIcons; - const ret = []; - let rowCount = 0; - - for (let categoryIconId in allCategoryIcons) { - if (!Object.prototype.hasOwnProperty.call(allCategoryIcons, categoryIconId)) { - continue; - } - - const categoryIcon = allCategoryIcons[categoryIconId]; - - if (!ret[rowCount]) { - ret[rowCount] = []; - } else if (ret[rowCount] && ret[rowCount].length >= this.iconCountPerRow) { - rowCount++; - ret[rowCount] = []; - } - - ret[rowCount].push({ - id: categoryIconId, - icon: categoryIcon.icon - }); - } - - return ret; - }, - allCategoryColorRows() { - const allCategoryColors = this.$constants.colors.allCategoryColors; - const ret = []; - let rowCount = -1; - - for (let i = 0; i < allCategoryColors.length; i++) { - if (i % this.iconCountPerRow === 0) { - ret[++rowCount] = []; - } - - ret[rowCount].push({ - color: allCategoryColors[i] - }); - } - - return ret; - }, inputIsEmpty() { return !!this.inputEmptyProblemMessage; }, @@ -267,16 +194,16 @@ export default { this.categoryChoosingIcon = category; this.showIconSelection = true; }, - setSelectedIcon(categoryIcon) { + onIconChanged(icon) { if (!this.categoryChoosingIcon) { return; } - this.categoryChoosingIcon.icon = categoryIcon.id; + this.categoryChoosingIcon.icon = icon; this.categoryChoosingIcon = null; this.showIconSelection = false; }, - hideIconSelectionSheet() { + onIconSelectionSheetClosed() { this.categoryChoosingIcon = null; this.showIconSelection = false; }, @@ -284,7 +211,7 @@ export default { this.categoryChoosingColor = category; this.showColorSelection = true; }, - setSelectedColor(color) { + onColorChanged(color) { if (!this.categoryChoosingColor) { return; } @@ -293,7 +220,7 @@ export default { this.categoryChoosingColor = null; this.showColorSelection = false; }, - hideColorSelectionSheet() { + onColorSelectionSheetClosed() { this.categoryChoosingColor = null; this.showColorSelection = false; },