Page MenuHomePhabricator

Create Phabricator theme to restore pre-2016-04-28 appearance
Closed, DeclinedPublic

Description

Since T128009: Next Phabricator Upgrade | 2016-04-28 the UI has changed significantly. Users should be given the ability to change it back, either via a Phabricator theme(?) or with a browser script.

Event Timeline

Restricted Application added subscribers: TerraCodes, Aklapper. · View Herald TranscriptApr 28 2016, 4:43 AM
mmodell triaged this task as Low priority.Apr 28 2016, 9:19 AM
mmodell added a subscriber: mmodell.

If someone wants to make a browser script/user style, have at it.

Nikki added a subscriber: Nikki.Apr 28 2016, 10:21 AM
Aklapper lowered the priority of this task from Low to Lowest.Apr 28 2016, 10:32 AM

Feel free to write a theme or a browser script to share with others.

Anomie added a subscriber: Anomie.Apr 28 2016, 2:40 PM

The problems I have with the new appearance are:

  • The massive waste of space thanks to the 320-pixel-wide sidebar squishing the entire task (not everyone maximizes their browser window on a wide-screen monitor).
  • The placement of useful task metadata such as tags, assignment, and author at the bottom of that sidebar where I have to hunt for it rather that at the top of the main task description where it's immediately visible.
matmarex added a subscriber: matmarex.EditedApr 28 2016, 2:54 PM
  • The massive waste of space thanks to the 320-pixel-wide sidebar squishing the entire task (not everyone maximizes their browser window on a wide-screen monitor).

This CSS snippet comes with no warranty:

.device-desktop .phui-two-column-view .phui-main-column {
	width: auto;
	float: none;
}

.device-desktop .phui-two-column-view .phui-side-column {
	margin-left: 20px;
}

.phui-object-box,
.phui-timeline-shell {
	/* https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context */
	overflow: hidden;
}

(This also fixes broken layout on browsers that don't support calc() in CSS.)

This comment was removed by Paladox.
  • The placement of useful task metadata such as tags, assignment, and author at the bottom of that sidebar where I have to hunt for it rather that at the top of the main task description where it's immediately visible.

Also no warranty. This turns the sidebar into a regular box above the description, with multiple columns. Use either this or the previous, they don't work together.

.device-desktop .phui-two-column-view .phui-side-column,
.device-desktop .phui-two-column-view .phui-main-column {
	float: none;
	width: auto;
}

.device-desktop .phui-two-column-view .phui-side-column .phui-two-column-properties {
	column-width: 300px;
}

.phabricator-action-list-view,
.phuid-curtain-panel {
	break-inside: avoid-column;
}
Anomie added a comment.EditedApr 28 2016, 3:17 PM

Here's some JS that seems to work to move the metadata out of the sidebar and into the "Details" box with all the other details, and seems to work well with T133825#2248704. No idea how robust this is, unfortunately Phab doesn't have useful IDs on most of its crap so we just have to hope it doesn't reuse these class names.

var sidebar = document.querySelector( '#phabricator-standard-page-body .phui-side-column' );
var misplacedDetails = sidebar.querySelectorAll( '.phui-box .phui-curtain-panel' );
var details = document.querySelector( '#phabricator-standard-page-body .phui-property-list-properties' );
for ( var i = misplacedDetails.length - 1; i >= 0; i-- ) {
    var n = misplacedDetails.item( i );
    var k = n.querySelector( '.phui-curtain-panel-header' );
    var v = n.querySelector( '.phui-curtain-panel-body' );
    var dt = document.createElement( 'dt' );
    dt.className = 'phui-property-list-key';
    while ( k.firstChild ) {
        dt.appendChild( k.firstChild );
    }
    var dd = document.createElement( 'dd' );
    dd.className = 'phui-property-list-value';
    while ( v.firstChild ) {
        dd.appendChild( v.firstChild );
    }
    details.insertBefore( dd, details.firstChild );
    details.insertBefore( dt, details.firstChild );
    n.parentNode.removeChild( n );
}

I actually don't mind the new layout myself, other than the fact that it uses calc() a lot, which doesn't work in my favorite browser. I have a pretty large screen and I can see the whole sidebar on most tasks above-the-fold, though.

By the way, when you share code snippets on Phabricator, you can specify the language for syntax highlighter using this notation:

# ```lang=css
# ```lang=js
mmodell added a comment.EditedApr 28 2016, 6:35 PM

ok here's my attempt:


(function() {
var details = document.querySelector('.phui-two-column-header .phui-header-view');
var moreDetails = document.createElement('div');
var panels = document.querySelectorAll('.phui-side-column .phui-curtain-panel');

for (var i = 0; i < panels.length; i++) {
    
    panels[i].style.float = 'left';
    panels[i].style.width = '23%';
    panels[i].style.minHeight = '60px';
    panels[i].style.margin    = '5px 0';

    moreDetails.appendChild(panels[i]); 
}
moreDetails.className = 'grouped';
moreDetails.style.marginTop = '5px';
details.appendChild(moreDetails);
})();

Which looks like this:

bd808 added a subscriber: bd808.Apr 29 2016, 6:21 PM

My phabricator greasemonkey script is now using a combination of the patches from T133825#2248704 and T133825#2248790 plus a bunch more css hacks of my own.

Did someone start a repo somewhere to restore the UI without side effects?

Aklapper closed this task as Declined.Sep 23 2016, 3:37 PM

Workarounds (linked above) exist and there are no plans to revert.
Hence declining.