Matthias Mullie has uploaded a new change for review. https://gerrit.wikimedia.org/r/86856
Change subject: [WIP] New design ...................................................................... [WIP] New design https://www.mediawiki.org/wiki/Flow_Portal/Design/Iteration_4 Change-Id: Ibb77ba1321ddaf4269bffa1f5881f679f7ebd9e3 --- M Resources.php M includes/Block/Summary.php A modules/base/images/stub.png M modules/discussion/base.css M modules/discussion/ui.js A modules/summary/summary.css M modules/summary/summary.js M templates/post.html.php M templates/summary.html.php M templates/topic.html.php 10 files changed, 195 insertions(+), 161 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Flow refs/changes/56/86856/1 diff --git a/Resources.php b/Resources.php index 9a37df4..57d9def 100644 --- a/Resources.php +++ b/Resources.php @@ -18,6 +18,7 @@ ), ), 'ext.flow.summary' => $flowResourceTemplate + array( + 'styles' => 'summary/summary.css', 'scripts' => 'summary/summary.js', 'dependencies' => array( 'ext.flow.editor', diff --git a/includes/Block/Summary.php b/includes/Block/Summary.php index 45179f4..c9beaab 100644 --- a/includes/Block/Summary.php +++ b/includes/Block/Summary.php @@ -84,9 +84,8 @@ } public function render( Templating $templating, array $options ) { - if ( $this->action === 'edit-summary' ) { - $templating->getOutput()->addModules( 'ext.flow.summary' ); - } + $templating->getOutput()->addModules( 'ext.flow.summary' ); + $templateName = ( $this->action == 'edit-summary' ) ? 'edit-summary' : 'summary'; $templating->render( "flow:$templateName.html.php", array( 'block' => $this, diff --git a/modules/base/images/stub.png b/modules/base/images/stub.png new file mode 100644 index 0000000..55b64a8 --- /dev/null +++ b/modules/base/images/stub.png Binary files differ diff --git a/modules/discussion/base.css b/modules/discussion/base.css index 0efe88b..0cab132 100644 --- a/modules/discussion/base.css +++ b/modules/discussion/base.css @@ -145,10 +145,6 @@ background-position: center bottom; } -.flow-topic-closed.hasmention .flow-topic-datestamp { - margin-left: -13px; -} - .flow-post-mention-indicator { position: relative; float: left; @@ -230,11 +226,6 @@ margin-top: -20; width:670px; max-width: 670px; -} - -.flow-metabar { - margin-bottom: 5px; - margin-top: 5px; } /* SUMMARY STUFF */ @@ -330,8 +321,12 @@ color: #444444; } .flow-topic-datestamp { - font-size: 10pt; - color: #999999; + position: absolute; + right: 22px; + bottom: 22px; + + font-size: 16px; + color: #AAA; } .flow-datestamp { position: absolute; @@ -347,15 +342,20 @@ .unreadpost .flow-datestamp, .selfpost .flow-datestamp { color: #ffffff; } -.flow-topic-title { - color: #444444; - max-width: 600px; - overflow: wrap; - cursor: pointer; +.flow-titlebar { + padding: 22px; + margin: 0; + background-color: #EDEDED; + position: relative; } -.flow-topic-title, .flow-topic-title a, .ownerboard { +.flow-titlebar p { + margin: 0; +} +.flow-topic-title { font-weight: bold; - font-size: 13pt; + font-size: 24px; + line-height: 30px; + color: #231F20; } .lockedtopic .flow-topic-title { @@ -364,6 +364,9 @@ background-repeat: no-repeat; background-position: left center; padding-left: 25px; + + /* preserve space on the right, for .flow-topic-actions */ + margin-right: 30px; } .lockedtopic .flow-topic-title:hover { /* @embed */ @@ -372,6 +375,12 @@ .boardnotice { color: #318c6d; padding-right: 5px; +} + +.flow-topic-posts-meta { + font-size: 16px; + line-height: 28px; + color: #808184; } /* POST STUFF */ @@ -397,7 +406,6 @@ padding-left: 10px; padding-top: 10px; padding-bottom: 10px; - background-color: #efefef; } .unreadpost .flow-post-title { background-color: #318c6d; @@ -693,87 +701,55 @@ } /* Action boxes */ -.flow-actionbox-pokey, .flow-actionbox-pokey { - /* @embed */ - background-image: url('images/PokeyNorth.png'); - background-repeat: no-repeat; - width: 21px; - height: 11px; - position: absolute; - z-index: 61000; - top: 20px; - right: 10px; - display:none; -} - -.flow-topic-actionbox, .flow-post-actionbox { - position: absolute; - top: 30px; - right: 0; - border: 1px solid silver; - background-color: #ffffff; - min-height: 2em; - width:auto; - min-width: 100px; - white-space: nowrap; - color: #6D6D6D; - z-index: 60000; - padding: 10px; - box-shadow: 0px 3px 8px rgba(50, 50, 50, 0.35); - display: none; - font-size: 8pt !important; -} - .flow-topic-actions, .flow-post-actions { + /* Hide until .flow-topic-actions-link or .flow-post-actions-link clicked */ + display: none; + + z-index: 60000; + + position: absolute; + top: 44px; + right: 0; + + background-color: #FFF; + border: 1px solid #E1E1E1; + box-shadow: 0px 3px 8px rgba(50, 50, 50, 0.35); + color: #808184; + font-size: 12px; + + padding: 6px; +} + +.flow-topic-actions a, .flow-post-actions a { + color: #808184; +} + +.flow-topic-actions ul, .flow-post-actions ul { + list-style: none; + margin: 0; +} + +.flow-topic-actions-link, .flow-post-actions-link { /* @embed */ - background-image: url('images/micro_chevron_down_999999.png'); + background-image: url('images/chevron_down.png'); /* @todo: chevron color (AAA, probably) */ background-repeat: no-repeat; background-position: right center; padding-right: 12px; } -.flow-topic-actions:hover, .flow-post-actions:hover { - /* @embed */ - background-image: url('images/micro_chevron_down_blue.png'); -} -.flow-topic-actions { +.flow-topic-actions-link { position: absolute; - right: 5px; - font-size: 10pt; - color: #999999; -} + right: 22px; + top: 22px; -.flow-post-actions { - font-size: 10pt; - color: #999999; -} - -.flow-post-actions a, .flow-topic-actions a { - color: #999999 !important; - cursor: pointer; + width: 20px; + height: 20px; + text-indent: -9999px; } .flow-topic-actions:hover, .flow-post-actions:hover { color: #0645ac; - text-decoration:none !important; -} - -.flow-topic-actionbox a, .flow-post-actionbox a { - font-size: 8pt !important; -} - -.flow-topic-actionbox :hover, .flow-post-actionbox :hover { - text-decoration:none !important; -} - -.flow-topic-actionbox ul, .flow-post-actionbox ul { - margin: 0px; - list-style: none; - font-size: 8pt; -} - -.flow-post-actionbox { - text-align: left; + text-decoration: none !important; } .flow-newtopic-start { diff --git a/modules/discussion/ui.js b/modules/discussion/ui.js index b67672d..720cc07 100644 --- a/modules/discussion/ui.js +++ b/modules/discussion/ui.js @@ -3,15 +3,16 @@ var $container = $( e.target ); // Set up menus - $container.find( '.flow-post-actions, .flow-topic-actions' ) - .click( function () { - $( this ).children( '.flow-post-actionbox, .flow-topic-actionbox, .flow-actionbox-pokey' ) + $container.find( '.flow-post-actions-link, .flow-topic-actions-link' ) + .click( function ( e ) { + e.preventDefault(); + + $( this ).next( '.flow-post-actions, .flow-topic-actions' ) .show(); } ) .find( 'li' ) .click( function () { $( this ).closest( '.flow-topic-actions, .flow-post-actions' ) - .children( '.flow-post-actionbox, .flow-topic-actionbox, .flow-actionbox-pokey' ) .fadeOut(); } ); @@ -134,11 +135,16 @@ $( 'body' ) .click( function ( e ) { - if ( $( e.target ) - .closest( '.flow-post-actions, .flow-topic-actions' ) - .length === 0 + if ( + // clicked link to open actions + !$( e.target ).hasClass( 'flow-post-actions-link' ) && + !$( e.target ).hasClass( 'flow-topic-actions-link' ) && + // clicked inside actions box + $( e.target ) + .closest( '.flow-post-actions, .flow-topic-actions' ) + .length === 0 ) { - $( '.flow-post-actionbox, .flow-topic-actionbox, .flow-actionbox-pokey' ) + $( '.flow-post-actions, .flow-topic-actions' ) .fadeOut( 'fast' ); } } ); diff --git a/modules/summary/summary.css b/modules/summary/summary.css new file mode 100644 index 0000000..e2a3564 --- /dev/null +++ b/modules/summary/summary.css @@ -0,0 +1,31 @@ +#flow-summary { + position: relative; + margin-bottom: 34px; +} + +#flow-summary-content { + font-weight: bold; + font-size: 16px; + line-height: 25px; + color: #58595B; + + /* preserve space on the right, for a.flow-summary-edit-link */ + margin-right: 50px; +} + +a.flow-summary-edit-link { + display: block; + width: 20px; + height: 20px; + text-indent: -9999px; + + position: absolute; + right: 0; + bottom: 0; + + /* @embed */ + background-image: url( '../base/images/stub.png' ); /* @todo: real asset */ + background-position: right; + background-size: 20px auto; + background-repeat: no-repeat; +} diff --git a/modules/summary/summary.js b/modules/summary/summary.js index 4588c42..d873973 100644 --- a/modules/summary/summary.js +++ b/modules/summary/summary.js @@ -5,17 +5,20 @@ var $form = $( '.flow-summary-form' ), $textarea = $form.find( 'textarea' ); - // convert text-area into editor - mw.flow.editor.load( $textarea, $textarea.data( 'summary-id' ), 'Summary' ); + // edit-form is showing + if ( $form.length > 0 ) { + // convert text-area into editor + mw.flow.editor.load( $textarea, $textarea.data( 'summary-id' ), 'Summary' ); - // when submitting the form, grab the editor's content - $form.submit( function () { - var $textarea = $( this ).find( 'textarea' ), - content = mw.flow.editor.getContent( $textarea ); + // when submitting the form, grab the editor's content + $form.submit( function () { + var $textarea = $( this ).find( 'textarea' ), + content = mw.flow.editor.getContent( $textarea ); - // unload editor & paste content into textarea - mw.flow.editor.destroy( $textarea ); - $textarea.val( content ); - } ); + // unload editor & paste content into textarea + mw.flow.editor.destroy( $textarea ); + $textarea.val( content ); + } ); + } }); } ( jQuery, mediaWiki ) ); diff --git a/templates/post.html.php b/templates/post.html.php index 93b1608..a04b127 100644 --- a/templates/post.html.php +++ b/templates/post.html.php @@ -160,32 +160,30 @@ <?php echo $this->userToolLinks( $post->getCreatorId(), $post->getCreatorName() ); ?> </span> </span> - <span class="flow-datestamp"> + <p class="flow-datestamp"> <span class="flow-agotime" style="display: inline"> <?php echo $post->getPostId()->getHumanTimestamp(); ?> </span> <span class="flow-utctime" style="display: none"> <?php echo $post->getPostId()->getTimestampObj()->getTimestamp( TS_RFC2822 ); ?> </span> - </span> + </p> </div> </div> <div class="flow-post-content"> <?php echo $post->getContent( $user, 'html' ); ?> </div> <div class="flow-post-controls"> + <!-- @todo: these are currently barely visible because of CSS changes for topic-actions, these will need to change too though, don't forget --> + <a class="flow-topic-actions-link" href="#"><?php echo wfMessage( 'flow-post-actions' )->escaped(); ?></a> <div class="flow-post-actions"> - <a><?php echo wfMessage( 'flow-post-actions' )->escaped(); ?></a> - <div class="flow-actionbox-pokey"> </div> - <div class="flow-post-actionbox"> - <ul> - <?php - foreach( $actions as $key => $action ) { - echo '<li class="flow-action-'.$key.'">' . $action . "</li>\n"; - } - ?> - </ul> - </div> + <ul> + <?php + foreach( $actions as $key => $action ) { + echo '<li class="flow-action-'.$key.'">' . $action . "</li>\n"; + } + ?> + </ul> </div> </div> </div> diff --git a/templates/summary.html.php b/templates/summary.html.php index 550a2db..5baeb58 100644 --- a/templates/summary.html.php +++ b/templates/summary.html.php @@ -1,13 +1,33 @@ <?php +echo Html::openElement( + 'div', + array( 'id' => 'flow-summary' ) +); + if ( $block->hasErrors( 'content' ) ) { - echo '<p>' . $block->getError( 'content' )->escaped() . '</p>'; -} -if ( $summary ) { - // contains HTML5+RDFa content - echo $summary->getContent( $user, 'html' ); + echo Html::element( + 'p', + array( 'id' => 'flow-summary-error' ), + $block->getError( 'content' )->text() + ); } -$editLink = $this->generateUrl( $workflow, 'edit-summary' ); -?> -<div class="flow-summary-edit-link"><a href="<?php echo htmlspecialchars( $editLink );?>"><?php echo wfMessage( 'flow-edit-summary-link' )->escaped()?></a></div> +if ( $summary ) { + echo Html::rawElement( + 'div', + array( 'id' => 'flow-summary-content' ), + $summary->getContent( $user, 'html' ) // contains HTML5+RDFa content + ); +} + +echo Html::element( + 'a', + array( + 'href' => $this->generateUrl( $workflow, 'edit-summary' ), + 'class' => 'flow-summary-edit-link', + ), + wfMessage( 'flow-edit-summary-link' )->text() +); + +echo Html::closeElement( 'div' ); diff --git a/templates/topic.html.php b/templates/topic.html.php index 5d8fcdb..288da53 100644 --- a/templates/topic.html.php +++ b/templates/topic.html.php @@ -19,39 +19,39 @@ <?php echo htmlspecialchars( $title ); ?> </div> </div> - <div class="flow-topiccontrols"> - </div> -</div> -<div class="flow-metabar"> + + <a class="flow-topic-actions-link" href="#"><?php echo wfMessage( 'flow-topic-actions' )->escaped(); ?></a> <div class="flow-topic-actions"> - <a><?php echo wfMessage( 'flow-topic-actions' )->escaped() ?></a> - <div class="flow-actionbox-pokey"> </div> - <div class="flow-topic-actionbox"> - <ul> - <li class="flow-action-edit-title"> - <?php - echo Html::rawElement( 'a', - array( - 'href' => $this->generateUrl( $root->getPostId(), 'edit-title' ) - ), - wfMessage( 'flow-topic-action-edit-title' ) - ); - ?> - </li> - <li class="flow-action-topic-history"> - <?php - echo Html::rawElement( 'a', - array( - 'href' => $this->generateUrl( $root->getPostId(), 'topic-history' ) - ), - wfMessage( 'flow-topic-action-history' ) - ); - ?> - </li> - </ul> - </div> + <ul> + <li class="flow-action-edit-title"> + <?php + echo Html::rawElement( 'a', + array( + 'href' => $this->generateUrl( $root->getPostId(), 'edit-title' ) + ), + wfMessage( 'flow-topic-action-edit-title' ) + ); + ?> + </li> + <li class="flow-action-topic-history"> + <?php + echo Html::rawElement( 'a', + array( + 'href' => $this->generateUrl( $root->getPostId(), 'topic-history' ) + ), + wfMessage( 'flow-topic-action-history' ) + ); + ?> + </li> + </ul> </div> - <span class="flow-topic-datestamp"> + + <p class="flow-topic-posts-meta"> + @todo: participants<br /> + @todo: # comments + </p> + + <p class="flow-topic-datestamp"> <span class="flow-agotime" style="display: inline"> <?php echo wfMessage( 'flow-last-modified' )->rawParams( $topic->getLastModifiedObj()->getHumanTimestamp() @@ -63,7 +63,7 @@ echo $ts->getTimestamp( TS_RFC2822 ); ?> </span> - </span> + </p> </div> <?php -- To view, visit https://gerrit.wikimedia.org/r/86856 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Ibb77ba1321ddaf4269bffa1f5881f679f7ebd9e3 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/Flow Gerrit-Branch: master Gerrit-Owner: Matthias Mullie <mmul...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
