Mooeypoo has uploaded a new change for review.
https://gerrit.wikimedia.org/r/229996
Change subject: Allow for expanding/collapsing single topic view
......................................................................
Allow for expanding/collapsing single topic view
Bug: T103584
Change-Id: Ib43bbf4620a8888377d8fff7cb8afcca23950a8c
---
M Resources.php
M handlebars/flow_block_topic_single_view.handlebars
M modules/flow-initialize.js
A modules/flow/ui/widgets/mw.flow.ui.SidebarExpandWidget.js
A modules/styles/flow/images/topic-collapse.svg
A modules/styles/flow/images/topic-expand.svg
A modules/styles/flow/widgets/mw.flow.ui.SidebarExpandWidget.less
7 files changed, 158 insertions(+), 1 deletion(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Flow
refs/changes/96/229996/1
diff --git a/Resources.php b/Resources.php
index d8c5b37..7505711 100644
--- a/Resources.php
+++ b/Resources.php
@@ -376,12 +376,14 @@
'flow/ui/widgets/mw.flow.ui.ToCWidget.js',
'flow/ui/widgets/mw.flow.ui.ReorderTopicsWidget.js',
'flow/ui/widgets/mw.flow.ui.NavigationWidget.js',
+ 'flow/ui/widgets/mw.flow.ui.SidebarExpandWidget.js',
),
'styles' => array(
'styles/flow/mw.flow.ui.less',
'styles/flow/widgets/mw.flow.ui.NavigationWidget.less',
'styles/flow/widgets/mw.flow.ui.TopicMenuSelectWidget.less',
'styles/flow/widgets/mw.flow.ui.ReorderTopicsWidget.less',
+
'styles/flow/widgets/mw.flow.ui.SidebarExpandWidget.less',
),
'dependencies' => array (
'oojs-ui',
diff --git a/handlebars/flow_block_topic_single_view.handlebars
b/handlebars/flow_block_topic_single_view.handlebars
index d4afdaf..40841ea 100644
--- a/handlebars/flow_block_topic_single_view.handlebars
+++ b/handlebars/flow_block_topic_single_view.handlebars
@@ -26,3 +26,4 @@
{{> flow_patrol_action}}
{{/if}}
</div>
+<div class="flow-single-topic-siderail"></div>
diff --git a/modules/flow-initialize.js b/modules/flow-initialize.js
index c8c9d6f..3f13593 100644
--- a/modules/flow-initialize.js
+++ b/modules/flow-initialize.js
@@ -9,7 +9,7 @@
* @todo not like this
*/
$( document ).ready( function () {
- var dataBlob, navWidget, flowBoard, dmBoard,
+ var dataBlob, navWidget, flowBoard, dmBoard,
sidebarExpandWidget,
$component = $( '.flow-component' ),
$board = $( '.flow-board' ),
finishLoading = function () {
@@ -39,6 +39,15 @@
flowBoard = mw.flow.getPrototypeMethod( 'component',
'getInstanceByElement' )( $board );
+ if ( $component.hasClass( 'topic-page' ) ) {
+ // We are in single-topic view. Initialize the sidebar
expand widget
+ sidebarExpandWidget = new
mw.flow.ui.SidebarExpandWidget();
+ sidebarExpandWidget.$element.insertAfter( $board );
+ sidebarExpandWidget.on( 'toggle', function ( collapsed
) {
+ $board.toggleClass( 'flow-board-expanded',
collapsed );
+ } );
+ }
+
// Load data model
mw.flow.system = new mw.flow.dm.System( {
pageTitle: mw.Title.newFromText( mw.config.get(
'wgPageName' ) ),
diff --git a/modules/flow/ui/widgets/mw.flow.ui.SidebarExpandWidget.js
b/modules/flow/ui/widgets/mw.flow.ui.SidebarExpandWidget.js
new file mode 100644
index 0000000..8a9848d
--- /dev/null
+++ b/modules/flow/ui/widgets/mw.flow.ui.SidebarExpandWidget.js
@@ -0,0 +1,71 @@
+( function ( $ ) {
+ /**
+ * Flow sidebar expand widget
+ *
+ * @class
+ * @extends OO.ui.Widget
+ *
+ * @constructor
+ * @param {Object} [config] Configuration object
+ * @cfg {boolean} [collapsed=false] Start as collapsed
+ */
+ mw.flow.ui.SidebarExpandWidget = function mwFlowUiSidebarExpandWidget(
config ) {
+ config = config || {};
+
+ // Parent constructor
+ mw.flow.ui.SidebarExpandWidget.parent.call( this, config );
+
+ this.button = new OO.ui.ButtonWidget( {
+ framed: false
+ } );
+
+ this.toggleCollapsed( !!config.collapsed );
+
+ // Events
+ this.button.connect( this, { click: 'onButtonClick' } );
+
+ this.$element
+ .addClass( 'flow-ui-sidebarExpandWidget' )
+ .append( this.button.$element );
+ };
+
+ /* Initialization */
+
+ OO.inheritClass( mw.flow.ui.SidebarExpandWidget, OO.ui.Widget );
+
+ mw.flow.ui.SidebarExpandWidget.prototype.onButtonClick = function () {
+ this.toggleCollapsed();
+ };
+
+ /**
+ * Toggle collapsed state
+ *
+ * @param {boolean} collapse Widget is collapsed
+ */
+ mw.flow.ui.SidebarExpandWidget.prototype.toggleCollapsed = function (
collapse ) {
+ var action;
+
+ collapse = collapse !== undefined ? collapse : !this.collapsed;
+
+ if ( this.collapsed !== collapse ) {
+ this.collapsed = collapse;
+ action = this.collapsed ? 'expand' : 'collapse';
+
+ this.$element.toggleClass(
'flow-ui-sidebarExpandWidget-collapsed', this.collapsed );
+
+ this.button.setIcon( 'topic-' + action );
+ this.button.setTitle( mw.msg( 'flow-sidebar-' + action
) );
+
+ this.emit( 'toggle', this.collapsed );
+ }
+ };
+
+ /**
+ * Get the collapsed state of the widget
+ *
+ * @return {boolean} collapse Widget is collapsed
+ */
+ mw.flow.ui.SidebarExpandWidget.prototype.isCollapsed = function () {
+ return this.collapsed;
+ };
+}( jQuery ) );
diff --git a/modules/styles/flow/images/topic-collapse.svg
b/modules/styles/flow/images/topic-collapse.svg
new file mode 100644
index 0000000..397af17
--- /dev/null
+++ b/modules/styles/flow/images/topic-collapse.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="20px" height="14px" viewBox="0 0 20 14" version="1.1"
xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";
xmlns:sketch="http://www.bohemiancoding.com/sketch/ns";>
+ <!-- Generator: Sketch 3.3.3 (12072) -
http://www.bohemiancoding.com/sketch -->
+ <title>topic-expand</title>
+ <desc>Created with Sketch.</desc>
+ <defs></defs>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none"
fill-rule="evenodd" sketch:type="MSPage">
+ <g id="topic-expand" sketch:type="MSLayerGroup" fill="#AAAAAA">
+ <path d="M6.77248677,13.4920045 C6.77248677,12.8952577
6.28819411,12.4126984 5.69394914,12.4126984 L19.6393842,12.4126984
C19.0444667,12.4126984 18.5608466,12.8966853 18.5608466,13.4920045
L18.5608466,0.359847325 C18.5608466,0.956594147 19.0451392,1.43915344
19.6393842,1.43915344 L5.69394914,1.43915344 C6.28886663,1.43915344
6.77248677,0.955166578 6.77248677,0.359847325 L6.77248677,13.4920045 Z
M0.360615802,0 L19.6393842,0 C19.8385468,0 20,0.160353096 20,0.359847325
L20,13.4920045 C20,13.6907427 19.8400541,13.8518519 19.6393842,13.8518519
L0.360615802,13.8518519 C0.161453194,13.8518519 0,13.6914988 0,13.4920045
L0,0.359847325 C0,0.161109135 0.159945931,0 0.360615802,0 Z" id="Shape"
sketch:type="MSShapeGroup"></path>
+ <path d="M13.6719577,4.01798942 L13.6719577,6.35767196
L8.26455026,6.33968254 L8.26455026,8.06455026 L13.6719577,8.06455026
L13.6719577,10.4042328 L17.2698413,7.34603175 L13.6719577,4.01798942 Z
M11.3375661,7.16613757 L11.3375661,7.23809524 L11.2656085,7.23809524
L11.2656085,7.16613757 L11.3375661,7.16613757 L11.3375661,7.16613757 Z"
id="Shape" sketch:type="MSShapeGroup"></path>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/modules/styles/flow/images/topic-expand.svg
b/modules/styles/flow/images/topic-expand.svg
new file mode 100644
index 0000000..2d7aae6
--- /dev/null
+++ b/modules/styles/flow/images/topic-expand.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="20px" height="14px" viewBox="0 0 20 14" version="1.1"
xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";
xmlns:sketch="http://www.bohemiancoding.com/sketch/ns";>
+ <!-- Generator: Sketch 3.3.3 (12072) -
http://www.bohemiancoding.com/sketch -->
+ <title>topic-collapse</title>
+ <desc>Created with Sketch.</desc>
+ <defs></defs>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none"
fill-rule="evenodd" sketch:type="MSPage">
+ <g id="topic-collapse" sketch:type="MSLayerGroup" fill="#999999">
+ <path d="M6.77248677,13.4920045 C6.77248677,12.8952577
6.28819411,12.4126984 5.69394914,12.4126984 L19.6393842,12.4126984
C19.0444667,12.4126984 18.5608466,12.8966853 18.5608466,13.4920045
L18.5608466,0.359847325 C18.5608466,0.956594147 19.0451392,1.43915344
19.6393842,1.43915344 L5.69394914,1.43915344 C6.28886663,1.43915344
6.77248677,0.955166578 6.77248677,0.359847325 L6.77248677,13.4920045 Z
M0.360615802,0 L19.6393842,0 C19.8385468,0 20,0.160353096 20,0.359847325
L20,13.4920045 C20,13.6907427 19.8400541,13.8518519 19.6393842,13.8518519
L0.360615802,13.8518519 C0.161453194,13.8518519 0,13.6914988 0,13.4920045
L0,0.359847325 C0,0.161109135 0.159945931,0 0.360615802,0 Z" id="Shape"
sketch:type="MSShapeGroup"></path>
+ <path d="M13.6719577,4.01798942 L13.6719577,6.35767196
L8.26455026,6.33968254 L8.26455026,8.06455026 L13.6719577,8.06455026
L13.6719577,10.4042328 L17.2698413,7.34603175 L13.6719577,4.01798942 Z
M11.3375661,7.16613757 L11.3375661,7.23809524 L11.2656085,7.23809524
L11.2656085,7.16613757 L11.3375661,7.16613757 L11.3375661,7.16613757 Z"
id="Shape" sketch:type="MSShapeGroup" transform="translate(12.767196, 7.211111)
scale(-1, 1) translate(-12.767196, -7.211111) "></path>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/modules/styles/flow/widgets/mw.flow.ui.SidebarExpandWidget.less
b/modules/styles/flow/widgets/mw.flow.ui.SidebarExpandWidget.less
new file mode 100644
index 0000000..345bfa8
--- /dev/null
+++ b/modules/styles/flow/widgets/mw.flow.ui.SidebarExpandWidget.less
@@ -0,0 +1,48 @@
+.flow-ui-sidebarExpandWidget {
+ display: none;
+ margin-top: 1.6em;
+
+ @media (min-width: 1165px) {
+ padding-left: 10px;
+ display: block;
+ float: right;
+ width: 34%;
+ min-height: 70vh;
+ box-sizing: border-box;
+
+ }
+ &-collapsed {
+ @media (min-width: 1165px) {
+ display: block;
+ float: right;
+ width: 24px;
+ margin-left: -24px;
+ }
+ }
+
+ .oo-ui-buttonElement.oo-ui-iconElement > .oo-ui-buttonElement-button >
.oo-ui-iconElement-icon.oo-ui-icon-topic-collapse {
+ background: url( '../images/topic-collapse.svg' ) no-repeat;
+ }
+ .oo-ui-buttonElement.oo-ui-iconElement > .oo-ui-buttonElement-button >
.oo-ui-iconElement-icon.oo-ui-icon-topic-expand {
+ background: url( '../images/topic-expand.svg' ) no-repeat;
+ }
+}
+
+.flow-component.topic-page .flow-board {
+ @media (min-width: 1165px) {
+ display: block;
+ float: left;
+ clear: left;
+ width: 66%;
+ box-sizing: border-box;
+ max-width: 1200px;
+ padding-right: 26px;
+ }
+
+ &-expanded {
+ @media (min-width: 1165px) {
+ width: 100%;
+ max-width: none;
+ }
+ }
+}
--
To view, visit https://gerrit.wikimedia.org/r/229996
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ib43bbf4620a8888377d8fff7cb8afcca23950a8c
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Flow
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <mor...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
