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