NoticEditor icon indicating copy to clipboard operation
NoticEditor copied to clipboard

Improving User Interface

Open mrEDitor opened this issue 10 years ago • 7 comments

I suggest to discuss improving user interface My version is:

image

  • left empty space is structure tree.

Add-button also has options (main label should be "add notice"):

image

"Search" button showing corresponding tool as popup window. "Important" can be ChoiceBox or SplitMenuBox, which can fast-switch between "Normal status" and "Important" while full list can also has additional statuses.

  • middle empty space going to editing notice, adding files and perhaps, importing/exporting this particular notice;
  • right empty space is preview.

Since panels are resizeable, it will be nice to add fast hiding to "View" menu:

image

and some "Orientation" tool for changing orientation of editor and preview panels, likely with possibility to swap them.

What do you think?

BTW we can also move different elements to different views, like that:

  • Main
    • Tree
    • View
      • Editor
      • Attached
      • Import&Export

mrEDitor avatar Aug 14 '15 12:08 mrEDitor

@mrEDitor it's great. I like this UI. But tab Import/Export is unnecessary. This should be dialog window.

I would like to pay attention to Filter fields and Search button. While we type text, program performs instant search as is done now. If we push Search button, program performs full search in new window, how @NaikSoftware wants.

aNNiMON avatar Aug 14 '15 12:08 aNNiMON

@mrEDitor , реализовал некоторые твои идеи у себя в ветке. Выглядит так. 2015-08-14 18 39 36 Кнопки просто дублируют контекстное меню Фильтр некуда прилепить, ну и имхо он не особо полезен. Поиск или в главное меню поместить, или попробовать в строку с главным меню вставить, но может и не получится.

NaikSoftware avatar Aug 14 '15 15:08 NaikSoftware

Oh, sorry for double-reference. Didn't notice that commit message from my fork will popup here.

I am going to split controllers like: image

  • yellow – Main.fxml + NoticeController: manage whole opened noticebook-file and settings
  • purple – NoticeTreeView +...Contoller: manage noticebook structure
  • green – NoticeView + ...Controller: manage single notice (editing, showing, editing plugins)
  • red – AttachView + ...Controller
  • blue – WebImport + ...Controller (move here from app menu since it imports/exports single notice)

Seems like blue tab should be splitted to separate tabs.

mrEDitor avatar Aug 21 '15 14:08 mrEDitor

Придется все равно дергать методы друг у друга..

NaikSoftware avatar Aug 21 '15 16:08 NaikSoftware

А это, кстати говоря, лечится хорошей системой ивентов.

mrEDitor avatar Aug 22 '15 08:08 mrEDitor

Now I'm going to rework left panel and add to buttons icons from https://materialdesignicons.com/ image Any thoughts about?

TreeView itself is untouched for the time being.

mrEDitor avatar Aug 22 '15 11:08 mrEDitor

@mrEDitor yep, it's nice :+1: Btw, don't use black icons - the're highly contast with current UI.

#515151 image

aNNiMON avatar Aug 22 '15 11:08 aNNiMON