r97685 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r97684‎ | r97685 | r97686 >
Date:23:47, 20 September 2011
Author:tparscal
Status:ok (Comments)
Tags:
Comment:
Added initial html and css that UI will be built from.
Modified paths:
  • /trunk/extensions/FeedbackDashboard (added) (history)
  • /trunk/extensions/FeedbackDashboard/modules (added) (history)
  • /trunk/extensions/FeedbackDashboard/modules/images (added) (history)
  • /trunk/extensions/FeedbackDashboard/modules/images/button-gray.png (added) (history)
  • /trunk/extensions/FeedbackDashboard/modules/images/button-white.png (added) (history)
  • /trunk/extensions/FeedbackDashboard/modules/images/emoticon-confused.png (added) (history)
  • /trunk/extensions/FeedbackDashboard/modules/images/emoticon-happy.png (added) (history)
  • /trunk/extensions/FeedbackDashboard/modules/images/emoticon-sad.png (added) (history)
  • /trunk/extensions/FeedbackDashboard/modules/images/filter-confusion.png (added) (history)
  • /trunk/extensions/FeedbackDashboard/modules/images/filter-issues.png (added) (history)
  • /trunk/extensions/FeedbackDashboard/modules/images/filter-praise.png (added) (history)
  • /trunk/extensions/FeedbackDashboard/modules/images/page-more.png (added) (history)
  • /trunk/extensions/FeedbackDashboard/modules/templates (added) (history)
  • /trunk/extensions/FeedbackDashboard/modules/templates/page.css (added) (history)
  • /trunk/extensions/FeedbackDashboard/modules/templates/page.html (added) (history)

Diff [purge]

Index: trunk/extensions/FeedbackDashboard/modules/images/emoticon-happy.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: trunk/extensions/FeedbackDashboard/modules/images/emoticon-happy.png
___________________________________________________________________
Added: svn:mime-type
11 + application/octet-stream
Index: trunk/extensions/FeedbackDashboard/modules/images/page-more.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: trunk/extensions/FeedbackDashboard/modules/images/page-more.png
___________________________________________________________________
Added: svn:mime-type
22 + application/octet-stream
Index: trunk/extensions/FeedbackDashboard/modules/images/filter-issues.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: trunk/extensions/FeedbackDashboard/modules/images/filter-issues.png
___________________________________________________________________
Added: svn:mime-type
33 + application/octet-stream
Index: trunk/extensions/FeedbackDashboard/modules/images/emoticon-confused.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: trunk/extensions/FeedbackDashboard/modules/images/emoticon-confused.png
___________________________________________________________________
Added: svn:mime-type
44 + application/octet-stream
Index: trunk/extensions/FeedbackDashboard/modules/images/emoticon-sad.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: trunk/extensions/FeedbackDashboard/modules/images/emoticon-sad.png
___________________________________________________________________
Added: svn:mime-type
55 + application/octet-stream
Index: trunk/extensions/FeedbackDashboard/modules/images/filter-confusion.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: trunk/extensions/FeedbackDashboard/modules/images/filter-confusion.png
___________________________________________________________________
Added: svn:mime-type
66 + application/octet-stream
Index: trunk/extensions/FeedbackDashboard/modules/images/filter-praise.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: trunk/extensions/FeedbackDashboard/modules/images/filter-praise.png
___________________________________________________________________
Added: svn:mime-type
77 + application/octet-stream
Index: trunk/extensions/FeedbackDashboard/modules/images/button-white.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: trunk/extensions/FeedbackDashboard/modules/images/button-white.png
___________________________________________________________________
Added: svn:mime-type
88 + application/octet-stream
Index: trunk/extensions/FeedbackDashboard/modules/images/button-gray.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: trunk/extensions/FeedbackDashboard/modules/images/button-gray.png
___________________________________________________________________
Added: svn:mime-type
99 + application/octet-stream
Index: trunk/extensions/FeedbackDashboard/modules/templates/page.html
——@@ -0,0 +1,62 @@
 2+<html>
 3+ <head>
 4+ <title>Page Template</title>
 5+ <link rel="stylesheet" href="page.css" />
 6+ </head>
 7+ <body>
 8+ <div id="content">
 9+ <!-- FBD Code -->
 10+ <div id="fbd-filters">
 11+ <form>
 12+ <h3 id="fbd-filters-title">Filters</h3>
 13+ <fieldset id="fbd-filters-types">
 14+ <legend class="fbd-filters-label">Type:</legend>
 15+ <ul>
 16+ <li>
 17+ <input type="checkbox" id="fbd-filters-type-praise">
 18+ <label for="fbd-filters-type-praise" id="fbd-filters-type-praise-label">Praise</label>
 19+ </li>
 20+ <li>
 21+ <input type="checkbox" id="fbd-filters-type-confusion">
 22+ <label for="fbd-filters-type-confusion" id="fbd-filters-type-confusion-label">Confusion</label>
 23+ </li>
 24+ <li>
 25+ <input type="checkbox" id="fbd-filters-type-issues">
 26+ <label for="fbd-filters-type-issues" id="fbd-filters-type-issues-label">Issues</label>
 27+ </li>
 28+ </ul>
 29+ </fieldset>
 30+ <label for="fbd-filters-keyword" class="fbd-filters-label">Keyword</label>
 31+ <input type="text" id="fbd-filters-keyword" class="fbd-filters-input" />
 32+ <label for="fbd-filters-username" class="fbd-filters-label">Username</label>
 33+ <input type="text" id="fbd-filters-username" class="fbd-filters-input" />
 34+ <button type="submit" id="fbd-filters-set">Set filters</button>
 35+ </form>
 36+ <a href="#" id="fbd-about">What is this feature?</a>
 37+ </div>
 38+ <ul id="fbd-list">
 39+ <!-- Repeat for each item -->
 40+ <li class="fbd-item">
 41+ <div class="fbd-item-emoticon fbd-item-emoticon-happy">
 42+ <span class="fbd-item-emoticon-label">Happy</span>
 43+ </div>
 44+ <div class="fbd-item-time">2 minutes ago</div>
 45+ <h3 class="fbd-item-userName">
 46+ <a href="#">Kaldari</a>
 47+ <sup class="fbd-item-userLinks">
 48+ <a href="#">talk</a> - <a href="#">contribs</a> - <a href="#">wikilove</a>
 49+ </sup>
 50+ </h3>
 51+ <div class="fbd-item-message">Lorem ipsum dolor sit amet, consectetur adipisicing edivt, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
 52+ <div class="fbd-item-permalink">(<a href="#">link to this</a>)</div>
 53+ <div style="clear:both"></div>
 54+ </li>
 55+ <!-- /Repeat for each item -->
 56+ </ul>
 57+ <div id="fbd-list-more">
 58+ <a href="#">More</a>
 59+ </div>
 60+ <!-- /FBD Code -->
 61+ </div>
 62+ </body>
 63+</html>
Index: trunk/extensions/FeedbackDashboard/modules/templates/page.css
——@@ -0,0 +1,174 @@
 2+/* MediaWiki-ish stuff */
 3+
 4+body {
 5+ font-size: 1em;
 6+ font-family: sans-serif;
 7+ margin: 0;
 8+ padding: 0;
 9+}
 10+#content {
 11+ font-size: 0.8em;
 12+ line-height: 1.5em;
 13+ margin: 0;
 14+ padding: 1em;
 15+}
 16+a {
 17+ text-decoration: none;
 18+}
 19+
 20+/* Filters */
 21+
 22+#fbd-filters {
 23+ position: absolute;
 24+ width: 12em;
 25+}
 26+
 27+#fbd-filters form {
 28+ margin: 0;
 29+ padding: 1em;
 30+ background-color: #e8f2f8;
 31+}
 32+
 33+#fbd-about {
 34+ display: inline-block;
 35+ font-size: 0.8em;
 36+ margin-top: 0.5em;
 37+}
 38+
 39+#fbd-filters-title {
 40+ font-size: 1.2em;
 41+ margin: 0;
 42+ padding: 0;
 43+ border-bottom: solid 1px black;
 44+}
 45+
 46+#fbd-filters-types {
 47+ margin: 0.5em 0 0 0;
 48+ padding: 0;
 49+ border: none;
 50+}
 51+
 52+.fbd-filters-label {
 53+ display: block;
 54+ margin: 0.5em 0 0 0;
 55+ padding: 0;
 56+ font-weight: bold;
 57+}
 58+
 59+.fbd-filters-input {
 60+ margin: 0.25em 0 0.25em 0.75em;
 61+ width: 10em;
 62+}
 63+
 64+#fbd-filters-types ul {
 65+ margin: 0;
 66+ padding: 0;
 67+ list-style: none;
 68+}
 69+
 70+#fbd-filters-types li {
 71+ margin: 0 0 0 0.75em;
 72+ padding: 0;
 73+ list-style: none;
 74+}
 75+
 76+#fbd-filters-types label {
 77+ padding-left: 18px;
 78+ background-position: left 45%;
 79+ background-repeat: no-repeat;
 80+}
 81+
 82+#fbd-filters-type-praise-label {
 83+ background-image: url(../images/filter-praise.png)
 84+}
 85+
 86+#fbd-filters-type-confusion-label {
 87+ background-image: url(../images/filter-confusion.png)
 88+}
 89+
 90+#fbd-filters-type-issues-label {
 91+ background-image: url(../images/filter-issues.png)
 92+}
 93+
 94+#fbd-filters-set {
 95+ margin: 1em 0 0 0;
 96+}
 97+
 98+/* List */
 99+
 100+#fbd-list {
 101+ margin: 0 0 0 13em;
 102+ padding: 0;
 103+ list-style: none;
 104+}
 105+
 106+#fbd-list-more {
 107+ margin: 1em 0 0 13em;
 108+ padding: 0.5em;
 109+ background-color: #e8f2f8;
 110+ text-align: center;
 111+}
 112+
 113+#fbd-list-more a {
 114+ font-size: 1.4em;
 115+ padding-left: 20px;
 116+ background-image: url(../images/page-more.png);
 117+ background-position: left center;
 118+ background-repeat: no-repeat;
 119+}
 120+
 121+.fbd-item {
 122+ border-bottom: solid 1px silver;
 123+ position: relative;
 124+}
 125+
 126+.fbd-item-emoticon {
 127+ float: left;
 128+ margin-right: 0.5em;
 129+ width: 75px;
 130+ height: 90px;
 131+ background-position: center top;
 132+ background-repeat: no-repeat;
 133+}
 134+
 135+.fbd-item-emoticon-label {
 136+ display: block;
 137+ margin-top: 60px;
 138+ text-align: center;
 139+}
 140+
 141+.fbd-item-emoticon-happy {
 142+ background-image: url(../images/emoticon-happy.png);
 143+}
 144+.fbd-item-emoticon-confused {
 145+ background-image: url(../images/emoticon-confused.png);
 146+}
 147+.fbd-item-emoticon-sad {
 148+ background-image: url(../images/emoticon-sad.png);
 149+}
 150+
 151+.fbd-item-userName {
 152+ font-size: 1.2em;
 153+ margin: 0;
 154+ padding: 0;
 155+}
 156+
 157+.fbd-item-userLinks {
 158+ font-size: 0.5em;
 159+}
 160+
 161+.fbd-item-time {
 162+ font-size: 1.2em;
 163+ float: right;
 164+ font-weight: bold;
 165+}
 166+
 167+.fbd-item-message {
 168+ font-size: 1.4em;
 169+ margin-top: 0.25em;
 170+}
 171+
 172+.fbd-item-permalink {
 173+ float: right;
 174+ font-size: 0.8em;
 175+}

Follow-up revisions

RevisionCommit summaryAuthorDate
r101045Fix mime-typesreedy20:51, 27 October 2011

Comments

#Comment by Jorm (WMF) (talk | contribs)   23:52, 20 September 2011

Krinkle left a comment on the mw.org page about the inclusion of the cut assets on the design document - wondered if they should even be there. Question: did that work well for you, having the assets there? Should they be deleted now?

(This speaks to a larger process problem. Personally, I think that uploading cut assets to the design document is a good idea (along with the psd file), but we should probably NOT upload them to commons, and instead just to mw.org)

#Comment by Trevor Parscal (WMF) (talk | contribs)   00:05, 21 September 2011

1. Since the assets will end up in the SVN eventually anyways, it produces duplication - if you update the svn copy, should you update the wiki too? Probably not ideal. 2. It took me a extra time to grab all the images off the page, then rename them to something sane for use in a web page, then move them to the extension folder - this took more time than I expected.

I think it would be better if you just emailed me a zip file of the sliced images, using the common lowercase hyphenated naming style. Given how bad our upload system is, I imagine you spent a bit more time than you would have preferred as well. Handing off a zip will save developers and designers time.

Also, you uploaded lots of images that were not needed for version 1, and I noticed that the more arrow was not there at all. I just used one of the downward facing 60 degree arrows, but the design called for a 90 degree arrow (maybe this is a design flaw, since it's inconsistent with all other arrows?)

#Comment by 😂 (talk | contribs)   14:25, 21 September 2011

Please fix the svn mimetypes on the png images.

#Comment by Trevor Parscal (WMF) (talk | contribs)   00:18, 16 November 2011

This was resolved in r101045

Status & tagging log