From 6ef4cc36b22ef6484ec21d98088de6319ca5857a Mon Sep 17 00:00:00 2001 From: tobi Date: Thu, 17 Apr 2025 18:32:25 +0200 Subject: [PATCH] more dicking abuot --- internal/api/model/status.go | 6 ++ internal/typeutils/internaltofrontend.go | 25 +++++++++ web/assets/themes/ecks-pee.css | 25 +++++++++ web/assets/themes/midnight-trip.css | 20 +++++++ web/assets/themes/moonlight-hunt.css | 6 ++ web/assets/themes/soft.css | 6 ++ web/source/css/status.css | 70 +++++++++++++----------- web/template/status.tmpl | 22 +------- web/template/status_info.tmpl | 67 ++++++++++++++++------- 9 files changed, 176 insertions(+), 71 deletions(-) diff --git a/internal/api/model/status.go b/internal/api/model/status.go index ec09f702d..bcd0c0f93 100644 --- a/internal/api/model/status.go +++ b/internal/api/model/status.go @@ -166,6 +166,12 @@ type WebStatus struct { // after the "main" thread, so it and everything // below it can be considered "replies". ThreadFirstReply bool + + // Sorted slice of StatusEdit times for + // this status, from latest to oldest. + // Only set if status has been edited. + // Last entry is always creation time. + EditTimeline []string `json:"-"` } /* diff --git a/internal/typeutils/internaltofrontend.go b/internal/typeutils/internaltofrontend.go index 91c9fea8a..4d92f0616 100644 --- a/internal/typeutils/internaltofrontend.go +++ b/internal/typeutils/internaltofrontend.go @@ -1217,6 +1217,31 @@ func (c *Converter) StatusToWebStatus( // Mark local. webStatus.Local = *s.Local + // Get edit history for this status. + if webStatus.EditedAt != nil { + if len(s.Edits) != len(s.EditIDs) { + s.Edits, err = c.state.DB.GetStatusEditsByIDs(ctx, s.EditIDs) + if err != nil && !errors.Is(err, db.ErrNoEntries) { + err := gtserror.Newf("db error getting status edits: %w", err) + return nil, err + } + } + + for _, edit := range s.Edits { + webStatus.EditTimeline = append( + webStatus.EditTimeline, + util.FormatISO8601(edit.CreatedAt), + ) + } + + webStatus.EditTimeline = append( + webStatus.EditTimeline, + *webStatus.EditedAt, + ) + + slices.Reverse(webStatus.EditTimeline) + } + // Set additional templating // variables on media attachments. diff --git a/web/assets/themes/ecks-pee.css b/web/assets/themes/ecks-pee.css index a85e5da0b..bd479c67b 100644 --- a/web/assets/themes/ecks-pee.css +++ b/web/assets/themes/ecks-pee.css @@ -238,6 +238,31 @@ blockquote { border-right: 1px solid #001ea0; } +/* Status info dropdown button */ +.status .status-info .status-stats details.stats-more-info > summary { + color: var(--button-fg); + background: var(--ecks-pee-start-button); + border-left: 1px solid var(--ecks-pee-darkest-green); + border-right: 1px solid var(--ecks-pee-darkest-green); +} +.status .status-info .status-stats details.stats-more-info > summary:hover { + outline: 0; + background: var(--ecks-pee-light-green); +} + +/* Status info dropdown content */ +.status .status-info .status-stats .stats-more-info-content, +.status.expanded .status-info .status-stats .stats-more-info-content { + color: black; + text-shadow: none; + background: var(--ecks-pee-beige); + border: 0.2rem outset var(--ecks-pee-darker-beige); + border-radius: 0; +} +.status .status-info .status-stats .stats-item.edit-timeline { + border-top: var(--ecks-pee-dotted-trim); +} + /* Button stuff */ button, .button { border-left: 1px solid var(--ecks-pee-darkest-green); diff --git a/web/assets/themes/midnight-trip.css b/web/assets/themes/midnight-trip.css index 059e4ac8e..1537e3e3c 100644 --- a/web/assets/themes/midnight-trip.css +++ b/web/assets/themes/midnight-trip.css @@ -129,6 +129,26 @@ html, body { background: black; } +/* Status info dropdown button */ +.status .status-info .status-stats details.stats-more-info > summary { + color: var(--button-fg); + background: var(--button-bg); +} +.status .status-info .status-stats details.stats-more-info > summary:hover { + outline: 0; + background: var(--button-hover-bg); +} + +/* Status info dropdown content */ +.status.expanded .status-info .status-stats .stats-more-info-content, +.status .status-info .status-stats .stats-more-info-content { + background-color: black; + border: 0.25rem solid var(--magenta); +} +.status .status-info .status-stats .stats-item.edit-timeline { + border-top: 0.15rem dotted var(--acid-green); +} + /* Back + next links */ .backnextlinks { background: var(--gray1); diff --git a/web/assets/themes/moonlight-hunt.css b/web/assets/themes/moonlight-hunt.css index 630c7cd21..8dcfb0bb6 100644 --- a/web/assets/themes/moonlight-hunt.css +++ b/web/assets/themes/moonlight-hunt.css @@ -143,6 +143,12 @@ blockquote { background: var(--outer-space); } +/* Status info dropdown content */ +.status.expanded .status-info .status-stats .stats-more-info-content, +.status .status-info .status-stats .stats-more-info-content { + background: var(--outer-space); +} + /* Make show more/less buttons more legible */ .status .button { border: 1px solid var(--feral-orange); diff --git a/web/assets/themes/soft.css b/web/assets/themes/soft.css index 691558bee..01a8729f7 100644 --- a/web/assets/themes/soft.css +++ b/web/assets/themes/soft.css @@ -142,3 +142,9 @@ code, code[class*="language-"] { blockquote { background-color: var(--soft-lilac-translucent); } + +/* Status info dropdown content */ +.status.expanded .status-info .status-stats .stats-more-info-content, +.status .status-info .status-stats .stats-more-info-content { + background: var(--soft-pink); +} diff --git a/web/source/css/status.css b/web/source/css/status.css index a61810de5..11a6fee82 100644 --- a/web/source/css/status.css +++ b/web/source/css/status.css @@ -111,7 +111,7 @@ .text-spoiler > summary, .text { position: relative; - z-index: 2; + z-index: 1; } .text-spoiler > summary { @@ -264,8 +264,10 @@ .stats-more-info-content { display: flex; flex-wrap: wrap; + } + + .stats-grouping { column-gap: 1rem; - row-gap: 0.25rem; } .stats-item { @@ -279,6 +281,15 @@ margin-left: auto; & > summary { + display: flex; + + /* + Make it easy to touch. + */ + width: 3rem; + height: 2rem; + margin: -0.25rem -0.5rem; + /* Remove details/summary arrow and use our own. @@ -297,16 +308,13 @@ } /* - Normalize width and - alignment of fa icons. + Normalize fa + icon alignment. */ + align-items: center; i.fa { - width: 2rem; text-align: center; } - display: flex; - height: 100%; - align-items: center; cursor: pointer; border-radius: $br-inner; @@ -342,8 +350,11 @@ .stats-more-info-content { position: absolute; right: 0; + z-index: 3; + flex-direction: column; max-width: 100%; + row-gap: 0.5rem; background: $status-info-bg; padding: 0.5rem 0.75rem; @@ -351,42 +362,39 @@ box-shadow: $boxshadow; opacity: 1; + + .stats-grouping { + width: 100%; + justify-content: space-between; + } } .stats-item.published-at dd time.dt-published { text-decoration: underline; } - .stats-item:not(.published-at):not(.edited-at) { - z-index: 1; + .stats-item:not(.published-at):not(.edit-timeline) { + z-index: 2; user-select: none; } + + .stats-item.edit-timeline { + flex-direction: column; + width: 100%; + border-top: $boxshadow-border; + padding-top: 0.4rem; + + dd { + display: flex; + align-items: center; + gap: 0.4rem; + } + } } grid-column: span 3; } - .status-link { - top: 0; - right: 0; - bottom: 0; - left: 0; - overflow: hidden; - text-indent: 100%; - white-space: nowrap; - - position: absolute; - z-index: 0; - - &:focus-visible { - /* - Inset focus to compensate for themes where - statuses have a really thick border. - */ - outline-offset: -0.25rem; - } - } - &:first-child { /* top left, top right */ border-top-left-radius: $br; diff --git a/web/template/status.tmpl b/web/template/status.tmpl index 4263e6020..9d2f80a5e 100644 --- a/web/template/status.tmpl +++ b/web/template/status.tmpl @@ -90,27 +90,7 @@ media photoswipe-gallery {{ (len .) | oddOrEven }} {{ if eq (len .) 1 }}single{{ {{- end }} -