diff --git a/modules/webapp/src/main/elm/Page/Home/View.elm b/modules/webapp/src/main/elm/Page/Home/View.elm index 47e3b813..3519f61f 100644 --- a/modules/webapp/src/main/elm/Page/Home/View.elm +++ b/modules/webapp/src/main/elm/Page/Home/View.elm @@ -59,7 +59,7 @@ view flags settings model = , onClick ToggleSearchMenu , title "Hide menu" ] - [ i [ class "ui angle down icon" ] [] + [ i [ class "ui angle left icon" ] [] ] , div [ class "right floated menu" ] [ a @@ -300,7 +300,7 @@ viewSearchBar flags model = ] ] [ a - [ class "item" + [ class "search-menu-toggle ui blue icon button" , onClick ToggleSearchMenu , href "#" , if model.searchTypeForm == ContentOnlySearch then @@ -309,19 +309,7 @@ viewSearchBar flags model = else title "Open search menu" ] - [ i [ class "angle left icon" ] [] - , i [ class "icons" ] - [ i [ class "grey bars icon" ] [] - , i [ class "bottom left corner search icon" ] [] - , if model.searchTypeForm == ContentOnlySearch then - i [ class "top right red corner delete icon" ] [] - - else if hasMoreSearch model then - i [ class "top right blue corner circle icon" ] [] - - else - span [ class "hidden invisible" ] [] - ] + [ i [ class "angle right icon" ] [] ] , div [ class "item" ] [ div [ class "ui left icon right action input" ] @@ -333,7 +321,15 @@ viewSearchBar flags model = , href "#" , onClick DoSearch ] - [] + (if hasMoreSearch model && model.searchTypeForm == BasicSearch then + [ i [ class "icons search-corner-icons" ] + [ i [ class "tiny blue circle icon" ] [] + ] + ] + + else + [] + ) , input [ type_ "text" , placeholder "Quick Search …" diff --git a/modules/webapp/src/main/webjar/docspell.css b/modules/webapp/src/main/webjar/docspell.css index e24781e6..c026e157 100644 --- a/modules/webapp/src/main/webjar/docspell.css +++ b/modules/webapp/src/main/webjar/docspell.css @@ -31,6 +31,19 @@ margin: 0 1em; } +.default-layout .ui.menu a.search-menu-toggle { + position: absolute; + left: -2px; + top: 18px; + z-index: 2; +} + +.default-layout .icons.search-corner-icons { + position: relative; + top: 10px; + left: 8px; +} + .default-layout .ui.icon.menu .label.item { padding: 0 0.5em 0 0; } diff --git a/website/site/content/docs/webapp/multiedit-01.png b/website/site/content/docs/webapp/multiedit-01.png new file mode 100644 index 00000000..2dbc682b Binary files /dev/null and b/website/site/content/docs/webapp/multiedit-01.png differ diff --git a/website/site/content/docs/webapp/multiedit-02.png b/website/site/content/docs/webapp/multiedit-02.png new file mode 100644 index 00000000..0f5fefc3 Binary files /dev/null and b/website/site/content/docs/webapp/multiedit-02.png differ diff --git a/website/site/content/docs/webapp/multiedit-03.png b/website/site/content/docs/webapp/multiedit-03.png new file mode 100644 index 00000000..db97f9aa Binary files /dev/null and b/website/site/content/docs/webapp/multiedit-03.png differ diff --git a/website/site/content/docs/webapp/multiedit-04.png b/website/site/content/docs/webapp/multiedit-04.png new file mode 100644 index 00000000..9e14b1ae Binary files /dev/null and b/website/site/content/docs/webapp/multiedit-04.png differ diff --git a/website/site/content/docs/webapp/multiedit-05.png b/website/site/content/docs/webapp/multiedit-05.png new file mode 100644 index 00000000..b1e4f5a2 Binary files /dev/null and b/website/site/content/docs/webapp/multiedit-05.png differ diff --git a/website/site/content/docs/webapp/multiedit-06.png b/website/site/content/docs/webapp/multiedit-06.png new file mode 100644 index 00000000..dd559d35 Binary files /dev/null and b/website/site/content/docs/webapp/multiedit-06.png differ diff --git a/website/site/content/docs/webapp/multiedit.md b/website/site/content/docs/webapp/multiedit.md new file mode 100644 index 00000000..71f71a00 --- /dev/null +++ b/website/site/content/docs/webapp/multiedit.md @@ -0,0 +1,49 @@ ++++ +title = "Multi Edit" +weight = 25 ++++ + +## Toggle Selection Mode + +Docspell allows to edit and delete multiple items. Search the items +you want to edit or delete and then select them by changing into +"select mode". This changes the view slightly by adding a menu to the +main area and the item cards contain a check box: + +{{ figure(file="multiedit-01.png") }} + +Then select items by clicking on the card. You can also change the +search form and add more items to the selection. The top left shows +how many items are selected and allows to select and deselect all +visible items. Selected items are displayed in a different color. + +{{ figure(file="multiedit-02.png") }} + + +## Choose an Action: Edit + +Once all desired items are selected, choose an action. Currently you +can edit or delete them. When clicking "edit", the left side menu +changes to a form for changing the metadata: + +{{ figure(file="multiedit-03.png") }} + +Changing the metadata in that form immediately applies it to all +selected items. You can change the selection anytime. + +{{ figure(file="multiedit-04.png") }} + + +If you are done, just click on the icon from the beginning to go back +to "normal" mode. + +{{ figure(file="multiedit-05.png") }} + +## Choose an Action: Delete + +When choosing the delete action, a confirmation dialog shows up. If +you confirm the deletion, then all selected items are deleted at the +server and the view is switched back to normal mode afterwards. Note +that deleting a lot of items may take a while to finish. + +{{ figure(file="multiedit-06.png") }}