You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@bloodhound.apache.org by Gary Martin <ga...@wandisco.com> on 2013/10/04 20:06:32 UTC
Re: svn commit: r1529237 - in /bloodhound/trunk/bloodhound_theme/bhtheme:
htdocs/bloodhound.css htdocs/img/change_history_arrow_line.png templates/bh_ticket.html
templates/bh_ticket_change.html
Hi,
As also described in https://issues.apache.org/bloodhound/ticket/687
I've had a quick play with making the timeline for the ticket look a
little more, um, designed. I'm afraid that it was grating with me!
Hopefully at least some of us will think of this as an improvement. I am
not completely happy with it yet but I have done enough to make me
ignore it again for a while. As ever.. comments and improvements will be
very welcome.
Cheers,
Gary
On 04/10/13 18:46, gjm@apache.org wrote:
> Author: gjm
> Date: Fri Oct 4 17:46:05 2013
> New Revision: 1529237
>
> URL: http://svn.apache.org/r1529237
> Log:
> updating the ticket timeline arrow of time and event grouping - towards #687
>
> Removed:
> bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/img/change_history_arrow_line.png
> Modified:
> bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/bloodhound.css
> bloodhound/trunk/bloodhound_theme/bhtheme/templates/bh_ticket.html
> bloodhound/trunk/bloodhound_theme/bhtheme/templates/bh_ticket_change.html
>
> Modified: bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/bloodhound.css
> URL: http://svn.apache.org/viewvc/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/bloodhound.css?rev=1529237&r1=1529236&r2=1529237&view=diff
> ==============================================================================
> --- bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/bloodhound.css (original)
> +++ bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/bloodhound.css Fri Oct 4 17:46:05 2013
> @@ -187,12 +187,6 @@ div.reports form {
> font-weight: normal;
> }
>
> -.activityfeed {
> - background-image: url("img/change_history_arrow_line.png");
> - background-repeat: repeat-y;
> - background-position: 20px 0px;
> -}
> -
> .timeline .activityfeed {
> background-image: none;
> }
> @@ -627,6 +621,14 @@ input[type="submit"].btn.btn-micro {
> display: none !important;
> }
>
> +.shade-desktop {
> + opacity: 0.2;
> +}
> +
> +.visible-desktop-hover:hover .shade-desktop {
> + opacity: 1;
> +}
> +
> .hidden-desktop {
> display: none !important;
> }
> @@ -1243,7 +1245,7 @@ table.wiki th {
>
>
> #changelog div.comment-box{
> - border: 1px solid #ccc;
> + border: 2px solid #ccc;
> border-radius: 6px;
> box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
> padding: 13px;
> @@ -1252,6 +1254,10 @@ table.wiki th {
> min-height: 20px;
> }
>
> +#changelog div.change:hover div.comment-box{
> + border-color: #FFCC33;
> +}
> +
> #trac-add-comment fieldset{
> width: 100%;
> }
> @@ -1267,13 +1273,70 @@ textarea#comment, #trac-add-comment fiel
> content: attr(placeholder-content);
> }
>
> +.uparrow div.change,
> +.downarrow div.change {
> + margin-bottom: 3px;
> + padding: 1px 0;
> + position: relative;
> + z-index: 1;
> +}
> +
> +.uparrow div.change:before,
> +.uparrow div.change:after,
> +.downarrow div.change:before,
> +.downarrow div.change:after{
> + background: none repeat scroll 0 0 #CCCCCC;
> + content: "";
> + height: 100%;
> + position: absolute;
> + top: 0;
> + width: 0.5em;
> + z-index: -1;
> +}
> +
> +.uparrow div.change:hover:before,
> +.uparrow div.change:hover:after,
> +.downarrow div.change:hover:before,
> +.downarrow div.change:hover:after {
> + background: none repeat scroll 0 0 #FFCC33;
> +}
> +
> +.uparrow div.change:before,
> +.downarrow div.change:before {
> + left: 20px;
> +}
> +
> +.uparrow div.change:after,
> +.downarrow div.change:after{
> + left: 15px;
> + right: 100%;
> +}
> +
> +.uparrow div.change:before,
> +.downarrow div.change:after {
> + transform: skew(0deg, 26deg);
> + -ms-transform: skew(0deg, 26deg);
> + -webkit-transform: skew(0deg, 26deg);
> +}
> +
> +.uparrow div.change:after,
> +.downarrow div.change:before {
> + transform: skew(0deg, -26deg);
> + -ms-transform: skew(0deg, -26deg);
> + -webkit-transform: skew(0deg, -26deg);
> +}
> +
> #changelog div.comment-box h4 {
> margin-top: 0px;
> }
>
> #changelog ul.changes {
> - list-style-image: url('../common/collapsed.png');
> - padding: 0px 0px 0px 11px;
> + list-style-type: none;
> + margin: 0 0 0 11px;
> +}
> +
> +#changelog ul.changes>li {
> + padding: 0 20px;
> }
>
> .ticket form#prefs input[type="radio"]{
>
> Modified: bloodhound/trunk/bloodhound_theme/bhtheme/templates/bh_ticket.html
> URL: http://svn.apache.org/viewvc/bloodhound/trunk/bloodhound_theme/bhtheme/templates/bh_ticket.html?rev=1529237&r1=1529236&r2=1529237&view=diff
> ==============================================================================
> --- bloodhound/trunk/bloodhound_theme/bhtheme/templates/bh_ticket.html (original)
> +++ bloodhound/trunk/bloodhound_theme/bhtheme/templates/bh_ticket.html Fri Oct 4 17:46:05 2013
> @@ -288,6 +288,23 @@
> var comment = $("#trac-comment-editor").next("div.comment").html(reply);
> comment.toggle(comment.children().length != 0);
> }, "#changelog .trac-loading");
> +
> + // quick hack to set arrow direction on change
> + arrow_dir = {
> + 'oldest': function() {
> + $('div#changelog').addClass('downarrow');
> + $('div#changelog').removeClass('uparrow');
> + },
> + 'newest': function() {
> + $('div#changelog').addClass('uparrow');
> + $('div#changelog').removeClass('downarrow');
> + },
> + };
> +
> + $('#trac-comments-newest').change(arrow_dir['newest']);
> + $('#trac-comments-oldest').change(arrow_dir['oldest']);
> + arrow_dir[comments_prefs.comments_order]();
> +
> /*]]>*/
> <py:if test="preview_mode">
> $("#attachments").toggleClass("collapsed");
> @@ -648,7 +665,7 @@
> </div>
> </div>
>
> - <div class="$cols_activity">
> + <div>
> <!--! Preview of ticket changes -->
> <div py:if="ticket.exists and can_append" id="ticketchange" class="ticketdraft"
> style="${'display: none' if not (change_preview.fields or change_preview.comment)
>
> Modified: bloodhound/trunk/bloodhound_theme/bhtheme/templates/bh_ticket_change.html
> URL: http://svn.apache.org/viewvc/bloodhound/trunk/bloodhound_theme/bhtheme/templates/bh_ticket_change.html?rev=1529237&r1=1529236&r2=1529237&view=diff
> ==============================================================================
> --- bloodhound/trunk/bloodhound_theme/bhtheme/templates/bh_ticket_change.html (original)
> +++ bloodhound/trunk/bloodhound_theme/bhtheme/templates/bh_ticket_change.html Fri Oct 4 17:46:05 2013
> @@ -59,7 +59,7 @@ Arguments:
> <div class="pull-right">
> <span py:if="'cnum' in change" id="comment:$cnum" class="cnum">${commentref('comment:', cnum)}</span>
> </div>
> - <div py:if="show_buttons" class="pull-right bh-ticket-buttons hidden-desktop trac-ticket-buttons">
> + <div py:if="show_buttons" class="pull-right bh-ticket-buttons shade-desktop trac-ticket-buttons">
> <py:if test="'date' in change">
> ${pretty_dateinfo(change.date)}
> </py:if>
> @@ -163,7 +163,7 @@ ${edited_comment if edited_comment is no
> <em>${field.old}</em> deleted
> </i18n:msg></py:otherwise>
> </py:choose>
> - <span class="${'hidden-desktop' if change.cnum else ''}">
> + <span class="${'shade-desktop' if change.cnum else ''}">
> - by ${authorinfo(change.author)}<span py:if="'date' in change">, ${pretty_dateinfo(change.date)}</span>
> </span>
> <span py:if="field_name == 'attachment' and change.comment" class="attachment-desc searchable" xml:space="preserve">
>
>
Re: svn commit: r1529237 - in /bloodhound/trunk/bloodhound_theme/bhtheme:
htdocs/bloodhound.css htdocs/img/change_history_arrow_line.png
templates/bh_ticket.html templates/bh_ticket_change.html
Posted by Olemis Lang <ol...@gmail.com>.
On 10/8/13, Olemis Lang <ol...@gmail.com> wrote:
> On 10/8/13, Joachim Dreimann <jo...@wandisco.com> wrote:
>> On 7 October 2013 14:22, Olemis Lang <ol...@gmail.com> wrote:
> [...]
>>
>>> I can't see the arrow ... is that ok ?
>>
>>
>> What browser are you using?
>> Works fine for me in Chrome 30 and Firefox 24.
>>
>
> Now I see ... I can see it in Chrom(e|ium) but not in legacy Firefox
> and/or Opera .
>
In (Android) mobiles Opera is the only one not rendering the «ribbon»
. I used Dolphin (both std and hd) , Skyfire and Google's . I'll try
Firefox later ...
I noticed a few minor inconsistencies that I'll report later .
>> They are not arrows as such, but more like a ribbon:
>>
>> http://redpen.io/defs6h
>>
>
> Yes , definitely nice ; awesome if this could be rendered in a few old
> browsers
>
I'll spend a few minutes to see whether this could be (quickly)
implemented in legacy browsers ... but afaict it's not big deal .
--
Regards,
Olemis - @olemislc
Re: svn commit: r1529237 - in /bloodhound/trunk/bloodhound_theme/bhtheme:
htdocs/bloodhound.css htdocs/img/change_history_arrow_line.png
templates/bh_ticket.html templates/bh_ticket_change.html
Posted by Olemis Lang <ol...@gmail.com>.
On 10/8/13, Joachim Dreimann <jo...@wandisco.com> wrote:
> On 8 October 2013 10:23, Olemis Lang <ol...@gmail.com> wrote:
>
>> On 10/8/13, Joachim Dreimann <jo...@wandisco.com> wrote:
>> > On 7 October 2013 14:22, Olemis Lang <ol...@gmail.com> wrote:
>> [...]
>> >
>> >> I can't see the arrow ... is that ok ?
>> >
>> >
>> > What browser are you using?
>> > Works fine for me in Chrome 30 and Firefox 24.
>> >
>>
>> Now I see ... I can see it in Chrom(e|ium) but not in legacy Firefox
>> and/or Opera .
>>
>> > They are not arrows as such, but more like a ribbon:
>> >
>> > http://redpen.io/defs6h
>> >
>>
>> Yes , definitely nice ; awesome if this could be rendered in a few old
>> browsers
>>
>>
> It seems to rely on transforms, which have fairly good support:
> http://caniuse.com/#feat=transforms2d
>
> I guess without them it still looks better than before,
sure !
> and progressive
> enhancement > back porting of browser features..
>
;)
--
Regards,
Olemis - @olemislc
Re: svn commit: r1529237 - in /bloodhound/trunk/bloodhound_theme/bhtheme:
htdocs/bloodhound.css htdocs/img/change_history_arrow_line.png
templates/bh_ticket.html templates/bh_ticket_change.html
Posted by Joachim Dreimann <jo...@wandisco.com>.
On 8 October 2013 10:23, Olemis Lang <ol...@gmail.com> wrote:
> On 10/8/13, Joachim Dreimann <jo...@wandisco.com> wrote:
> > On 7 October 2013 14:22, Olemis Lang <ol...@gmail.com> wrote:
> [...]
> >
> >> I can't see the arrow ... is that ok ?
> >
> >
> > What browser are you using?
> > Works fine for me in Chrome 30 and Firefox 24.
> >
>
> Now I see ... I can see it in Chrom(e|ium) but not in legacy Firefox
> and/or Opera .
>
> > They are not arrows as such, but more like a ribbon:
> >
> > http://redpen.io/defs6h
> >
>
> Yes , definitely nice ; awesome if this could be rendered in a few old
> browsers
>
>
It seems to rely on transforms, which have fairly good support:
http://caniuse.com/#feat=transforms2d
I guess without them it still looks better than before, and progressive
enhancement > back porting of browser features..
> --
> Regards,
>
> Olemis - @olemislc
>
--
Joachim Dreimann | *User Experience Manager*
WANdisco // *Non-Stop Data*
e. joachim.dreimann@wandisco.com
twitter @jdreimann <https://twitter.com/jdreimann>
Re: svn commit: r1529237 - in /bloodhound/trunk/bloodhound_theme/bhtheme:
htdocs/bloodhound.css htdocs/img/change_history_arrow_line.png
templates/bh_ticket.html templates/bh_ticket_change.html
Posted by Olemis Lang <ol...@gmail.com>.
On 10/8/13, Joachim Dreimann <jo...@wandisco.com> wrote:
> On 7 October 2013 14:22, Olemis Lang <ol...@gmail.com> wrote:
[...]
>
>> I can't see the arrow ... is that ok ?
>
>
> What browser are you using?
> Works fine for me in Chrome 30 and Firefox 24.
>
Now I see ... I can see it in Chrom(e|ium) but not in legacy Firefox
and/or Opera .
> They are not arrows as such, but more like a ribbon:
>
> http://redpen.io/defs6h
>
Yes , definitely nice ; awesome if this could be rendered in a few old browsers
--
Regards,
Olemis - @olemislc
Re: svn commit: r1529237 - in /bloodhound/trunk/bloodhound_theme/bhtheme:
htdocs/bloodhound.css htdocs/img/change_history_arrow_line.png
templates/bh_ticket.html templates/bh_ticket_change.html
Posted by Joachim Dreimann <jo...@wandisco.com>.
On 7 October 2013 14:22, Olemis Lang <ol...@gmail.com> wrote:
> On 10/4/13, Gary Martin <ga...@wandisco.com> wrote:
> > Hi,
> >
>
> :)
>
> > As also described in https://issues.apache.org/bloodhound/ticket/687
> > I've had a quick play with making the timeline for the ticket look a
> > little more, um, designed. I'm afraid that it was grating with me!
> >
> > Hopefully at least some of us will think of this as an improvement. I am
> > not completely happy with it yet but I have done enough to make me
> > ignore it again for a while. As ever.. comments and improvements will be
> > very welcome.
> >
>
Great, I really like the improvements you've made.
>
> I can't see the arrow ... is that ok ?
What browser are you using?
Works fine for me in Chrome 30 and Firefox 24.
They are not arrows as such, but more like a ribbon:
http://redpen.io/defs6h
> [...]
>
> --
> Regards,
>
> Olemis - @olemislc
>
--
Joachim Dreimann | *User Experience Manager*
WANdisco // *Non-Stop Data*
e. joachim.dreimann@wandisco.com
twitter @jdreimann <https://twitter.com/jdreimann>
Re: svn commit: r1529237 - in /bloodhound/trunk/bloodhound_theme/bhtheme:
htdocs/bloodhound.css htdocs/img/change_history_arrow_line.png
templates/bh_ticket.html templates/bh_ticket_change.html
Posted by Olemis Lang <ol...@gmail.com>.
On 10/4/13, Gary Martin <ga...@wandisco.com> wrote:
> Hi,
>
:)
> As also described in https://issues.apache.org/bloodhound/ticket/687
> I've had a quick play with making the timeline for the ticket look a
> little more, um, designed. I'm afraid that it was grating with me!
>
> Hopefully at least some of us will think of this as an improvement. I am
> not completely happy with it yet but I have done enough to make me
> ignore it again for a while. As ever.. comments and improvements will be
> very welcome.
>
I can't see the arrow ... is that ok ?
[...]
--
Regards,
Olemis - @olemislc