Harej has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/354887 )
Change subject: Style tweaks
......................................................................
Style tweaks
- Tighter bounding / visual uniformity for list entries
- Making chrome consistent between single-column and multi-column
lists
- Changing some usages of the magnifying glass icon to the pencil
icon
Change-Id: I3019069213a183ff441c15482a24813431c21b44
---
M extension.json
M includes/content/CollaborationListContent.php
M modules/ext.CollaborationKit.hub.styles.less
M modules/ext.CollaborationKit.hubtheme.js
M modules/ext.CollaborationKit.list.styles.less
M modules/ext.CollaborationKit.list.ui.js
6 files changed, 65 insertions(+), 109 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/CollaborationKit
refs/changes/87/354887/1
diff --git a/extension.json b/extension.json
index db5658e..00fc2de 100644
--- a/extension.json
+++ b/extension.json
@@ -182,6 +182,7 @@
"mediawiki.api.edit",
"oojs-ui",
"oojs-ui.styles.icons-movement",
+ "oojs-ui.styles.icons-editing-core",
"mediawiki.widgets",
"mediawiki.widgets.UserInputWidget",
"jquery.ui.sortable",
diff --git a/includes/content/CollaborationListContent.php
b/includes/content/CollaborationListContent.php
index f39a580..d950f10 100644
--- a/includes/content/CollaborationListContent.php
+++ b/includes/content/CollaborationListContent.php
@@ -372,8 +372,9 @@
} elseif ( $item->link !== false ) {
$titleForItem =
Title::newFromText( $item->link );
}
+ $adjustedIconWidth = $iconWidth + 2;
$text .= Html::openElement( 'div', [
- 'style' =>
"min-height:{$iconWidth}px",
+ 'style' =>
"height:{$adjustedIconWidth}px; min-height:{$adjustedIconWidth}px",
'class' => 'mw-ck-list-item',
'data-collabkit-item-title' =>
$item->title,
'data-collabkit-item-id' =>
$colId . '-' . $itemCounter,
diff --git a/modules/ext.CollaborationKit.hub.styles.less
b/modules/ext.CollaborationKit.hub.styles.less
index 9ac5995..bea4cad 100644
--- a/modules/ext.CollaborationKit.hub.styles.less
+++ b/modules/ext.CollaborationKit.hub.styles.less
@@ -22,6 +22,10 @@
margin: auto;
}
+ div ul {
+ margin: 0;
+ }
+
.mw-ck-file-image {
height: 50px;
overflow: hidden;
@@ -32,9 +36,9 @@
}
.mw-ck-toc-label {
font-weight: bold;
- margin: 0 0 1em;
- border-bottom: 3px solid;
+ margin: 0 0 .5em;
width: 33%;
+
}
.mw-ck-icon {
height: 50px;
@@ -67,7 +71,7 @@
}
.mw-ck-hub-section-main {
- padding-top: .25em;
+ padding-top: 1.125em;
}
}
.mw-ck-hub-section-buttons {
@@ -106,7 +110,7 @@
width: 25%;
h3 {
- margin: 0 0 .5em;
+ margin: 0 0 1.125em;
padding: 0;
text-align: center;
}
diff --git a/modules/ext.CollaborationKit.hubtheme.js
b/modules/ext.CollaborationKit.hubtheme.js
index e727919..f3fc2c2 100644
--- a/modules/ext.CollaborationKit.hubtheme.js
+++ b/modules/ext.CollaborationKit.hubtheme.js
@@ -291,14 +291,14 @@
// Defining buttons
colourBrowserButton = new OO.ui.ButtonWidget( {
- icon: 'search',
+ icon: 'edit',
framed: false,
classes: [ 'mw-ck-hubtheme-widget-inlinebutton' ]
} );
colourBrowserButton.on( 'click', openColourBrowser );
hubimageBrowserButton = new OO.ui.ButtonWidget( {
- icon: 'search',
+ icon: 'edit',
framed: false,
classes: [ 'mw-ck-hubtheme-widget-inlinebutton' ]
} );
diff --git a/modules/ext.CollaborationKit.list.styles.less
b/modules/ext.CollaborationKit.list.styles.less
index 7f3265c..e509a7d 100644
--- a/modules/ext.CollaborationKit.list.styles.less
+++ b/modules/ext.CollaborationKit.list.styles.less
@@ -3,10 +3,48 @@
/* Styles needed when transcluding list content */
.mw-ck-list-item {
- margin-bottom: 0.5em;
+ overflow: hidden;
+ margin-bottom: 1.125em;
+ position: relative;
+
+ .mw-ck-list-buttonrow {
+ visibility: hidden;
+ }
+
+ .mw-ck-list-container .mw-ck-list-notes p {
+ margin: .35em 0;
+ }
+}
+
+.mw-ck-list-item:after {
+ content: '';
+ background: linear-gradient(to bottom, transparent, white);
+ height: 50%;
+ width: 100%;
+ margin-left:66px;
+ position: absolute;
+ bottom: 0;
+}
+
+.mw-ck-hub-members .mw-ck-list-item:after {
+ background: linear-gradient(to bottom, transparent, #f9f9f9);
+}
+
+.mw-ck-list-item:hover {
+ height: auto !important;
+ overflow: visible;
+
+ .mw-ck-list-buttonrow {
+ visibility: visible;
+ }
+}
+
+.mw-ck-list-item:hover:after {
+ display: none;
}
.mw-ck-list-image {
+ .grey();
float: left;
overflow: hidden;
}
@@ -18,10 +56,8 @@
background: #eee 50% 50%;
}
.mw-ck-list-container {
- height: 64px;
padding-left: 10px;
display: table-cell;
- vertical-align: middle;
line-height: 1.2;
}
.mw-ck-list-title {
@@ -31,7 +67,6 @@
.mw-ck-list-notes {
font-size: 90%;
- margin: 1em 0 2em;
}
/* Multilist stuff */
@@ -41,7 +76,6 @@
margin: 0 -.5em;
.mw-ck-list-column {
- .grey-box();
float: left; // IE9 workaround, maybe
.flex();
margin: .5em;
@@ -70,88 +104,6 @@
padding-top: 0;
}
}
-.column-theme-header( #ddd );
-
-// Theme colours mixin and application
-
-.column-theme-header( @color ) {
- .mw-ck-multilist {
- .mw-ck-list-column {
- border-color: fadeout( @color, 25% );
- }
- .mw-ck-list-column-header {
- border: solid 1px @color;
- border-bottom-width: 3px;
- background: fadeout( @color, 75% );
- }
- }
-}
-.mw-ck-theme-darkred {
- .column-theme-header( @darkred );
-}
-.mw-ck-theme-red {
- .column-theme-header( @red );
-}
-.mw-ck-theme-darkgrey {
- .column-theme-header( @darkgrey );
-}
-.mw-ck-theme-lightgrey {
- .column-theme-header( @lightgrey );
-}
-.mw-ck-theme-skyblue {
- .column-theme-header( @skyblue );
-}
-.mw-ck-theme-blue {
- .column-theme-header( @blue );
-}
-.mw-ck-theme-bluegrey {
- .column-theme-header( @bluegrey );
-}
-.mw-ck-theme-navyblue {
- .column-theme-header( @navyblue );
-}
-.mw-ck-theme-darkblue {
- .column-theme-header( @darkblue );
-}
-.mw-ck-theme-aquamarine {
- .column-theme-header( @aquamarine );
-}
-.mw-ck-theme-violet {
- .column-theme-header( @violet );
-}
-.mw-ck-theme-purple {
- .column-theme-header( @purple );
-}
-.mw-ck-theme-mauve {
- .column-theme-header( @mauve );
-}
-.mw-ck-theme-lightmauve {
- .column-theme-header( @lightmauve );
-}
-.mw-ck-theme-salmon {
- .column-theme-header( @salmon );
-}
-.mw-ck-theme-orange {
- .column-theme-header( @orange );
-}
-.mw-ck-theme-yellow {
- .column-theme-header( @yellow );
-}
-.mw-ck-theme-gold {
- .column-theme-header( @gold );
-}
-.mw-ck-theme-pastelyellow {
- .column-theme-header( @pastelyellow );
-}
-.mw-ck-theme-forestgreen {
- .column-theme-header( @forestgreen );
-}
-.mw-ck-theme-brightgreen {
- .column-theme-header( @brightgreen );
-}
-.mw-ck-theme-khaki {
- .column-theme-header( @khaki );
-}
/* @todo, should maybe replace styling from toccolours with this class */
.mw-ck-list-tags {
@@ -160,12 +112,6 @@
/* Stuff below here could potentially be in a separate module since
* its only used on direct page and not when transcluding */
-
-
-/* Separate so spinner can replace properly */
-.mw-ck-list-deletebutton {
- margin-left: 2em;
-}
.mw-ck-list:not(.mw-ck-dragging) .mw-ck-list-movebutton {
cursor: ns-resize;
@@ -187,8 +133,7 @@
/* Unclear if this is a really bad idea, but 24px makes the icon too big */
.mw-ck-list-button .oo-ui-iconElement-icon.oo-ui-iconElement-icon {
- min-height: 22px;
- height: 1em;
+ height: 22px;
}
.mw-ck-list-additem {
@@ -201,8 +146,8 @@
}
.mw-ck-list-dragplaceholder {
- border: black thin dashed;
- width: 25%;
+ background: #eee;
+ width: 100%;
}
.mw-ck-list-title .jquery-confirmable-text,
diff --git a/modules/ext.CollaborationKit.list.ui.js
b/modules/ext.CollaborationKit.list.ui.js
index 7560ad4..cfd3232 100644
--- a/modules/ext.CollaborationKit.list.ui.js
+++ b/modules/ext.CollaborationKit.list.ui.js
@@ -275,7 +275,8 @@
$list = $( '.mw-ck-list' );
$list.find( '.mw-ck-list-item' ).each( function () {
- var deleteButton,
+ var buttonRow,
+ deleteButton,
moveButton,
editButton,
delWrapper,
@@ -302,7 +303,7 @@
}
editButton = new OO.ui.ButtonWidget( {
- label: 'edit',
+ icon: 'edit',
framed: false
} ).on( 'click', function () {
modifyExistingItem(
@@ -337,10 +338,14 @@
.addClass( 'mw-ck-list-button' )
.append( editButton.$element );
- item.find( '.mw-ck-list-title' )
- .append( delWrapper )
+ buttonRow = $( '<div></div>' )
+ .addClass( 'mw-ck-list-buttonrow' )
.append( moveWrapper )
- .append( editWrapper );
+ .append( editWrapper )
+ .append( delWrapper );
+
+ item.find( '.mw-ck-list-notes' )
+ .append( buttonRow );
} );
if ( !mw.config.get( 'wgCollaborationKitIsMemberList' ) ) {
--
To view, visit https://gerrit.wikimedia.org/r/354887
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I3019069213a183ff441c15482a24813431c21b44
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/CollaborationKit
Gerrit-Branch: master
Gerrit-Owner: Harej <jamesmh...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
