Merge pull request #1170 from eikek/small-ui-improvements

Small UI improvements

modules/restserver/src/main/templates/index.html

@@ -58,6 +58,7 @@
          var elmFlags = {
              "account": account,
              "pdfSupported": pdfSupported,
+             "innerWidth": window.innerWidth,
              "config": {{{flagsJson}}}
          };
         </script>

modules/webapp/src/main/elm/App/Data.elm

@@ -125,7 +125,7 @@ init key url flags_ settings =
       , userMenuOpen = False
       , subs = Sub.none
       , uiSettings = settings
-      , sidebarVisible = settings.sideMenuVisible
+      , sidebarVisible = flags.innerWidth > 768 && settings.sideMenuVisible
       , anonymousTheme = Data.UiTheme.Light
       , anonymousUiLang = Messages.UiLanguage.English
       , langMenuOpen = False

modules/webapp/src/main/elm/App/Update.elm

@@ -14,7 +14,7 @@ import Api
 import App.Data exposing (..)
 import Browser exposing (UrlRequest(..))
 import Browser.Navigation as Nav
-import Data.Flags
+import Data.Flags exposing (Flags)
 import Data.ServerEvent exposing (ServerEvent(..))
 import Data.UiSettings exposing (UiSettings)
 import Data.UiTheme
@@ -349,10 +349,13 @@ applyClientSettings texts model settings =
     let
         setTheme =
             Ports.setUiTheme settings.uiTheme
+
+        flags =
+            model.flags
     in
     Util.Update.andThen2
         [ \m ->
-            ( { m | sidebarVisible = settings.sideMenuVisible }
+            ( { m | sidebarVisible = flags.innerWidth > 768 && settings.sideMenuVisible }
             , setTheme
             , Sub.none
             )

modules/webapp/src/main/elm/Comp/EmailInput.elm

@@ -21,7 +21,7 @@ import Data.DropdownStyle as DS
 import Data.Flags exposing (Flags)
 import Html exposing (..)
 import Html.Attributes exposing (..)
-import Html.Events exposing (onClick, onInput)
+import Html.Events exposing (onBlur, onClick, onInput)
 import Http
 import Styles as S
 import Util.Html exposing (onKeyUp)
@@ -34,6 +34,7 @@ type alias Model =
     , menuOpen : Bool
     , candidates : List String
     , active : Maybe String
+    , backspaceCount : Int
     }
 
 
@@ -43,6 +44,7 @@ init =
     , menuOpen = False
     , candidates = []
     , active = Nothing
+    , backspaceCount = 0
     }
 
 
@@ -94,7 +96,14 @@ update flags current msg model =
                         email =
                             Maybe.withDefault model.input model.active
                     in
-                    update flags current (AddEmail email) model
+                    if email == "" then
+                        ( model, Cmd.none, current )
+
+                    else
+                        update flags current (AddEmail email) model
+
+                removeLast =
+                    ( { model | backspaceCount = 0 }, Cmd.none, Util.List.dropRight 1 current )
             in
             case Util.Html.intToKeyCode code of
                 Just Util.Html.Up ->
@@ -128,6 +137,13 @@ update flags current msg model =
                 Just Util.Html.Space ->
                     addCurrent
 
+                Just Util.Html.Backspace ->
+                    if model.backspaceCount >= 1 then
+                        removeLast
+
+                    else
+                        ( { model | backspaceCount = model.backspaceCount + 1 }, Cmd.none, current )
+
                 _ ->
                     ( model, Cmd.none, current )
 
@@ -154,9 +170,12 @@ type alias ViewSettings =
 view2 : ViewSettings -> List String -> Model -> Html Msg
 view2 cfg values model =
     div [ class "text-sm flex-row space-x-2 relative" ]
-        [ div [ class cfg.style.link ]
+        [ div
+            [ class cfg.style.link
+            , class "flex-wrap"
+            ]
             [ div
-                [ class "flex flex-row space-x-2 mr-2"
+                [ class "flex flex-row space-x-2 mr-2 flex-wrap"
                 , classList [ ( "hidden", List.isEmpty values ) ]
                 ]
                 (List.map renderValue2 values)
@@ -166,6 +185,7 @@ view2 cfg values model =
                 , placeholder cfg.placeholder
                 , onKeyUp KeyPress
                 , onInput SetInput
+                , onBlur (KeyPress 13)
                 , class "inline-flex w-24 border-0 px-0 focus:ring-0 h-6 text-sm"
                 , class "placeholder-gray-400 dark:text-bluegray-200 dark:bg-bluegray-800 dark:border-bluegray-500"
                 ]

modules/webapp/src/main/elm/Comp/ScanMailboxForm.elm

@@ -788,6 +788,9 @@ view2 texts flags extraClasses settings model =
 
         tabActive t =
             ( tabLook t, ToggleAkkordionTab t.name )
+
+        isNew =
+            model.settings.id == ""
     in
     div
         [ class extraClasses
@@ -797,19 +800,24 @@ view2 texts flags extraClasses settings model =
             { start =
                 [ MB.PrimaryButton
                     { tagger = Submit
-                    , label = texts.basics.submit
+                    , label = texts.save
-                    , title = texts.basics.submitThisForm
+                    , title =
+                        if isNew then
+                            texts.saveNewTitle
+
+                        else
+                            texts.updateTitle
                     , icon = Just "fa fa-save"
                     }
                 , MB.SecondaryButton
                     { tagger = Cancel
-                    , label = texts.basics.cancel
+                    , label = texts.basics.back
                     , title = texts.basics.backToList
                     , icon = Just "fa fa-arrow-left"
                     }
                 ]
             , end =
-                if model.settings.id /= "" then
+                if not isNew then
                     [ startOnceBtn
                     , MB.DeleteButton
                         { tagger = RequestDelete

modules/webapp/src/main/elm/Data/Flags.elm

@@ -42,6 +42,7 @@ type alias Config =
 type alias Flags =
     { account : Maybe AuthResult
     , pdfSupported : Bool
+    , innerWidth : Int
     , config : Config
     }
 

modules/webapp/src/main/elm/Messages/Comp/ScanMailboxForm.elm

@@ -72,6 +72,9 @@ type alias Texts =
     , invalidCalEvent : String
     , attachmentsOnlyLabel : String
     , attachmentsOnlyInfo : String
+    , save : String
+    , saveNewTitle : String
+    , updateTitle : String
     }
 
 
@@ -153,6 +156,9 @@ gb =
     , invalidCalEvent = "The calendar event is not valid."
     , attachmentsOnlyLabel = "Only import e-mail attachments"
     , attachmentsOnlyInfo = "Discards the e-mail body and only imports the attachments."
+    , save = "Save"
+    , saveNewTitle = "Save a new task"
+    , updateTitle = "Update the task"
     }
 
 
@@ -229,4 +235,7 @@ kann hier ein Wert für alle festgelegt werden. Bei 'Automatisch' wird auf den S
     , invalidCalEvent = "Das Kalenderereignis ist ungültig."
     , attachmentsOnlyLabel = "Nur Anhänge importieren"
     , attachmentsOnlyInfo = "Verwirft den E-Mail Text und importiert nur die Anhänge."
+    , save = "Speichern"
+    , saveNewTitle = "Einen neuen Auftrag speichern"
+    , updateTitle = "Den Auftrag aktualisieren"
     }

modules/webapp/src/main/elm/Util/Html.elm

@@ -44,6 +44,8 @@ type KeyCode
     | Right
     | Enter
     | Space
+    | Backspace
+    | Tab
     | ESC
     | Letter_C
     | Letter_N
@@ -91,6 +93,12 @@ intToKeyCode code =
         32 ->
             Just Space
 
+        8 ->
+            Just Backspace
+
+        9 ->
+            Just Tab
+
         27 ->
             Just ESC
 

website/site/content/docs/webapp/mailitem.md

@@ -34,7 +34,10 @@ field shows completion proposals from all contacts in your address
 book (from organizations and persons). Choose an address by pressing
 *Enter* or by clicking a proposal from the list. The proposal list can
 be iterated by the *Up* and *Down* arrows. You can type in any
-address, of course, it doesn't need to match a proposal.
+address, of course, it doesn't need to match a proposal. If you type
+in an arbitrary address, hit *Enter* or *Space* in order to add the
+current address. You can hit *Backspace* two times to remove the last
+e-mail address.
 
 If you have multiple mail settings defined, you can choose in the top
 dropdown which account to use for sending.

website/site/content/docs/webapp/share.md

@@ -113,6 +113,12 @@ to copy it.
 
 {{ figure(file="share-03.png") }}
 
+When typing in an e-mail address, there are completion proposals
+provided from your address book. If you type in an arbitrary address
+(not in the proposals), hit *Enter* or *Space* in order to add the
+current address. You can hit *Backspace* two times to remove the last
+e-mail address.
+
 The new share can now be found in *Collective Profile -> Shares*.
 Clicking *Done* brings you back to the search results.