Mercurial > hg
comparison mercurial/templates/static/style-gitweb.css @ 33390:32331f54930c
hgweb: re-implement followlines UI selection using buttons
This changeset attempts to solve two issues with the "followlines" UI in
hgweb. First the "followlines" action is currently not easily discoverable
(one has to hover on a line for some time, wait for the invite message to
appear and then perform some action). Second, it gets in the way of natural
line selection, especially in filerevision view.
This changeset introduces an additional markup element (a <button
class="btn-followlines">) alongside each content line of the view. This button
now holds events for line selection that were previously plugged onto content
lines directly. Consequently, there's no more action on content lines, hence
restoring the "natural line selection" behavior (solving the second problem).
These buttons are hidden by default and get displayed upon hover of content
lines; then upon hover of a button itself, a text inviting followlines section
shows up. This solves the first problem (discoverability) as we now have a
clear visual element indicating that "some action could be perform" (i.e. a
button) and that is self-documented.
In followlines.js, all event listeners are now attached to these <button>
elements. The custom "floating tooltip" element is dropped as <button>
elements are now self-documented through a "title" attribute that changes
depending on preceding actions (selection started or not, in particular).
The new <button> element is inserted in followlines.js script (thus only
visible if JavaScript is activated); it contains a "+" and "-" with a
"diff-semantics" style; upon hover, it scales up.
To find the parent element under which to insert the <button> we either rely
on the "data-selectabletag" attribute (which defines the HTML tag of children
of class="sourcelines" element e.g. <span> for filerevision view and <tr> for
annotate view) or use a child of the latter elements if we find an element
with class="followlines-btn-parent" (useful for annotate view, for which we
have to find the <td> in which to insert the <button>).
On noticeable change in CSS concerns the "margin-left" of span:before
pseudo-elements in filelog view that has been increased a bit in order to
leave space for the new button to appear between line number column and
line content one.
Also note the "z-index" addition for "annotate-info" box so that the latter
appears on top of new buttons (instead of getting hidden).
In some respect, the UI similar to line commenting feature that is implemented
in popular code hosting site like GitHub, BitBucket or Kallithea.
author | Denis Laxalde <denis.laxalde@logilab.fr> |
---|---|
date | Mon, 03 Jul 2017 13:49:03 +0200 |
parents | 1c97df5e3b46 |
children | 875b054e5b95 |
comparison
equal
deleted
inserted
replaced
33389:7e89bd0cfb86 | 33390:32331f54930c |
---|---|
84 tr.thisrev pre { color:#009900; } | 84 tr.thisrev pre { color:#009900; } |
85 td.annotate { | 85 td.annotate { |
86 white-space: nowrap; | 86 white-space: nowrap; |
87 } | 87 } |
88 div.annotate-info { | 88 div.annotate-info { |
89 z-index: 5; | |
89 display: none; | 90 display: none; |
90 position: absolute; | 91 position: absolute; |
91 background-color: #FFFFFF; | 92 background-color: #FFFFFF; |
92 border: 1px solid #d9d8d1; | 93 border: 1px solid #d9d8d1; |
93 text-align: left; | 94 text-align: left; |
150 -khtml-user-select: none; | 151 -khtml-user-select: none; |
151 -webkit-user-select: none; | 152 -webkit-user-select: none; |
152 -ms-user-select: none; | 153 -ms-user-select: none; |
153 user-select: none; | 154 user-select: none; |
154 display: inline-block; | 155 display: inline-block; |
155 margin-left: -5em; | 156 margin-left: -6em; |
156 width: 4em; | 157 width: 4em; |
157 color: #999; | 158 color: #999; |
158 text-align: right; | 159 text-align: right; |
159 content: counters(lineno,"."); | 160 content: counters(lineno,"."); |
160 float: left; | 161 float: left; |
175 .description { | 176 .description { |
176 font-family: monospace; | 177 font-family: monospace; |
177 } | 178 } |
178 | 179 |
179 /* Followlines */ | 180 /* Followlines */ |
180 div.page_body table tbody.sourcelines > tr.followlines-select:hover, | |
181 div.page_body pre.sourcelines > span.followlines-select:hover { | |
182 cursor: cell; | |
183 } | |
184 | |
185 tbody.sourcelines > tr.followlines-selected, | 181 tbody.sourcelines > tr.followlines-selected, |
186 pre.sourcelines > span.followlines-selected { | 182 pre.sourcelines > span.followlines-selected { |
187 background-color: #99C7E9 !important; | 183 background-color: #99C7E9 !important; |
188 } | 184 } |
189 | 185 |
217 margin: 2px; | 213 margin: 2px; |
218 margin-top: 4px; | 214 margin-top: 4px; |
219 font-family: sans-serif; | 215 font-family: sans-serif; |
220 } | 216 } |
221 | 217 |
222 div#followlines-tooltip { | 218 .btn-followlines { |
223 display: none; | 219 display: none; |
224 position: fixed; | 220 cursor: pointer; |
225 background-color: #ffc; | 221 box-sizing: content-box; |
226 border: 1px solid #999; | 222 font-size: 11px; |
227 padding: 2px; | 223 width: 13px; |
228 } | 224 height: 13px; |
229 | 225 border-radius: 3px; |
230 .sourcelines:hover > div#followlines-tooltip { | 226 margin: 0px; |
227 margin-top: -2px; | |
228 padding: 0px; | |
229 background-color: #E5FDE5; | |
230 border: 1px solid #9BC19B; | |
231 font-family: monospace; | |
232 text-align: center; | |
233 line-height: 5px; | |
234 } | |
235 | |
236 tr .btn-followlines { | |
237 position: absolute; | |
238 } | |
239 | |
240 span .btn-followlines { | |
241 float: left; | |
242 } | |
243 | |
244 span.followlines-select .btn-followlines { | |
245 margin-left: -1.6em; | |
246 } | |
247 | |
248 .btn-followlines:hover { | |
249 transform: scale(1.1, 1.1); | |
250 } | |
251 | |
252 .btn-followlines .followlines-plus { | |
253 color: green; | |
254 } | |
255 | |
256 .btn-followlines .followlines-minus { | |
257 color: red; | |
258 } | |
259 | |
260 .btn-followlines-end { | |
261 background-color: #ffdcdc; | |
262 } | |
263 | |
264 .sourcelines tr:hover .btn-followlines, | |
265 .sourcelines span.followlines-select:hover > .btn-followlines { | |
231 display: inline; | 266 display: inline; |
232 } | 267 } |
233 | 268 |
234 .sourcelines:hover > div#followlines-tooltip.hidden { | 269 .btn-followlines-hidden, |
270 .sourcelines tr:hover .btn-followlines-hidden { | |
235 display: none; | 271 display: none; |
236 } | 272 } |
273 | |
237 /* Graph */ | 274 /* Graph */ |
238 div#wrapper { | 275 div#wrapper { |
239 position: relative; | 276 position: relative; |
240 margin: 0; | 277 margin: 0; |
241 padding: 0; | 278 padding: 0; |