From 429110599e65b502db2170769e666d09b5623722 Mon Sep 17 00:00:00 2001 From: deardrops Date: Sun, 27 Aug 2017 17:24:01 +0800 Subject: [PATCH 01/17] add Toast component --- src/components/Cell.vue | 2 +- src/components/DeckSheets.vue | 15 +++++-- src/components/Toast.vue | 78 +++++++++++++++++++++++++++++++++++ src/css/vars.css | 1 + src/lang/en.hjson | 8 +++- src/lang/it.hjson | 8 +++- src/lang/jp.hjson | 8 +++- src/lang/ko.hjson | 8 +++- src/lang/ru.hjson | 8 +++- src/lang/sp.hjson | 8 +++- src/lang/zh_Hans.hjson | 8 +++- src/pages/Deck.vue | 3 ++ src/pages/Search.vue | 3 ++ 13 files changed, 146 insertions(+), 12 deletions(-) create mode 100644 src/components/Toast.vue diff --git a/src/components/Cell.vue b/src/components/Cell.vue index aec47d6..7750ade 100644 --- a/src/components/Cell.vue +++ b/src/components/Cell.vue @@ -135,7 +135,7 @@ export default { this.$store.dispatch('addCard', pid).then((successed) => { if (!successed) { - console.log('already full') // show toast here + this.$parent.$parent.$refs.toast.show(Localize('deck_limit_exceeded')) } }) }, diff --git a/src/components/DeckSheets.vue b/src/components/DeckSheets.vue index e00f1d7..3376f44 100644 --- a/src/components/DeckSheets.vue +++ b/src/components/DeckSheets.vue @@ -28,7 +28,7 @@ export default { sheetConfigs() { let configs = { 'import': { - head: 'import from', + head: L('import_from'), options: [{ text: L('file'), icon: 'file', @@ -44,7 +44,7 @@ export default { }], }, 'export': { - head: 'export to', + head: L('export_to'), options: [{ text: L('file'), icon: 'file', @@ -86,7 +86,7 @@ export default { this.$store.commit('setTempDeck', { name, pids }) this.$emit('openModal', 'nameDeck') }).catch(() => { - alert(L('parsing_error')) + this.showToast(L('parse_error')) }) }, open(type) { @@ -104,12 +104,19 @@ export default { this.$refs.copyArea.select() let successed = document.execCommand('copy') if (successed) { - // TODO: toast successed info here + this.showToast(L('copied')) return true } } return false }, + close() { + this.$refs.sheet.close() + }, + showToast(text) { + this.close() + this.$parent.$refs.toast.show(text) + }, }, } diff --git a/src/components/Toast.vue b/src/components/Toast.vue new file mode 100644 index 0000000..a7c6550 --- /dev/null +++ b/src/components/Toast.vue @@ -0,0 +1,78 @@ + + + + + diff --git a/src/css/vars.css b/src/css/vars.css index e90d198..c5d0d71 100644 --- a/src/css/vars.css +++ b/src/css/vars.css @@ -9,6 +9,7 @@ --z-header-menu: 2; --z-sheet: 3; --z-modal: 4; + --z-toast: 5; /* shadows */ --shadow-2dp: { diff --git a/src/lang/en.hjson b/src/lang/en.hjson index 5d95db4..def767f 100644 --- a/src/lang/en.hjson +++ b/src/lang/en.hjson @@ -32,7 +32,13 @@ copy_deck_here: Copy deck here: file: file text: text clipboard: clipboard -parsing_error: Error while parsing deck file. +import_from: import from +export_to: export to + +// toast +deck_limit_exceeded: Deck limit exceeded. +copied: Copied +parse_error: Error while parsing deck file. // cell component no_cost: no cost diff --git a/src/lang/it.hjson b/src/lang/it.hjson index f85db55..6aadf15 100644 --- a/src/lang/it.hjson +++ b/src/lang/it.hjson @@ -32,7 +32,13 @@ copy_deck_here: Copy deck here: file: file text: text clipboard: clipboard -parsing_error: Error while parsing deck file. +import_from: import from +export_to: export to + +// toast +deck_limit_exceeded: Deck limit exceeded. +copied: Copied +parse_error: Error while parsing deck file. // cell component no_cost: no cost diff --git a/src/lang/jp.hjson b/src/lang/jp.hjson index a830da7..c5f66e0 100644 --- a/src/lang/jp.hjson +++ b/src/lang/jp.hjson @@ -32,7 +32,13 @@ copy_deck_here: Copy deck here: file: file text: text clipboard: clipboard -parsing_error: Error while parsing deck file. +import_from: import from +export_to: export to + +// toast +deck_limit_exceeded: Deck limit exceeded. +copied: Copied +parse_error: Error while parsing deck file. // cell component no_cost: no cost diff --git a/src/lang/ko.hjson b/src/lang/ko.hjson index dbcb941..7dfcc4a 100644 --- a/src/lang/ko.hjson +++ b/src/lang/ko.hjson @@ -32,7 +32,13 @@ copy_deck_here: Copy deck here: file: file text: text clipboard: clipboard -parsing_error: Error while parsing deck file. +import_from: import from +export_to: export to + +// toast +deck_limit_exceeded: Deck limit exceeded. +copied: Copied +parse_error: Error while parsing deck file. // cell component no_cost: 코스트 없음 diff --git a/src/lang/ru.hjson b/src/lang/ru.hjson index 9ba05b6..97c7079 100644 --- a/src/lang/ru.hjson +++ b/src/lang/ru.hjson @@ -32,7 +32,13 @@ copy_deck_here: Copy deck here: file: file text: text clipboard: clipboard -parsing_error: Error while parsing deck file. +import_from: import from +export_to: export to + +// toast +deck_limit_exceeded: Deck limit exceeded. +copied: Copied +parse_error: Error while parsing deck file. // cell component no_cost: нет цены diff --git a/src/lang/sp.hjson b/src/lang/sp.hjson index acb7f1b..08814af 100644 --- a/src/lang/sp.hjson +++ b/src/lang/sp.hjson @@ -32,7 +32,13 @@ copy_deck_here: Copy deck here: file: file text: text clipboard: clipboard -parsing_error: Error while parsing deck file. +import_from: import from +export_to: export to + +// toast +deck_limit_exceeded: Deck limit exceeded. +copied: Copied +parse_error: Error while parsing deck file. // cell component no_cost: no cost diff --git a/src/lang/zh_Hans.hjson b/src/lang/zh_Hans.hjson index 4907a74..cf55a18 100644 --- a/src/lang/zh_Hans.hjson +++ b/src/lang/zh_Hans.hjson @@ -32,7 +32,13 @@ copy_deck_here: 复制这里的卡组: file: 本地文件 text: 文本 clipboard: 剪贴板 -parsing_error: 读取卡组数据时出现错误。 +import_from: 导入自 +export_to: 导出到 + +// toast +deck_limit_exceeded: 超过卡组数量限制 +copied: 已复制 +parse_error: 读取卡组文件时出现错误 // cell component no_cost: 无费用 diff --git a/src/pages/Deck.vue b/src/pages/Deck.vue index 115f5bf..772453c 100644 --- a/src/pages/Deck.vue +++ b/src/pages/Deck.vue @@ -8,6 +8,7 @@ import CellContainer from 'components/CellContainer' import Block from 'components/Block' import DeckHead from 'components/DeckHead' import Icon from 'components/Icon' +import Toast from 'components/Toast' import { defaultSort, isLrigCard } from 'js/util' import _ from 'lodash' import L from 'js/Localize' @@ -24,6 +25,7 @@ export default { Block, DeckHead, Icon, + Toast, }, data: () => ({ request: -1, @@ -206,6 +208,7 @@ export default { + diff --git a/src/pages/Search.vue b/src/pages/Search.vue index 109673e..f4ce5fa 100644 --- a/src/pages/Search.vue +++ b/src/pages/Search.vue @@ -1,6 +1,7 @@ - diff --git a/src/pages/DeckEditor.vue b/src/pages/DeckEditor.vue new file mode 100644 index 0000000..63226ac --- /dev/null +++ b/src/pages/DeckEditor.vue @@ -0,0 +1,157 @@ + + + + + diff --git a/src/pages/Search.vue b/src/pages/Search.vue index 109673e..6d01507 100644 --- a/src/pages/Search.vue +++ b/src/pages/Search.vue @@ -15,7 +15,6 @@ export default { // block the search for a short time after input. timer: -1, blocking: false, - request: -1, searchTips: require('./searchTips.md'), // test emptyTips: require('./emptyTips.md'), // test diff --git a/src/pages/introduce.md b/src/pages/introduce.md index a0965eb..490bcbc 100644 --- a/src/pages/introduce.md +++ b/src/pages/introduce.md @@ -7,3 +7,4 @@ * GitHub: [webxoss-deckeditor2](https://github.com/Deardrops/webxoss-deckeditor2) ## [👉 Try our new DeckEditor](#/deck) +## [DeckEditor | desktop view | WIP](#/deckeditor) diff --git a/src/router.js b/src/router.js index 59329e3..23b7b1e 100644 --- a/src/router.js +++ b/src/router.js @@ -26,5 +26,9 @@ export default new Router({ path: '/gallery', component: require('pages/Gallery'), }, + { + path: '/deckeditor', + component: require('pages/DeckEditor'), + }, ], }) diff --git a/src/store.js b/src/store.js index 894f4fc..8a3ca62 100644 --- a/src/store.js +++ b/src/store.js @@ -29,7 +29,7 @@ const state = { // current selected deck name deckName: '', - + shownPid: 1, localization: { lang: 'en', }, @@ -192,6 +192,11 @@ const mutations = { changeWindowWidth(state, width) { state.windowWidth = width }, + setShownPid(state, pid) { + if (0 < pid && pid < Object.keys(CardInfo).length) { + state.pid = pid + } + }, } const actions = { From c40f783a12b77f5f77363d43ab59905d5d3cc7e2 Mon Sep 17 00:00:00 2001 From: deardrops Date: Wed, 5 Jul 2017 15:09:58 +0800 Subject: [PATCH 04/17] rebuild component --- src/components/CardInfoTable.vue | 0 .../{CellContainer.vue => ListContainer.vue} | 56 +++----- src/pages/Deck.vue | 21 ++- src/pages/DeckEditor.vue | 132 ++++++++++-------- src/pages/Search.vue | 12 +- src/store.js | 2 +- 6 files changed, 120 insertions(+), 103 deletions(-) create mode 100644 src/components/CardInfoTable.vue rename src/components/{CellContainer.vue => ListContainer.vue} (61%) diff --git a/src/components/CardInfoTable.vue b/src/components/CardInfoTable.vue new file mode 100644 index 0000000..e69de29 diff --git a/src/components/CellContainer.vue b/src/components/ListContainer.vue similarity index 61% rename from src/components/CellContainer.vue rename to src/components/ListContainer.vue index d613397..027016f 100644 --- a/src/components/CellContainer.vue +++ b/src/components/ListContainer.vue @@ -1,23 +1,16 @@ @@ -117,41 +140,34 @@ export default { .container { display: flex; } -.detail { - width: 20%; -} -.image { - display: block; - margin: 0 auto; -} -.blocks { - width: 60%; -} -.block { - width: 10%; -} -.searcher { - width: 20%; - height: 100vh; - overflow: auto; -} .search { - position: absolute; - z-index: 1; - height: 2em; - margin: .5em; - background-color: #fff; - box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + flex: .4; + color: #fff; + padding: .3em .5em; + background-color: color(var(--main-color) l(+10%)); + border-radius: 3px; } .search::placeholder { - color: #000a; + color: #fffa; } .search::selection { color: #333; + background-color: #ffff00; } -.result { - width: 200px; - padding-top: 3em; - margin: 0 auto; +.deckZone { + width: 50%; + padding: .5em; +} +.deckBlock { + width: 10%; +} +.searchZone { + width: 50%; + height: calc(100vh - var(--header-height)); + overflow: scroll; +} +.searchBlock { + padding: .3em; + width: 20%; } diff --git a/src/pages/Search.vue b/src/pages/Search.vue index 6d01507..63995ee 100644 --- a/src/pages/Search.vue +++ b/src/pages/Search.vue @@ -1,14 +1,16 @@ From 2f58e37355505e98ad89b8583f045f61da62f401 Mon Sep 17 00:00:00 2001 From: deardrops Date: Sat, 19 Aug 2017 21:00:28 +0800 Subject: [PATCH 06/17] duplicate old DeckEditor --- src/app.vue | 2 +- src/components/CardInfo.vue | 62 +++++++++ src/components/CardInfoTable.vue | 133 +++++++++++++++++++ src/components/ListContainer.vue | 66 ++++++---- src/css/common.css | 29 +++-- src/pages/DeckEditor.vue | 215 ++++++++++++------------------- src/pages/Detail.vue | 117 ++--------------- src/store.js | 18 +-- 8 files changed, 349 insertions(+), 293 deletions(-) create mode 100644 src/components/CardInfo.vue diff --git a/src/app.vue b/src/app.vue index 1e5d563..9a52a39 100644 --- a/src/app.vue +++ b/src/app.vue @@ -16,7 +16,7 @@ export default { let deckFileNames = localStorage.getItem('deck_filenames') let fileNames = JSON.parse(deckFileNames) - this.$store.commit('changeWindowWidth', window.innerWidth) + this.$store.commit('setWindowData') this.$store.commit('changeLanguage', localStorage.getItem('language') || 'en') // if no deck in localStorage, initialize WHITE_HOPE diff --git a/src/components/CardInfo.vue b/src/components/CardInfo.vue new file mode 100644 index 0000000..45faa24 --- /dev/null +++ b/src/components/CardInfo.vue @@ -0,0 +1,62 @@ + + + + + + diff --git a/src/components/CardInfoTable.vue b/src/components/CardInfoTable.vue index e69de29..544ccda 100644 --- a/src/components/CardInfoTable.vue +++ b/src/components/CardInfoTable.vue @@ -0,0 +1,133 @@ + + + + + diff --git a/src/components/ListContainer.vue b/src/components/ListContainer.vue index 027016f..a26eccd 100644 --- a/src/components/ListContainer.vue +++ b/src/components/ListContainer.vue @@ -1,6 +1,5 @@ diff --git a/src/pages/Detail.vue b/src/pages/Detail.vue index 2641c5c..6b5ec12 100644 --- a/src/pages/Detail.vue +++ b/src/pages/Detail.vue @@ -1,12 +1,13 @@ @@ -165,24 +85,6 @@ export default { display: flex; margin-bottom: 0.5em; } -.title { - font-size: 1.5em; -} -.table { - width: 100%; - line-height: 1.5; - white-space: pre-line; - table-layout: fixed; - border-collapse: collapse; -} -td { - border: 1px solid #cbcbcb; - padding: .5em .2em; -} -.key { - width: 15%; - text-align: center; -} .thumbnail { width: 11em; height: 11em; @@ -196,7 +98,4 @@ td { overflow: hidden; padding: .5em; } -.right { - float: right; -} diff --git a/src/store.js b/src/store.js index 5395e69..f84ad00 100644 --- a/src/store.js +++ b/src/store.js @@ -29,17 +29,19 @@ const state = { // current selected deck name deckName: '', - shownPid: 1, localization: { lang: 'en', }, - windowWidth: 0, - tempDeck: { name: '', pids: [], }, + + shownPid: 1, + + windowWidth: 0, + fontSize: 14, } Localize.config = state.localization @@ -189,8 +191,10 @@ const mutations = { state.localization.lang = lang setLanguegeCardInfo(lang) }, - changeWindowWidth(state, width) { - state.windowWidth = width + setWindowData(state) { + state.windowWidth = window.innerWidth + state.fontSize = +window.getComputedStyle(window.document.body) + .fontSize.slice(0, -2) }, setShownPid(state, pid) { if (0 < pid && pid < Object.keys(CardInfo).length) { @@ -241,8 +245,6 @@ store.watch((state, getters) => { localStorage.setItem(deckName, JSON.stringify(file)) }) -window.addEventListener('resize', () => { - store.commit('changeWindowWidth', window.innerWidth) -}, false) +window.addEventListener('resize', store.setWindowData, false) export default store From 28974c480b96764ae32684f843fcb49d23a50b97 Mon Sep 17 00:00:00 2001 From: deardrops Date: Sun, 20 Aug 2017 23:25:56 +0800 Subject: [PATCH 07/17] abstranct DeckHead --- src/components/DeckHead.vue | 102 ++++++++++++------------------- src/components/DeckSubheader.vue | 56 +++++++++++++++++ src/pages/Deck.vue | 16 ++--- src/pages/DeckEditor.vue | 6 +- 4 files changed, 107 insertions(+), 73 deletions(-) create mode 100644 src/components/DeckSubheader.vue diff --git a/src/components/DeckHead.vue b/src/components/DeckHead.vue index 82b0267..8c572a2 100644 --- a/src/components/DeckHead.vue +++ b/src/components/DeckHead.vue @@ -1,22 +1,21 @@ - - diff --git a/src/components/DeckSubheader.vue b/src/components/DeckSubheader.vue new file mode 100644 index 0000000..11db2e1 --- /dev/null +++ b/src/components/DeckSubheader.vue @@ -0,0 +1,56 @@ + + + + + diff --git a/src/pages/Deck.vue b/src/pages/Deck.vue index 0b4a0df..8a16327 100644 --- a/src/pages/Deck.vue +++ b/src/pages/Deck.vue @@ -7,7 +7,7 @@ import DeckFloatButton from 'components/DeckFloatButton' import ListContainer from 'components/ListContainer' import Cell from 'components/Cell' import Block from 'components/Block' -import DeckHead from 'components/DeckHead' +import DeckSubheader from 'components/DeckSubheader' import Icon from 'components/Icon' import { defaultSort, isLrigCard } from 'js/util' import _ from 'lodash' @@ -24,7 +24,7 @@ export default { ListContainer, Cell, Block, - DeckHead, + DeckSubheader, Icon, }, data: () => ({ @@ -129,7 +129,7 @@ export default { openSheet(type) { this.$refs.sheets.open(type) }, - updateDeckHeader() { + updateDeckHead() { let lrigDeck = this.$refs.lrigDeck if (!lrigDeck) { return @@ -138,7 +138,7 @@ export default { let top = $lrigDeck ? $lrigDeck.getBoundingClientRect().top : 0 this.scrolledToLrig = top <= window.innerHeight / 2 this.scrolledToTop = window.scrollY <= 0 - this.request = requestIdleCallback(this.updateDeckHeader) + this.request = requestIdleCallback(this.updateDeckHead) }, toggleView() { this.previewing ? this.goListView() : this.goBlockView() @@ -166,7 +166,7 @@ export default { }, }, mounted() { - this.updateDeckHeader() + this.updateDeckHead() }, destroyed() { cancelIdleCallback(this.request) @@ -187,11 +187,11 @@ export default { @click.native="toggleView"/> - - +