jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/338305 )
Change subject: Open the sidebar "More details" by default at high resolutions
......................................................................
Open the sidebar "More details" by default at high resolutions
Bug: T155352
Change-Id: I5a06b4a6e2d2d7090ebbdf27e9f200bcd972a92b
---
M modules/dialog-sidebar/sidebar.js
M modules/dialog/dialog.js
M styles/dialog.less
3 files changed, 51 insertions(+), 5 deletions(-)
Approvals:
Yurik: Looks good to me, approved
jenkins-bot: Verified
diff --git a/modules/dialog-sidebar/sidebar.js
b/modules/dialog-sidebar/sidebar.js
index 25716ee..5981bba 100644
--- a/modules/dialog-sidebar/sidebar.js
+++ b/modules/dialog-sidebar/sidebar.js
@@ -133,6 +133,9 @@
* re-renders the parts of the sidebar that depend on the map position.
*/
SideBar.prototype.onMapMove = OO.ui.throttle( function () {
+ if ( !this.dialog.map ) {
+ return;
+ }
this.mapPosition = this.dialog.map.getMapPosition( { scaled:
true } );
this.renderMapDetails();
@@ -322,7 +325,7 @@
*/
SideBar.prototype.tearDown = function () {
this.dialog.map.off( 'move', this.onMapMove, this );
-
+ this.dialog.sideBar = null;
this.$el.remove();
this.$el = null;
return this;
diff --git a/modules/dialog/dialog.js b/modules/dialog/dialog.js
index 05d64e1..58db1fa 100644
--- a/modules/dialog/dialog.js
+++ b/modules/dialog/dialog.js
@@ -15,9 +15,13 @@
* @type {Kartographer.Dialog.DialogClass}
*/
var MapDialog = function () {
- // Parent method
- MapDialog.super.apply( this, arguments );
- };
+ // Parent method
+ MapDialog.super.apply( this, arguments );
+ },
+ // Opens the sidebar when the screen is wide enough (greater
than 1024px)
+ isWideScreen = $( document ).width() > 1024,
+ FOOTER_HEIGHT = 58,
+ SIDEBAR_WIDTH = 320;
/* Inheritance */
@@ -72,6 +76,13 @@
dialog.$foot.append( $inlineContainer );
button.on( 'change', dialog.toggleSideBar,
null, dialog );
+
+ if ( isWideScreen ) {
+ dialog.map.doWhenReady( function () {
+ dialog.offsetMap( true );
+ dialog.toggleSideBar( true );
+ } );
+ }
} );
} );
};
@@ -115,6 +126,20 @@
} );
}
return MapDialog.super.prototype.getActionProcess.call( this,
action );
+ };
+
+ /**
+ * Adds an offset to the center of the map.
+ *
+ * @param {boolean} isSidebarOpen Whether the sidebar is open.
+ */
+ MapDialog.prototype.offsetMap = function ( isSidebarOpen ) {
+ var map = this.map,
+ offsetX = isSidebarOpen ? SIDEBAR_WIDTH / -2 : 0,
+ targetPoint = map.project( map.getCenter(),
map.getZoom() ).subtract( [ offsetX, -1 * FOOTER_HEIGHT ] ),
+ targetLatLng = map.unproject( targetPoint,
map.getZoom() );
+
+ map.setView( targetLatLng, map.getZoom() );
};
/**
@@ -178,11 +203,21 @@
}
if ( !dialog.$mapDetailsButton ) {
+ // The button does not exist
yet, add it
dialog.addFooterButton();
+
} else if ( dialog.sideBar ) {
+ // The button exists, the
sidebar was open, call `tearDown` and reopen it.
dialog.sideBar.tearDown();
dialog.map.doWhenReady(
function () {
- dialog.sideBar.render();
+ dialog.offsetMap( true
);
+ dialog.toggleSideBar(
true );
+ } );
+
+ } else {
+ // The button exists, the
sidebar was not open, simply run `offsetMap`
+ dialog.map.doWhenReady(
function () {
+ dialog.offsetMap( false
);
} );
}
}
diff --git a/styles/dialog.less b/styles/dialog.less
index afb4c9b..fb67c62 100644
--- a/styles/dialog.less
+++ b/styles/dialog.less
@@ -2,6 +2,10 @@
/* Dialog footer */
.mw-kartographer-mapDialog-foot {
+ /*
+ Anyone who changes the height of the footer should
+ update Kartographer.Dialog.DialogClass `FOOTER_HEIGHT`
accordingly
+ */
padding: 1em;
height: 4.5em;
background-color: @background-color-base;
@@ -29,6 +33,10 @@
bottom: 4.5em;
z-index: 2;
border-left: @border-base;
+ /*
+ Anyone who changes the width of the sidebar should
+ update Kartographer.Dialog.DialogClass `SIDEBAR_WIDTH`
accordingly
+ */
width: 321px; /* 320+1 so border is hidden on common 320px wide mobile
devices */
box-sizing: border-box;
background-color: #fff;
--
To view, visit https://gerrit.wikimedia.org/r/338305
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I5a06b4a6e2d2d7090ebbdf27e9f200bcd972a92b
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/extensions/Kartographer
Gerrit-Branch: master
Gerrit-Owner: JGirault <[email protected]>
Gerrit-Reviewer: Yurik <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
