MarkTraceur has uploaded a new change for review. https://gerrit.wikimedia.org/r/312281
Change subject: Make annotations popups, move them around
......................................................................
Make annotations popups, move them around
Bug: T145458
Change-Id: I75ade5ffebc29a1380011be1b6d1ff005a637fbe
---
M resources/src/FileAnnotation.js
M resources/src/FileAnnotator.less
2 files changed, 82 insertions(+), 55 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/FileAnnotations
refs/changes/81/312281/1
diff --git a/resources/src/FileAnnotation.js b/resources/src/FileAnnotation.js
index 790495f..af993b3 100644
--- a/resources/src/FileAnnotation.js
+++ b/resources/src/FileAnnotation.js
@@ -13,6 +13,8 @@
* @cfg {boolean} editing Whether editing is enabled.
*/
function FileAnnotation( config ) {
+ var annotation = this;
+
OO.EventEmitter.call( this );
this.api = config.api;
@@ -54,11 +56,11 @@
.msg( 'fileannotations-commons-see-more' );
this.$contain = $( '<div>' )
+ .append( this.$annotation )
.addClass( 'annotation-container' );
this.$box = $( '<div>' )
.addClass( 'annotation-box' )
- .append( this.$contain )
.css( {
top: this.adjustedY,
left: this.adjustedX,
@@ -66,12 +68,46 @@
height: this.adjustedHeight
} );
- this.$contain.css( {
- top: this.adjustedHeight - 10,
- left: this.adjustedWidth - 10
+ this.$contentBody = $( '#mw-content-text' );
+
+ this.popup = new OO.ui.PopupWidget( {
+ $container: this.$contentBody,
+ $content: this.$contain,
+ padded: true,
+ width: 550,
+ anchor: false,
+ classes: [ 'annotation-popup' ]
} );
- this.$contain.append( this.$annotation );
+ this.$box.hover( function ( e ) {
+ // Hover start, toggle on and align.
+ var x = e.clientX,
+ $body = $( 'body' ),
+ sw = $body.width();
+
+ if ( x < ( sw / 2 ) ) {
+ // We're on the left half of the
screen, push the annotation to the right.
+ annotation.popup.$element.css( {
+ left: annotation.adjustedWidth
+ } );
+
+ annotation.popup.setAlignment(
'force-right' );
+ } else {
+ // We're on the right half of the
screen, push the annotation to the left.
+ annotation.popup.$element.css( {
+ left: -annotation.adjustedWidth
- annotation.$contain.width
+ } );
+
+ annotation.popup.setAlignment(
'force-left' );
+ }
+
+ annotation.popup.toggle( true );
+ }, function () {
+ // Hover end, toggle off
+ annotation.popup.toggle( false );
+ } );
+
+ this.$box.append( this.popup.$element );
if ( config.editing ) {
this.addEditInterface();
diff --git a/resources/src/FileAnnotator.less b/resources/src/FileAnnotator.less
index 1eefa36..6f816b7 100644
--- a/resources/src/FileAnnotator.less
+++ b/resources/src/FileAnnotator.less
@@ -14,66 +14,57 @@
position: absolute;
border: 1px solid yellow;
- .annotation-container {
- display: none;
- border: 1px solid grey;
- background-color: white;
- position: absolute;
- padding: 2px;
- z-index: 1;
+ .file-annotation {
+ .commons-category-annotation {
+ padding: 5px;
+ text-align: center;
- .file-annotation {
- .commons-category-annotation {
- padding: 5px;
- text-align: center;
+ .category-members {
+ width: 550px;
- .category-members {
- width: 550px;
-
- .category-member {
- margin: 5px;
- width: 100px;
- height: 100px;
- text-align: center;
-
- img {
- display:
inline-block;
- }
- }
-
- padding-bottom: 20px;
- }
- }
-
- .wikipedia-article-annotation {
- width: 510px;
- padding: 5px;
-
- > p {
- width: 250px;
- display: inline-block;
- }
-
- .pageimage {
+ .category-member {
+ margin: 5px;
+ width: 100px;
+ height: 100px;
text-align: center;
img {
- vertical-align:
baseline;
+ display: inline-block;
}
}
+
+ padding-bottom: 20px;
+ }
+ }
+
+ .wikipedia-article-annotation {
+ width: 510px;
+ padding: 5px;
+
+ > p {
+ width: 250px;
+ display: inline-block;
}
- .wikidata-entity-annotation {
+ .pageimage {
+ text-align: center;
+
+ img {
+ vertical-align: baseline;
+ }
+ }
+ }
+
+ .wikidata-entity-annotation {
+ width: 200px;
+
+ .text-content {
+ padding: 5px;
+ }
+
+ .wikidata-image {
width: 200px;
-
- .text-content {
- padding: 5px;
- }
-
- .wikidata-image {
- width: 200px;
- text-align: center;
- }
+ text-align: center;
}
}
}
--
To view, visit https://gerrit.wikimedia.org/r/312281
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I75ade5ffebc29a1380011be1b6d1ff005a637fbe
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/FileAnnotations
Gerrit-Branch: master
Gerrit-Owner: MarkTraceur <mholmqu...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
