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

DeckEditor | Desktop View #90

Open
Deardrops opened this issue Jul 4, 2017 · 2 comments · May be fixed by #91
Open

DeckEditor | Desktop View #90

Deardrops opened this issue Jul 4, 2017 · 2 comments · May be fixed by #91
Milestone
Responsive DeckEd...

Comments

@Deardrops
Copy link
Owner

Deardrops commented Jul 4, 2017 •
edited
Loading

页面结构

  • 卡组编辑器页面
    • 页面头部：标题
    • 卡面详情区域：卡图 + 信息表格，当前显示的卡的pid存储在vuex中
      • CardImage 组件：显示卡图
      • CardInfoTable 组件： 显示该卡的详细信息
    • 卡组显示区域：Block视图，1行10列，区分主卡组和分身卡组
      • 功能选项（切换，新建，删除，重命名，导入，导出卡组）
      • Block 组件：显示单张卡，悬停查看详细，点击删除该卡
    • 搜索区域：Block视图，单列
      • 搜索框：搜索的字符串存储在组件中，由计算属性matchedCards渲染内容
      • 列表容器组件： 为其中的Block提供长列表优化
        • Block组件：显示单张卡，悬停查看详细，点击添加该卡

代码改进

  • 抽象出CardInfoTable组件
    • exclude 参数：不包括在信息表格中的卡面属性
  • 扩展Block组件
    • 点击后可以跳转详情页/.删除该卡/添加该卡，传出click事件，由父组件为其指定处理函数。
    • 一行中项的个数、各项的间距由父组件为其定义
  • 进一步抽象列表容器组件
    • 可以 响应式地切换单列或多列
    • 列表对象可以为Cell或Block。

需要进一步讨论的问题

  1. 对卡组操作的功能按钮放在AppHeader的下拉菜单中，还是放在别的地方？
  2. 是否需要在低分辨率显示单列的搜索结果，高分辨率显示多列的搜索结果？
  3. 调整store中部分内容：
  • 每次在store中添加一张卡，就为卡组做一次排序。
  • 在store中设置卡组数量的上限。
  • 不信任传递给action的参数，每次都做检查，检查失败时尽可能返回详细的信息。
@Deardrops
Copy link
Owner Author

Deardrops commented Jul 4, 2017 •
edited
Loading

个人意见

  1. 功能按钮放在卡组显示区域的最上方，都以图标的形式显示。点击后弹出Modal。
  2. 单列的屏幕利用率较低（一屏只有3-4张卡），多列可以极大地提高屏幕利用率（虽然可能不好看）。
  3. 在store.js中添加一些内容。

@Deardrops Deardrops linked a pull request Jul 4, 2017 that will close this issue
Open
17 tasks
@Deardrops
Copy link
Owner Author

重新分析用户需求和设计页面

需求分析

  1. 浏览卡组，一眼就能看到自己卡组的所有卡
  2. 搜索卡牌，通过搜索栏搜索特定的卡片
  3. 卡组操作，从卡组中删除卡牌，或者从搜索结果中添加卡牌到卡组
  4. 查看详情，查看某一张卡的详情

实现方式

1、2、4属于布局上的问题，3、4属于交互上的问题

主要区域有3个——卡组区，搜索区和详情区。
整体布局包括3部分：顶部是导航栏，中间主体是卡组区或搜索区，右边侧边栏为详情区。
导航栏中包含搜索栏（输入文字后立即显示搜索结果页面）
搜索结果页面作为一个tab页，通过鼠标移出该区域的方式浏览卡组，鼠标移回区域浏览搜索结果。
交互上，当鼠标悬停到一张卡上时，在详情区显示这张卡的详细信息。
悬浮在一张卡上会模糊这张卡并显示删除/添加按钮，点击按钮实现对应的功能。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
Responsive DeckEditor
Development

Successfully merging a pull request may close this issue.

[Abandon] add desktop view for DeckEditor Deardrops/webxoss-deckeditor2
1 participant
@Deardrops