From 8324508b2c9680eb5cf50dd718cbd26ca3cbdc0d Mon Sep 17 00:00:00 2001 From: Zed Date: Thu, 19 Sep 2019 22:11:38 +0200 Subject: [PATCH] Add time range to search panel --- src/query.nim | 17 +++++++++++++++-- src/sass/inputs.scss | 35 ++++++++++++++++++++++++++++++++++- src/sass/search.scss | 20 ++++++++++---------- src/types.nim | 2 ++ src/views/renderutils.nim | 5 +++++ src/views/search.nim | 6 ++++++ 6 files changed, 72 insertions(+), 13 deletions(-) diff --git a/src/query.nim b/src/query.nim index 5c44dd5..091c835 100644 --- a/src/query.nim +++ b/src/query.nim @@ -15,7 +15,7 @@ const # Experimental, this might break in the future # Till then, it results in shorter urls const - posPrefix = "thGAVUV0VFVBa" + posPrefix = "thGAVUV0VFVB" posSuffix = "EjUAFQAlAFUAFQAA" template `@`(param: string): untyped = @@ -28,6 +28,8 @@ proc initQuery*(pms: Table[string, string]; name=""): Query = text: @"text", filters: validFilters.filterIt("f-" & it in pms), excludes: validFilters.filterIt("e-" & it in pms), + since: @"since", + until: @"until" ) if name.len > 0: @@ -71,6 +73,10 @@ proc genQueryParam*(query: Query): string = filters.add "-filter:" & e result = strip(param & filters.join(&" {query.sep} ")) + if query.since.len > 0: + result &= " since:" & query.since + if query.until.len > 0: + result &= " until:" & query.until if query.text.len > 0: result &= " " & query.text @@ -96,6 +102,11 @@ proc genQueryUrl*(query: Query): string = for i in query.excludes: params.add "i-" & i & "=on" + if query.since.len > 0: + params.add "since=" & query.since + if query.until.len > 0: + params.add "until=" & query.until + if params.len > 0: result &= params.join("&") @@ -103,4 +114,6 @@ proc cleanPos*(pos: string): string = pos.multiReplace((posPrefix, ""), (posSuffix, "")) proc genPos*(pos: string): string = - posPrefix & pos & posSuffix + result = posPrefix & pos + if "A==" notin result: + result &= posSuffix diff --git a/src/sass/inputs.scss b/src/sass/inputs.scss index a9ad11b..2fbc786 100644 --- a/src/sass/inputs.scss +++ b/src/sass/inputs.scss @@ -12,7 +12,8 @@ button { float: right; } -input[type="text"] { +input[type="text"], +input[type="date"] { @include input-colors; background-color: $bg_elements; padding: 1px 4px; @@ -22,6 +23,38 @@ input[type="text"] { font-size: 14px; } +input[type="date"]::-webkit-inner-spin-button { + opacity: 0; + margin: 0; + padding: 0; +} + +input::-webkit-calendar-picker-indicator { + opacity: 0; +} + +input::-webkit-datetime-edit-day-field:focus, +input::-webkit-datetime-edit-month-field:focus, +input::-webkit-datetime-edit-year-field:focus { + background-color: $accent; + color: $fg_color; + outline: none; +} + +.date-range { + display: block; + + .icon-container { + margin-left: -22px; + margin-right: 4px; + pointer-events: none; + } + + .search-title { + margin: 0 2px; + } +} + .icon-button button { color: $accent; text-decoration: none; diff --git a/src/sass/search.scss b/src/sass/search.scss index 2b5d86e..c84040c 100644 --- a/src/sass/search.scss +++ b/src/sass/search.scss @@ -40,7 +40,7 @@ @include input-colors; } - @include create-toggle(search-panel, 140px); + @include create-toggle(search-panel, 190px); } .search-panel { @@ -82,14 +82,14 @@ } .profile-tabs { - @include search-resize(785px, 5, 185px); - @include search-resize(725px, 4, 185px); - @include search-resize(600px, 6, 140px); - @include search-resize(530px, 5, 185px); - @include search-resize(475px, 4, 185px); - @include search-resize(406px, 3, 250px); + @include search-resize(785px, 5, 240px); + @include search-resize(725px, 4, 240px); + @include search-resize(600px, 6, 190px); + @include search-resize(530px, 5, 240px); + @include search-resize(480px, 4, 240px); + @include search-resize(410px, 3, 305px); } -@include search-resize(530px, 5, 185px); -@include search-resize(475px, 4, 185px); -@include search-resize(406px, 3, 250px); +@include search-resize(530px, 5, 240px); +@include search-resize(480px, 4, 240px); +@include search-resize(410px, 3, 305px); diff --git a/src/types.nim b/src/types.nim index 03d01af..c23cc62 100644 --- a/src/types.nim +++ b/src/types.nim @@ -66,6 +66,8 @@ type includes*: seq[string] excludes*: seq[string] fromUser*: seq[string] + since*: string + until*: string sep*: string Result*[T] = ref object diff --git a/src/views/renderutils.nim b/src/views/renderutils.nim index 0273555..3407afd 100644 --- a/src/views/renderutils.nim +++ b/src/views/renderutils.nim @@ -83,3 +83,8 @@ proc genSelect*(pref, label, state: string; options: seq[string]): VNode = option(value=opt, selected=""): text opt else: option(value=opt): text opt + +proc genDate*(pref, state: string): VNode = + buildHtml(span): + verbatim &"" + icon "calendar" diff --git a/src/views/search.nim b/src/views/search.nim index 082db7e..c210adb 100644 --- a/src/views/search.nim +++ b/src/views/search.nim @@ -76,6 +76,12 @@ proc renderSearchPanel*(query: Query): VNode = else: k in query.excludes genCheckbox(&"{f[0]}-{k}", v, state) + span(class="search-title"): text "Time range" + tdiv(class="date-range"): + genDate("since", query.since) + span(class="search-title"): text "-" + genDate("until", query.until) + proc renderTweetSearch*(tweets: Result[Tweet]; prefs: Prefs; path: string): VNode = let query = tweets.query buildHtml(tdiv(class="timeline-container")):