tickets

17.4 KB

1. // styles.hl — ALL of the app's CSS, served as /__hl/app.css. Components carry no Style
2. // blocks: markup is domain tags (<ticket-board>, <ticket-state>, …), this file lays them out.
3. //
4. // TOKENS (ticket antcolony#3, mission 021): the WorldAPI palette + semantic tokens are declared in
5. // `shared/tokens.hl` as hl:web css variables (`static colorText = var(light)`), hand-written, a
6. // verbatim copy of loreana /media/STORAGE/projects/worldapi-tokens/tokens.hl (vendored like
7. // plugins/; edit it THERE and cp it here). This file IMPORTS the tokens it uses and writes them as
8. // members (`color = colorText`, `border = '1px solid ' + colorBorder`); hl:web names each token
9. // after its member (--color-text), writes all of tokens.hl's tokens into the one :root and every
10. // use as var(--color-text). The app sets only its accent (`colorAccent = var(…)` below, written
11. // after the default, so it wins). hl:web does this itself since hybriel#39 (the mission-021 patch is gone).
12. //
13. // In a styles file a bare name is a TAG (camelCase → kebab: `ticketState` is
14. // `ticket-state`), a quoted name is a selector written verbatim. MOBILE FIRST: every
15. // rule is the phone's; the one min-width block adds the wide layout.
16. import { var } from 'hl:web/css'
17. import { purple, colorText, colorBackground, colorTextStrong, colorTextMuted, colorBackgroundSunken, colorAccentText, colorSurface, colorBorder, colorDanger, colorSuccess, colorAction, colorWarning } from '../shared/tokens.hl'
19. colorAccent = var(purple) // the app's accent: the only token this app sets
21. '*,
22. *::before,
23. *::after' { boxSizing = 'border-box' }
25. html { colorScheme = 'dark' }
26. body { margin = '0' font = '16px/1.5 system-ui, sans-serif' color = colorText background = colorBackground }
27. a { color = colorAccent textDecoration = 'none' }
28. 'a:hover' { textDecoration = 'underline' }
29. h1 { margin = '0' fontSize = '1.3rem' lineHeight = '1.3' color = colorTextStrong overflowWrap = 'anywhere' }
30. h2 { margin = '0 0 .5rem' fontSize = '1rem' color = colorTextStrong }
31. time { color = colorTextMuted fontSize = '.85rem' whiteSpace = 'nowrap' }
33. 'input,
34. textarea,
35. select' { font = 'inherit' width = '100%' padding = '.5rem .7rem' color = colorTextStrong background = colorBackgroundSunken border = '1px solid ' + colorBorder borderRadius = '.4rem' }
36. 'input:focus,
37. textarea:focus,
38. select:focus' { outline = '2px solid ' + colorAccent outlineOffset = '1px' }
39. textarea { resize = 'vertical' minHeight = '4.5rem' }
40. label { display = 'grid' gap = '.25rem' fontSize = '.9rem' color = colorTextMuted }
41. button { font = 'inherit' fontWeight = '600' padding = '.55rem 1.1rem' color = colorAccentText background = colorAccent border = '0' borderRadius = '.4rem' cursor = 'pointer' justifySelf = 'start' }
42. 'button:hover' { filter = 'brightness(1.1)' }
44. // ---- the shell ---------------------------------------------------------------------------
45. applicationHeader { position = 'sticky' top = '0' zIndex = '5' display = 'flex' flexWrap = 'wrap' alignItems = 'center' gap = '.5rem 1rem' padding = '.6rem 1rem' background = colorBackgroundSunken borderBottom = '1px solid ' + colorBorder }
46. 'application-header .brand' { fontWeight = '800' fontSize = '1.15rem' color = colorAccent marginRight = 'auto' }
47. 'application-header nav' { display = 'flex' gap = '1rem' }
48. 'application-header nav a' { color = colorText }
49. inboxBadge { display = 'inline-block' marginLeft = '.35rem' padding = '0 .45rem' borderRadius = '999px' fontSize = '.8rem' fontWeight = '700' color = colorAccentText background = colorAccent }
50. main { maxWidth = '60rem' margin = '0 auto' padding = '1rem' }
51. // offline (mission 046, components/main.hl): the note, and the invisible probe whose animation ticks every second
52. offlineNote { display = 'block' padding = '.5rem 1rem' color = colorTextStrong background = colorSurface borderBottom = '1px solid ' + colorBorder }
53. netProbe { position = 'fixed' left = '0' top = '0' width = '1px' height = '1px' opacity = '0' pointerEvents = 'none' animation = 'tickets-net-tick 1s linear infinite' }
54. '@keyframes tickets-net-tick' = {
55. 'from' = { opacity = '0' }
56. to = { opacity = '0' }
57. }
59. // ---- the login, top right (ticket #7): ident's selector (its shadow DOM in ident's design,
60. // restyled to tickets' accent through its custom properties), the login button, who you are
61. userBox { display = 'flex' flexWrap = 'wrap' alignItems = 'center' justifyContent = 'flex-end' gap = '.4rem .6rem' marginLeft = 'auto' maxWidth = '100%' }
62. identSelector { '--ident-accent' = colorAccent '--ident-accent-text' = colorAccentText '--ident-background' = colorSurface '--ident-border' = colorBorder '--ident-font' = '600 .9rem/1.4 system-ui, sans-serif' }
63. 'ident-selector::part(button)' { padding = '.35rem .8rem' }
64. 'ident-selector::part(status)' { padding = '.35rem .8rem' }
65. '#whoami' { fontWeight = '600' color = colorTextStrong overflowWrap = 'anywhere' }
66. 'a.button' { display = 'inline-block' fontWeight = '600' fontSize = '.9rem' padding = '.35rem .8rem' color = colorAccent border = '1px solid ' + colorAccent borderRadius = '.4rem' }
67. 'a.button:hover' { textDecoration = 'none' background = colorSurface }
68. 'button.quiet' { color = colorText background = 'transparent' border = '1px solid ' + colorBorder padding = '.35rem .8rem' fontSize = '.9rem' }
69. 'button.danger' { color = colorDanger borderColor = colorDanger }
70. namePrompt { display = 'block' maxWidth = '60rem' margin = '1rem auto 0' padding = '0 1rem' }
71. '#nameform' { display = 'grid' gap = '.5rem' padding = '.8rem' background = colorSurface border = '1px solid ' + colorAccent borderRadius = '.5rem' }
72. '.banner' { maxWidth = '60rem' margin = '.8rem auto 0' padding = '0 1rem' }
73. '.hint' { margin = '0' fontSize = '.9rem' color = colorTextMuted }
74. '.muted' { margin = '0' fontSize = '.9rem' color = colorTextMuted }
76. // ---- /you: the account and the API tokens ---------------------------------------------------
77. youView { display = 'grid' gap = '1.2rem' }
78. 'you-view section' { display = 'grid' gap = '.6rem' padding = '.8rem' background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.5rem' }
79. 'you-view dl' { display = 'grid' gap = '.2rem' margin = '0' }
80. 'you-view dt' { fontSize = '.85rem' color = colorTextMuted }
81. 'you-view dd' { margin = '0 0 .4rem' color = colorTextStrong overflowWrap = 'anywhere' }
82. 'you-view code' { overflowWrap = 'anywhere' wordBreak = 'break-all' }
83. '#tokenform' { display = 'grid' gap = '.5rem' }
84. tokenShown { display = 'grid' gap = '.4rem' padding = '.7rem' border = '1px solid ' + colorSuccess borderRadius = '.4rem' }
85. 'token-shown p' { margin = '0' }
86. '#newtoken' { color = colorSuccess fontSize = '.95rem' }
87. '#tokenlist' { listStyle = 'none' margin = '0' padding = '0' display = 'grid' gap = '.4rem' }
88. '#tokenlist li' { display = 'flex' flexWrap = 'wrap' alignItems = 'center' gap = '.3rem .8rem' padding = '.4rem .6rem' background = colorBackgroundSunken borderRadius = '.4rem' }
89. '#tokenlist .label' { flex = '1 1 10rem' color = colorTextStrong overflowWrap = 'anywhere' }
91. // ---- ticket lists (/, filters, /inbox) -----------------------------------------------------
92. ticketBoard { display = 'grid' gap = '1rem' }
93. ticketFilters { display = 'grid' gap = '.5rem' }
94. 'ticket-filters nav' { display = 'flex' flexWrap = 'wrap' gap = '.35rem' }
95. 'ticket-filters a' { padding = '.2rem .65rem' fontSize = '.85rem' color = colorText border = '1px solid ' + colorBorder borderRadius = '999px' }
96. 'ticket-filters a.selected' { color = colorAccentText background = colorAccent borderColor = colorAccent }
97. '.tickets' { listStyle = 'none' margin = '0' padding = '0' display = 'grid' gap = '.5rem' }
98. '.tickets li' { display = 'grid' gridTemplateColumns = 'minmax(0, 1fr)' gap = '.3rem' padding = '.7rem .8rem' background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.5rem' }
99. '.tickets li ticket-state' { justifySelf = 'start' }
100. '.tickets .subject' { color = colorTextStrong fontWeight = '600' overflowWrap = 'anywhere' }
101. ticketRef { marginRight = '.4rem' color = colorTextMuted fontWeight = '400' }
102. formerRef { marginLeft = '.2rem' fontSize = '.85rem' color = colorTextMuted }
103. ticketMeta { display = 'flex' flexWrap = 'wrap' gap = '.2rem .8rem' fontSize = '.85rem' }
104. '.empty' { margin = '0' padding = '1rem' textAlign = 'center' color = colorTextMuted border = '1px dashed ' + colorBorder borderRadius = '.5rem' }
105. '.notice' { margin = '0' color = colorSuccess }
107. // the new-ticket form, folded away until asked for
108. details { background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.5rem' }
109. summary { padding = '.6rem .8rem' cursor = 'pointer' fontWeight = '600' color = colorAccent }
110. 'details form' { display = 'grid' gap = '.7rem' padding = '0 .8rem .8rem' }
112. // ---- the state badge: one colour per state -------------------------------------------------
113. ticketState { display = 'inline-block' padding = '.05rem .55rem' fontSize = '.8rem' fontWeight = '600' whiteSpace = 'nowrap' borderRadius = '999px' border = '1px solid currentColor' color = colorTextMuted }
114. 'ticket-state.open' { color = colorAction }
115. 'ticket-state.progress' { color = colorWarning }
116. 'ticket-state.pending' { color = colorTextMuted }
117. 'ticket-state.review' { color = colorAccent }
118. 'ticket-state.reopened' { color = colorDanger }
119. 'ticket-state.done' { color = colorSuccess }
120. 'ticket-state.canceled' { color = colorTextMuted }
121. 'ticket-filters a.selected.open,
122. ticket-filters a.selected.progress,
123. ticket-filters a.selected.pending,
124. ticket-filters a.selected.review,
125. ticket-filters a.selected.reopened,
126. ticket-filters a.selected.done,
127. ticket-filters a.selected.canceled' { color = colorAccentText }
129. // ---- ticket #20: projects, members, assignee, the inbox ------------------------------------------
130. projectActions { display = 'flex' flexWrap = 'wrap' gap = '.5rem' }
131. // ticket #21: the apps connected to a project, and the connect page
132. '.connections' { listStyle = 'none' margin = '0' padding = '0' display = 'grid' gap = '.4rem' }
133. '.connections li' { display = 'flex' flexWrap = 'wrap' alignItems = 'center' gap = '.2rem .6rem' padding = '.4rem .8rem' background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.5rem' fontSize = '.9rem' }
134. connectPage { display = 'grid' gap = '1rem' maxWidth = '38rem' }
135. 'connect-page form' { display = 'grid' gap = '.8rem' }
136. projectDescription { display = 'block' padding = '.8rem' overflowWrap = 'anywhere' background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.5rem' }
137. assignee { color = colorTextMuted }
138. 'assignee::before' { content = '"→ "' }
139. 'ticket-view .people' { margin = '0' color = colorTextMuted fontSize = '.9rem' }
140. 'ticket-view .people strong' { color = colorText }
141. 'project-form,
142. project-settings' { display = 'grid' gridTemplateColumns = 'minmax(0, 1fr)' gap = '1rem' }
143. 'project-form form,
144. project-settings form,
145. project-settings section' { display = 'grid' gap = '.6rem' }
146. 'project-settings h1,
147. project-settings h2' { margin = '0' }
148. 'project-settings h2' { fontSize = '1.1rem' }
149. '#members' { listStyle = 'none' margin = '0' padding = '0' display = 'grid' gap = '.4rem' }
150. '#members li' { display = 'flex' flexWrap = 'wrap' alignItems = 'center' gap = '.4rem .8rem' padding = '.4rem .6rem' background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.4rem' }
151. '#members strong' { flex = '1 1 8rem' }
152. inviteShown { display = 'block' padding = '.7rem .8rem' overflowWrap = 'anywhere' background = colorSurface border = '1px solid ' + colorAccent borderRadius = '.5rem' }
153. 'invite-shown p' { margin = '0 0 .4rem' }
154. '#projectlist' { listStyle = 'none' margin = '0' padding = '0' display = 'grid' gap = '.3rem' }
155. '.role' { color = colorTextMuted fontSize = '.85rem' }
156. '#reviewbox,
157. #pendingbox' { display = 'grid' gap = '.5rem' }
158. '#reviewbox h2,
159. #pendingbox h2' { margin = '0' fontSize = '1.1rem' }
161. // ---- one ticket ----------------------------------------------------------------------------
162. ticketView { display = 'grid' gridTemplateColumns = 'minmax(0, 1fr)' gap = '1.2rem' }
163. 'ticket-view header' { display = 'grid' gap = '.4rem' }
164. 'ticket-view header p' { margin = '0' }
165. 'ticket-view header ticket-state' { justifySelf = 'start' }
166. 'ticket-view .dates' { color = colorTextMuted fontSize = '.85rem' }
167. ticketSummary { display = 'block' padding = '.8rem' overflowWrap = 'anywhere' background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.5rem' }
168. 'ticket-view section' { display = 'grid' gap = '.7rem' }
169. '#events' { listStyle = 'none' margin = '0' padding = '0' display = 'grid' gap = '.5rem' borderLeft = '2px solid ' + colorBorder }
170. '#events > li' { marginLeft = '.8rem' padding = '.5rem .7rem' background = colorSurface borderRadius = '.4rem' }
171. '#events > li.state' { background = 'transparent' padding = '.2rem .7rem' }
172. eventHead { display = 'block' fontSize = '.9rem' }
173. 'event-head strong' { color = colorTextStrong }
174. eventText { display = 'block' marginTop = '.3rem' overflowWrap = 'anywhere' }
175. 'ticket-view form' { display = 'grid' gap = '.5rem' }
177. // ---- ticket #8: the author's edit form; an edit in the history keeps what was before -------
178. '#editform' { padding = '.8rem' background = colorSurface border = '1px solid ' + colorAccent borderRadius = '.5rem' }
179. formButtons { display = 'flex' flexWrap = 'wrap' gap = '.5rem' }
180. 'event-text.edit' { fontSize = '.9rem' color = colorTextMuted }
181. 'event-text.edit p' { margin = '0' }
182. 'event-text.edit s' { color = colorText }
183. 'event-text.edit details' { marginTop = '.3rem' background = colorBackgroundSunken }
184. 'event-text.edit summary' { padding = '.3rem .6rem' fontWeight = '400' fontSize = '.85rem' }
185. 'event-text.edit markdown-text' { padding = '0 .6rem .5rem' color = colorText }
187. // ---- ticket #6: Markdown in text fields (components/markdown.hl). Line breaks inside a
188. // paragraph stay visible (the page showed the texts with pre-wrap before) ----------------------
189. markdownText { display = 'block' }
190. 'markdown-text > :first-child' { marginTop = '0' }
191. 'markdown-text > :last-child' { marginBottom = '0' }
192. 'markdown-text p,
193. markdown-text li' { whiteSpace = 'pre-wrap' }
194. 'markdown-text p' { margin = '.5rem 0' }
195. 'markdown-text h3,
196. markdown-text h4,
197. markdown-text h5' { margin = '.9rem 0 .4rem' lineHeight = '1.3' color = colorTextStrong }
198. 'markdown-text h3' { fontSize = '1.15rem' }
199. 'markdown-text h4' { fontSize = '1.02rem' }
200. 'markdown-text h5' { fontSize = '.95rem' }
201. 'markdown-text ul,
202. markdown-text ol' { margin = '.5rem 0' paddingLeft = '1.4rem' }
203. 'markdown-text li + li' { marginTop = '.15rem' }
204. // inside the history (itself an <ol>) a list would get the nested markers (circles)
205. 'markdown-text ul' { listStyleType = 'disc' }
206. 'markdown-text ol' { listStyleType = 'decimal' }
207. 'markdown-text strong' { color = colorTextStrong }
208. 'markdown-text a' { textDecoration = 'underline' textUnderlineOffset = '.15em' overflowWrap = 'anywhere' }
209. 'markdown-text code' { font = '.88em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace' padding = '.05em .3em' color = colorTextStrong background = colorBackgroundSunken borderRadius = '.25rem' }
210. 'markdown-text pre' { margin = '.5rem 0' padding = '.6rem .7rem' overflowX = 'auto' background = colorBackgroundSunken border = '1px solid ' + colorBorder borderRadius = '.4rem' }
211. 'markdown-text pre code' { padding = '0' background = 'transparent' whiteSpace = 'pre' }
212. '.message' { margin = '0' minHeight = '1.5em' color = colorDanger }
214. // ---- ticket #12 (mission 024): <md-editor> (shared/md-editor.js, shadow DOM) takes the app's
215. // tokens through its --md-* custom properties; headings look like the rendered ones (h3/h4/h5 above)
216. mdEditor { '--md-background' = colorBackgroundSunken '--md-text' = colorText '--md-text-strong' = colorTextStrong '--md-text-muted' = colorTextMuted '--md-border' = colorBorder '--md-accent' = colorAccent '--md-accent-text' = colorAccentText '--md-link' = colorAccent '--md-code-background' = colorSurface '--md-toolbar-background' = colorSurface '--md-danger' = colorDanger '--md-h1-size' = '1.15rem' '--md-h2-size' = '1.02rem' '--md-h3-size' = '.95rem' '--md-min-height' = '2.6rem' color = colorText }
218. // ---- ticket #4: relations (parent, children, blocked by, blocks) ---------------------------
219. ticketRelations { display = 'grid' gap = '.8rem' padding = '.8rem' background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.5rem' }
220. 'ticket-relations h2' { margin = '0 0 .4rem' fontSize = '1rem' }
221. 'ticket-relations p' { margin = '0' }
222. '#parent a,
223. .refs a' { fontWeight = '600' whiteSpace = 'nowrap' }
224. '.refsubject' { color = colorTextStrong overflowWrap = 'anywhere' }
225. '#childnote' { margin = '0 0 .4rem' fontSize = '.9rem' color = colorTextMuted }
226. '#childnote.done' { fontWeight = '600' color = colorSuccess }
227. '.refs' { listStyle = 'none' margin = '0' padding = '0' display = 'grid' gap = '.35rem' }
228. '.refs li' { display = 'flex' flexWrap = 'wrap' alignItems = 'baseline' gap = '.2rem .6rem' }
229. '.refs .unblock' { padding = '.1rem .6rem' fontSize = '.8rem' marginLeft = 'auto' }
230. '#events > li.link' { background = 'transparent' padding = '.2rem .7rem' }
232. '@media (min-width: 45rem)' = {
233. main = { padding = '1.5rem 1rem' }
234. h1 = { fontSize = '1.6rem' }
235. '.tickets li' = { gridTemplateColumns = '8.5rem minmax(0, 1fr) auto' alignItems = 'baseline' gap = '1rem' }
236. '#stateform' = { gridTemplateColumns = '14rem minmax(0, 1fr) auto' alignItems = 'end' }
237. '#parentform,
238. #blockerform' = { gridTemplateColumns = 'minmax(0, 1fr) auto' alignItems = 'end' }
239. 'details form' = { maxWidth = '40rem' }
240. userBox = { marginLeft = '0' }
241. }