Matthias Mullie has uploaded a new change for review. https://gerrit.wikimedia.org/r/94165
Change subject: Design changes ...................................................................... Design changes Attempt to apply https://gerrit.wikimedia.org/r/#/c/93002/ in a less hacky way Change-Id: Ib375e362a36231c572cdfba95401fd6b4c6b4faf --- M modules/base/styles/container.less M modules/base/styles/various.less M modules/discussion/styles/post.less M modules/discussion/styles/topic.less M modules/mediawiki.ui/styles/agora-override-buttons.less M modules/mediawiki.ui/styles/mixins/buttons.less M templates/post.html.php M templates/topic.html.php M templates/topiclist.html.php 9 files changed, 102 insertions(+), 101 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Flow refs/changes/65/94165/1 diff --git a/modules/base/styles/container.less b/modules/base/styles/container.less index 2b64eb9..ec81a72 100644 --- a/modules/base/styles/container.less +++ b/modules/base/styles/container.less @@ -1,4 +1,4 @@ -@icons-space: 50px; +@icons-space: 44px; // all UI "container" elements should have this class, which will preserve some // space on the right for icons. @@ -29,15 +29,15 @@ // icons bottom-aligned should in HTML be _after_ the element where they // should align to the bottom, and have this class added (will push the - // button back up to lign up with the preceeding node) + // button back up to line up with the preceding node) &.flow-icon-bottom-aligned { - margin-top: -40px; + margin-top: -30px; } // icons top-aligned should in HTML be _before_ the element where they // should align to the top, and have this class added &.flow-icon-top-aligned { - + margin-top: -10px; } } @@ -51,6 +51,7 @@ .flow-container { font-size: 16px; - // based on width in Flow Prototype/Design/Iteration 5 "Talkpage_*" - width: 660px; + // allow width to float a bit so we can accommodate some smaller screens + min-width: 400px; + max-width: 800px; } diff --git a/modules/base/styles/various.less b/modules/base/styles/various.less index 773c6c4..7114f70 100644 --- a/modules/base/styles/various.less +++ b/modules/base/styles/various.less @@ -12,4 +12,5 @@ .flow-datestamp { color: #aaa; + font-size: 14px; } diff --git a/modules/discussion/styles/post.less b/modules/discussion/styles/post.less index ce4379f..1efa4a6 100644 --- a/modules/discussion/styles/post.less +++ b/modules/discussion/styles/post.less @@ -5,18 +5,21 @@ clear: both; .flow-post { - margin-top: 20px; - margin-bottom: 20px; + margin: 10px 0; padding-left: 16px; } + .flow-post-main { + position: relative; + } + .flow-post-title { - padding-bottom: 22px; + padding-top: 10px; + padding-bottom: 8px; .flow-creator { font-weight: bold; color: @post-title-color; - } } @@ -24,7 +27,7 @@ font-weight: normal; color: @post-content-color; - padding-bottom: 20px; + padding-bottom: 13px; *:first-child { margin-top: 0; @@ -36,7 +39,7 @@ } .flow-edit-post-link { - margin-top: -60px !important; // default -40px + -20px to be pushed up (because of .flow-post-content bottom padding) + margin-top: -43px !important; // default -30px + -13px to be pushed up (because of .flow-post-content bottom padding) background-position: center; background-size: 20px auto; @@ -49,8 +52,6 @@ } .flow-icon-permalink { - margin-top: -30px !important; - background-position: center; background-size: 20px auto; background-repeat: no-repeat; @@ -67,16 +68,11 @@ } .flow-datestamp { - float: right; + position: absolute; + right: 0; + bottom: 0; padding-right: 22px; - - // right next to the datestamp is the "moderation actions" icon, which - // is also floated right, but then moved to the right side via a - // negative right-padding. This move to the right via negative padding - // does not affect the surrounding elements, thus we're manually moving - // this one to the right (over the icon's original position) via a - // similar trick. - margin-right: -40px; + margin: 0; a.flow-action-history-link { color: inherit; @@ -88,11 +84,14 @@ .flow-actions-flyout { position: absolute; - top: -34px; + top: -50px; right: 0; } .flow-actions-link { + // position it nicely between .flow-edit-post-link & .flow-actions-link + margin-top: -61px !important; + width: 20px; height: 20px; text-indent: -9999px; @@ -122,7 +121,7 @@ @onclick-icon, @onclick-fallback-icon ) { - padding-left: 42px; + padding-left: 41px; // !important to overwrite MW core's background image .background-image-svg(@normal-icon, @normal-fallback-icon) !important; @@ -194,7 +193,7 @@ .flow-post-replies { margin-left: 22px; - border-left: 1px solid #999; + border-left: 2px dotted #CCC; .flow-post-replies { border-left: 0px solid transparent; @@ -203,10 +202,10 @@ } .flow-thank-link { - padding-left: 46px; + padding-left: 41px; .background-image-svg('../../base/images/thank.svg', '../../base/images/thank.png'); - background-position: 16px; + background-position: 12px; background-size: 20px auto; background-repeat: no-repeat; } @@ -327,9 +326,10 @@ } .flow-post-container { + margin-top: 20px; + font-size: 14px; // hacky way to flatten conversation; // make anything over 2 indentation levels appear on same level - margin-top: 0px; .flow-post-container { padding-left: 0px; } diff --git a/modules/discussion/styles/topic.less b/modules/discussion/styles/topic.less index 59d252b..f788d64 100644 --- a/modules/discussion/styles/topic.less +++ b/modules/discussion/styles/topic.less @@ -2,11 +2,13 @@ @import 'mediawiki.mixins.less'; .flow-topic-container { - padding-bottom: 30px; + padding-bottom: 20px; - .flow-topic-children-container { - // This combines with the padding-top: 20px on '.flow-post-container .flow-post' for a total 30px gap - padding-top: 10px; + &>*:last-child { + // This combines with the padding-bottom: 20px on .flow-topic-container + // for a total 30px gap. We want the gap to be only 20px when topic is + // collapsed, which is why we're adding the remaining 10px to last child. + padding-bottom: 10px; } .flow-titlebar { @@ -15,9 +17,10 @@ // override mw-ui-button style text-align: left; display: block; - padding: 24px 22px; + padding: 15px 22px; font-weight: normal; background: @topic-titlebar-background-color; + font-size: 16px; line-height: 28px; color: @topic-titlebar-text-color; @@ -29,7 +32,7 @@ } .flow-topic-title { - padding-bottom: 30px; + padding-bottom: 15px; // leave some room for .flow-topic-actions-link on the right margin-right: 44px; @@ -50,15 +53,17 @@ .flow-actions { .flow-actions-link { position: absolute; - right: 22px; - top: 22px; + right: 12px; + top: 5px; width: 20px; height: 20px; text-indent: -9999px; + padding: 10px; - background-repeat: no-repeat; background-position: center; + background-size: 20px auto; + background-repeat: no-repeat; .background-image-svg('../../base/images/junkdrawer_normal.svg', '../../base/images/junkdrawer_normal.png'); &:hover { @@ -68,7 +73,7 @@ .flow-actions-flyout { position: absolute; - top: 56px; // 14px + (22px top padding + 20px icon height) + top: 49px; // 14px + (15px top padding + 20px icon height) right: 0; } } @@ -79,7 +84,7 @@ li { line-height: 16px; - padding: 0 0 14px 0; + padding: 0 0 9px 0; &:last-child { padding: 0; @@ -87,6 +92,7 @@ a { color: inherit; + text-decoration: underline; } } } @@ -96,7 +102,7 @@ position: absolute; right: 22px; - bottom: 22px; + bottom: 16px; a.flow-action-history-link { color: inherit; @@ -106,14 +112,6 @@ .flow-icon { // additional push to the right because of container's padding & border margin-right: -23px; // container's right padding + right border - - &.flow-icon-top-aligned { - margin-top: -12px; // half of container's top padding - } - - &.flow-icon-bottom-aligned { - margin-top: -28px; // -40px - half of container's bottom padding - } } .flow-edit-topic-link { @@ -172,21 +170,17 @@ .flow-newtopic-title { font-weight: bold; + + padding-right: 45px; + + background-position: right 10px center; + background-size: 25px auto; + background-repeat: no-repeat; + .background-image-svg('../../base/images/createtopic_normal.svg', '../../base/images/createtopic_normal.png'); } .flow-post-form-controls { text-align: right; - } - - .flow-new-topic-link { - background-position: center center; - background-size: 25px auto; - background-repeat: no-repeat; - .background-image-svg('../../base/images/createtopic_normal.svg', '../../base/images/createtopic_normal.png'); - - &:hover { - .background-image-svg('../../base/images/createtopic_hover.svg', '../../base/images/createtopic_hover.png'); - } } } } diff --git a/modules/mediawiki.ui/styles/agora-override-buttons.less b/modules/mediawiki.ui/styles/agora-override-buttons.less index 2c5212a..41a4079 100644 --- a/modules/mediawiki.ui/styles/agora-override-buttons.less +++ b/modules/mediawiki.ui/styles/agora-override-buttons.less @@ -4,6 +4,11 @@ @import 'mixins/buttons.less'; .mw-ui-button { + // if button is followed by another button, add some space in between + + .mw-ui-button{ + margin-left: 8px; + } + .buttonColors( // normal @neutral-base, // background @@ -20,7 +25,7 @@ // disabled @neutral-base, - #898989, + #898989 ); &.mw-ui-constructive { @@ -40,7 +45,7 @@ // disabled @neutral-base, - #898989, + #898989 ); // override borders @@ -68,7 +73,7 @@ // disabled @neutral-base, - #898989, + #898989 ); &.mw-ui-destructive-medium { @@ -88,7 +93,7 @@ // disabled @neutral-base, - #898989, + #898989 ); } @@ -109,7 +114,7 @@ // disabled @neutral-base, - #898989, + #898989 ); } } diff --git a/modules/mediawiki.ui/styles/mixins/buttons.less b/modules/mediawiki.ui/styles/mixins/buttons.less index 3fc0546..ff59e88 100644 --- a/modules/mediawiki.ui/styles/mixins/buttons.less +++ b/modules/mediawiki.ui/styles/mixins/buttons.less @@ -20,15 +20,16 @@ border-radius: 3px; cursor: pointer; text-shadow: 0px 1px 0px 0px rgba(0,0,0,.20); + font-size: 14px; &:hover, &.mw-ui-hover { color: @hover-primary-contrast-color !important; background: @hover-primary-color; - box-shadow: 0px 1px 0px 0px rgba(0,0,0,.20), inset 0px -3px 0px 0px rgba(0,0,0,.20); - -webkit-box-shadow: 0px 1px 0px 0px rgba(0,0,0,.20), inset 0px -3px 0px 0px rgba(0,0,0,.20); - -moz-box-shadow: 0px 1px 0px 0px rgba(0,0,0,.20), inset 0px -3px 0px 0px rgba(0,0,0,.20); + box-shadow: 0px 1px 0px 0px rgba(0,0,0,.05), inset 0px -2px 0px 0px rgba(0,0,0,.20); + -webkit-box-shadow: 0px 1px 0px 0px rgba(0,0,0,.05), inset 0px -2px 0px 0px rgba(0,0,0,.20); + -moz-box-shadow: 0px 1px 0px 0px rgba(0,0,0,.05), inset 0px -2px 0px 0px rgba(0,0,0,.20); } &:active, diff --git a/templates/post.html.php b/templates/post.html.php index 5b125aa..1f9d162 100644 --- a/templates/post.html.php +++ b/templates/post.html.php @@ -30,6 +30,7 @@ ) ) . Html::textarea( $block->getName() . '[content]', '', array( 'placeholder' => $placeHolder, + 'title' => $placeHolder, 'class' => 'flow-reply-content flow-input mw-ui-input', ) ) . // NOTE: cancel button will be added via JS, makes no sense in non-JS context @@ -77,18 +78,6 @@ <?php echo $postView->editPostButton( $post, 'flow-edit-post-link flow-icon flow-icon-bottom-aligned' ); ?> - <?php - echo Html::element( - 'a', - array( - 'class' => 'flow-icon-permalink flow-icon flow-icon-top-aligned', - 'title' => wfMessage( 'flow-post-action-view' )->text(), - 'href' => $this->generateUrl( $block->getWorkflowId() ) . '#flow-post-' . $post->getPostId()->getHex(), - ), - wfMessage( 'flow-topic-action-view' )->text() - ); - ?> - <p class="flow-datestamp"> <?php // timestamp html @@ -116,6 +105,18 @@ </div> </div> + <?php + echo Html::element( + 'a', + array( + 'class' => 'flow-icon-permalink flow-icon flow-icon-bottom-aligned', + 'title' => wfMessage( 'flow-post-action-view' )->text(), + 'href' => $this->generateUrl( $block->getWorkflowId() ) . '#flow-post-' . $post->getPostId()->getHex(), + ), + wfMessage( 'flow-topic-action-view' )->text() + ); + ?> + <?php if ( $postView->actions()->isAllowedAny( 'hide-post', 'delete-post', 'censor-post', 'restore-post' ) ): ?> <div class="flow-actions"> <a class="flow-actions-link flow-icon flow-icon-bottom-aligned" href="#" title="<?php echo wfMessage( 'flow-post-actions' )->escaped(); ?>"><?php echo wfMessage( 'flow-post-actions' )->escaped(); ?></a> diff --git a/templates/topic.html.php b/templates/topic.html.php index aa807e9..3d85da5 100644 --- a/templates/topic.html.php +++ b/templates/topic.html.php @@ -84,15 +84,21 @@ </p> <?php +/* + // @todo: there's no watchlist functionality yet; this blurb is just to position it correctly already + $watchlistActive = false; // @todo: true if already watchlisted, false if not echo Html::element( 'a', array( - 'class' => 'flow-icon-permalink flow-icon flow-icon-top-aligned', - 'title' => wfMessage( 'flow-topic-action-view' )->text(), - 'href' => $this->generateUrl( $topic ), + 'class' => 'flow-icon-watchlist flow-icon flow-icon-top-aligned' + . ( $watchlistActive ? ' flow-icon-watchlist-active' : '' ), + 'title' => wfMessage( 'flow-topic-action-watchlist' )->text(), + 'href' => '#', + 'onclick' => "alert( '@todo: Not yet implemented!' ); return false;" ), - wfMessage( 'flow-topic-action-view' )->text() + wfMessage( 'flow-topic-action-watchlist' )->text() ); +*/ ?> <ul class="flow-topic-posts-meta"> @@ -103,6 +109,7 @@ <a href="#" class="flow-reply-link" data-topic-id="<?php echo $topic->getId()->getHex() ?>"> <?php // get total number of posts in topic + // @todo: the number of comments should not be a part of the link $comments = $root->getRecursiveResult( $indexDescendantCount ); echo wfMessage( 'flow-topic-comments', $comments )->text(); ?> @@ -111,19 +118,14 @@ </ul> <?php - // @todo: afaik, there's no watchlist functionality yet; this blurb is just to position it correctly already - - $watchlistActive = false; // @todo: true if already watchlisted, false if not echo Html::element( 'a', array( - 'class' => 'flow-icon-watchlist flow-icon flow-icon-bottom-aligned' - . ( $watchlistActive ? ' flow-icon-watchlist-active' : '' ), - 'title' => wfMessage( 'flow-topic-action-watchlist' )->text(), - 'href' => '#', - 'onclick' => "alert( '@todo: Not yet implemented!' ); return false;" + 'class' => 'flow-icon-permalink flow-icon flow-icon-bottom-aligned', + 'title' => wfMessage( 'flow-topic-action-view' )->text(), + 'href' => $this->generateUrl( $topic ), ), - wfMessage( 'flow-topic-action-watchlist' )->text() + wfMessage( 'flow-topic-action-view' )->text() ); ?> </div> @@ -166,6 +168,7 @@ ) ), Html::textarea( $block->getName() . '[topic-reply-content]', '', array( 'placeholder' => wfMessage( 'flow-reply-topic-placeholder', $user->getName(), $title )->text(), + 'title' => wfMessage( 'flow-reply-topic-placeholder', $user->getName(), $title )->text(), 'class' => 'flow-input mw-ui-input flow-topic-reply-content', ) ), Html::openElement( 'div', array( 'class' => 'flow-post-form-controls' ) ), diff --git a/templates/topiclist.html.php b/templates/topiclist.html.php index 2196459..4dd529f 100644 --- a/templates/topiclist.html.php +++ b/templates/topiclist.html.php @@ -14,22 +14,17 @@ echo Html::input( $block->getName() . '[topic]', '', 'text', array( 'placeholder' => wfMessage( 'flow-newtopic-title-placeholder' )->text(), + 'title' => wfMessage( 'flow-newtopic-title-placeholder' )->text(), 'class' => 'flow-newtopic-title mw-ui-input flow-input', ) ); - -// @Todo - Update href to a real link for no-js support -echo Html::element( 'a', array( - 'class' => array( 'flow-new-topic-link', 'flow-icon', 'flow-icon-bottom-aligned' ), - 'href' => '#', - 'title' => wfMessage( 'flow-newtopic-start-placeholder' )->text(), -), wfMessage( 'flow-newtopic-start-placeholder' )->text() ); if ( $block->hasErrors( 'content' ) ) { echo '<p>' . $block->getError( 'content' )->escaped() . '</p>'; } echo Html::textarea( $block->getName() . '[content]', '', array( 'placeholder' => wfMessage( 'flow-newtopic-content-placeholder' )->text(), + 'title' => wfMessage( 'flow-newtopic-content-placeholder' )->text(), 'class' => 'flow-newtopic-step2 flow-newtopic-content flow-input mw-ui-input', 'rows' => '10', ) ); @@ -60,4 +55,4 @@ if ( $page && $page->getPagingLink( 'fwd' ) ) { $linkData = $page->getPagingLink( 'fwd' ); echo $this->getPagingLink( $block, 'fwd', $linkData['offset'], $linkData['limit'] ); -} \ No newline at end of file +} -- To view, visit https://gerrit.wikimedia.org/r/94165 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Ib375e362a36231c572cdfba95401fd6b4c6b4faf Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/Flow Gerrit-Branch: master Gerrit-Owner: Matthias Mullie <[email protected]> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
