diff --git a/ui/src/Page/Mailbox.elm b/ui/src/Page/Mailbox.elm index 8996bf6..108d60f 100644 --- a/ui/src/Page/Mailbox.elm +++ b/ui/src/Page/Mailbox.elm @@ -12,6 +12,7 @@ import Html.Attributes ( alt , class , classList + , disabled , download , href , id @@ -500,12 +501,18 @@ view model = [ div [ class ("mailbox " ++ mode) ] [ aside [ class "message-list-controls" ] [ input - [ type_ "search" + [ type_ "text" , placeholder "search" , Events.onInput OnSearchInput , value model.searchInput ] [] + , button + [ Events.onClick (OnSearchInput "") + , disabled (model.searchInput == "") + , alt "Clear Search" + ] + [ i [ class "fas fa-times" ] [] ] , button [ Events.onClick PurgeMailboxPrompt , alt "Purge Mailbox" diff --git a/ui/src/mailbox.css b/ui/src/mailbox.css index 353b81e..3efccd4 100644 --- a/ui/src/mailbox.css +++ b/ui/src/mailbox.css @@ -19,7 +19,7 @@ } .message-list-controls button, -.message-list-controls input[type="search"] { +.message-list-controls input { border: 1px solid var(--border-color); border-radius: 3px; } @@ -30,7 +30,12 @@ padding: 0 6px; } -.message-list-controls input[type="search"] { +.message-list-controls button:disabled { + color: var(--disabled-color); + cursor: default; +} + +.message-list-controls input { flex: 1 1 auto; padding: 2px 4px; } diff --git a/ui/src/main.css b/ui/src/main.css index 9039b20..db10671 100644 --- a/ui/src/main.css +++ b/ui/src/main.css @@ -4,6 +4,7 @@ --bg-color: #fff; --primary-color: #333; --low-color: #666; + --disabled-color: #ddd; --high-color: #337ab7; --border-color: #ddd; --placeholder-color: #9f9f9f; @@ -53,6 +54,7 @@ body, button, input, table { button { background: none; + cursor: pointer; } h1, h2, h3, h4, h5, h6, p {