wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-11-28 00:00:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve the gallery dialog layout for mobile

Browse source 
Bug: T203477
Change-Id: I0adc851b71362267d1d06d9a8b5483c1ee114c26
This commit is contained in:
Thalia 2018-10-10 14:09:39 +01:00 committed by Ed Sanders
parent e354092417
commit 88875b1b8f
3 changed files with 82 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
modules/ve-mw/ui/dialogs/ve.ui.MWGalleryDialog.js
View file

@ -141,6 +141,7 @@ ve.ui.MWGalleryDialog.prototype.initialize = function () {
this.selectedFilenames = {};
this.initialImageData = [];
this.imageData = {};
this.isMobile = OO.ui.isMobile();
// Default settings
this.defaults = mw.config.get( 'wgVisualEditorConfig' ).galleryOptions;
@ -162,11 +163,18 @@ ve.ui.MWGalleryDialog.prototype.initialize = function () {
// General layout
menuLayout = new OO.ui.MenuLayout( {
classes: [ 've-ui-mwGalleryDialog-menuLayout' ]
menuPosition: this.isMobile ? 'top' : 'before',
classes: [
've-ui-mwGalleryDialog-menuLayout',
've-ui-mwGalleryDialog-menuLayout' + ( this.isMobile ? '-mobile' : '-desktop' )
]
} );
imageListMenuLayout = new OO.ui.MenuLayout( {
menuPosition: 'bottom',
classes: [ 've-ui-mwGalleryDialog-imageListMenuLayout' ]
menuPosition: this.isMobile ? 'after' : 'bottom',
classes: [
've-ui-mwGalleryDialog-imageListMenuLayout',
've-ui-mwGalleryDialog-imageListMenuLayout' + ( this.isMobile ? '-mobile' : '-desktop' )
]
} );
imageListContentPanel = new OO.ui.PanelLayout( {
padded: true,
@ -195,9 +203,13 @@ ve.ui.MWGalleryDialog.prototype.initialize = function () {
this.$emptyGalleryMessage = $( '<div>' )
.addClass( 'oo-ui-element-hidden' )
.text( ve.msg( 'visualeditor-mwgallerydialog-empty-gallery-message' ) );
this.galleryGroup = new ve.ui.MWGalleryGroupWidget();
this.galleryGroup = new ve.ui.MWGalleryGroupWidget( {
orientation: this.isMobile ? 'horizontal' : 'vertical'
} );
this.showSearchPanelButton = new OO.ui.ButtonWidget( {
label: ve.msg( 'visualeditor-mwgallerydialog-search-button-label' ),
label: this.isMobile ? undefined : ve.msg( 'visualeditor-mwgallerydialog-search-button-label' ),
icon: 'add',
framed: false,
flags: [ 'progressive' ],
classes: [ 've-ui-mwGalleryDialog-show-search-panel-button' ]
} );
@ -222,6 +234,7 @@ ve.ui.MWGalleryDialog.prototype.initialize = function () {
} );
this.removeButton = new OO.ui.ButtonWidget( {
label: ve.msg( 'visualeditor-mwgallerydialog-remove-button-label' ),
icon: 'trash',
flags: [ 'destructive' ],
classes: [ 've-ui-mwGalleryDialog-remove-button' ]
} );
@ -244,7 +257,7 @@ ve.ui.MWGalleryDialog.prototype.initialize = function () {
// Search panel
this.searchWidget = new mw.widgets.MediaSearchWidget( {
rowHeight: 150
rowHeight: this.isMobile ? 100 : 150
} );
// Options tab panel
@ -322,7 +335,8 @@ ve.ui.MWGalleryDialog.prototype.initialize = function () {
label: ve.msg( 'visualeditor-mwgallerydialog-mode-field-label' )
} );
captionField = new OO.ui.FieldLayout( this.captionTarget, {
label: ve.msg( 'visualeditor-mwgallerydialog-caption-field-label' )
label: ve.msg( 'visualeditor-mwgallerydialog-caption-field-label' ),
align: this.isMobile ? 'top' : 'left'
} );
widthsField = new OO.ui.FieldLayout( this.widthsInput, {
label: ve.msg( 'visualeditor-mwgallerydialog-widths-field-label' )
@ -605,7 +619,8 @@ ve.ui.MWGalleryDialog.prototype.requestImages = function ( options ) {
ve.ui.MWGalleryDialog.prototype.onRequestImagesSuccess = function ( response ) {
var title,
thumbUrls = {},
items = [];
items = [],
config = { isMobile: this.isMobile };
for ( title in response ) {
thumbUrls[ title ] = {
@ -618,7 +633,7 @@ ve.ui.MWGalleryDialog.prototype.onRequestImagesSuccess = function ( response ) {
if ( this.initialImageData.length > 0 ) {
this.initialImageData.forEach( function ( image ) {
image.thumbUrl = thumbUrls[ image.resource ].thumbUrl;
items.push( new ve.ui.MWGalleryItemWidget( image ) );
items.push( new ve.ui.MWGalleryItemWidget( image, config ) );
} );
this.initialImageData = [];
} else {
@ -632,7 +647,7 @@ ve.ui.MWGalleryDialog.prototype.onRequestImagesSuccess = function ( response ) {
width: thumbUrls[ title ].width,
thumbUrl: thumbUrls[ title ].thumbUrl,
captionDocument: this.createCaptionDocument( null )
} ) );
}, config ) );
delete this.selectedFilenames[ title ];
}
}

65
modules/ve-mw/ui/styles/dialogs/ve.ui.MWGalleryDialog.css
View file

@ -6,12 +6,10 @@
*/
.ve-ui-mwGalleryDialog .ve-ui-mwGalleryDialog-image-container {
width: 100%;
height: 100px;
background-repeat: no-repeat;
background-position: 50% 50%;
border: 1px solid #c8ccd1;
margin-bottom: 0.5em;
cursor: pointer;
background-size: contain;
-webkit-transition: border 200ms cubic-bezier( 0.39, 0.575, 0.565, 1 ), box-shadow 200ms cubic-bezier( 0.39, 0.575, 0.565, 1 );
@ -22,6 +20,16 @@
padding: 0;
}
.ve-ui-mwGalleryDialog .ve-ui-mwGalleryDialog-image-container-desktop {
width: 100%;
margin-bottom: 0.5em;
}
.ve-ui-mwGalleryDialog .ve-ui-mwGalleryDialog-image-container-mobile {
width: 100px;
margin-right: 0.5em;
}
.ve-ui-mwGalleryDialog .ve-ui-mwGalleryDialog-image-container-highlighted {
border-color: #36c;
box-shadow: inset 0 0 0 0.1em #36c;
@ -42,24 +50,63 @@
background-size: contain;
}
.ve-ui-mwGalleryDialog-menuLayout > .oo-ui-menuLayout-menu {
.ve-ui-mwGalleryDialog-menuLayout-desktop > .oo-ui-menuLayout-menu {
width: 14em;
border-left: 1px solid #c8ccd1;
border-right: 1px solid #c8ccd1;
}
.ve-ui-mwGalleryDialog-menuLayout > .oo-ui-menuLayout-content {
.ve-ui-mwGalleryDialog-menuLayout-mobile > .oo-ui-menuLayout-menu {
height: calc( 102px + 2em );
border-bottom: 1px solid #c8ccd1;
}
.ve-ui-mwGalleryDialog-menuLayout-desktop > .oo-ui-menuLayout-content {
left: 14em;
right: 14em;
}
.ve-ui-mwGalleryDialog-imageListMenuLayout > .oo-ui-menuLayout-content {
.ve-ui-mwGalleryDialog-menuLayout-mobile > .oo-ui-menuLayout-content {
top: calc( 102px + 2em );
}
.ve-ui-mwGalleryDialog-imageListMenuLayout-desktop > .oo-ui-menuLayout-content {
bottom: 5em;
}
.ve-ui-mwGalleryDialog-imageListMenuLayout-mobile > .oo-ui-menuLayout-content {
right: 4em;
border-right: 1px solid #eaecf0;
}
.ve-ui-mwGalleryDialog-imageListMenuLayout-mobile > .oo-ui-menuLayout-content > .oo-ui-panelLayout-scrollable {
overflow-y: hidden;
}
.ve-ui-mwGalleryDialog-imageListMenuLayout > .oo-ui-menuLayout-menu {
height: 5em;
border-top: 1px solid #eaecf0;
box-shadow: 0 -1px 0 0 rgba( 0, 0, 0, 0.05 );
text-align: center;
}
.ve-ui-mwGalleryDialog-imageListMenuLayout-desktop > .oo-ui-menuLayout-menu {
box-shadow: 0 -1px 0 0 rgba( 0, 0, 0, 0.05 );
height: 5em;
border-top: 1px solid #eaecf0;
}
.ve-ui-mwGalleryDialog-imageListMenuLayout-mobile > .oo-ui-menuLayout-menu {
box-shadow: -1px 0 0 0 rgba( 0, 0, 0, 0.05 );
line-height: 102px;
width: 4em;
}
.ve-ui-mwGalleryDialog-imageListMenuLayout-mobile > .oo-ui-menuLayout-menu > .oo-ui-panelLayout-padded {
padding: 1em 0;
}
.ve-ui-mwGalleryDialog-imageListMenuLayout-mobile > .oo-ui-menuLayout-menu .oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child {
margin-left: 0;
}
.ve-ui-mwGalleryDialog-imageListMenuLayout .oo-ui-draggableGroupElement-horizontal {
white-space: nowrap;
line-height: 0;
}

1
modules/ve-mw/ui/widgets/ve.ui.MWGalleryItemWidget.js
View file

@ -34,6 +34,7 @@ ve.ui.MWGalleryItemWidget = function VeUiMWGalleryItemWidget( imageInfo, config
this.$element
.addClass( 've-ui-mwGalleryDialog-image-container' ) // TODO: put in new CSS file?
.addClass( 've-ui-mwGalleryDialog-image-container' + ( config.isMobile ? '-mobile' : '-desktop' ) )
.css( 'background-image', 'url(' + this.thumbUrl + ')' );
// Mixin constructors