332 lines
11 KiB
HTML
332 lines
11 KiB
HTML
|
<!--
|
||
|
|
|
||
|
|
This file is part of QtWebKit
|
||
|
|
|
||
|
|
Copyright (c) 2011 Nokia Corporation and/or its subsidiary(-ies).
|
||
|
|
All rights reserved.
|
||
|
|
|
||
|
|
You may use this file under the terms of the BSD license as follows:
|
||
|
|
|
||
|
|
"Redistribution and use in source and binary forms, with or without
|
||
|
|
modification, are permitted provided that the following conditions are
|
||
|
|
met:
|
||
|
|
|
||
|
|
o Redistributions of source code must retain the above copyright
|
||
|
|
notice, this list of conditions and the following disclaimer.
|
||
|
|
|
||
|
|
o Redistributions in binary form must reproduce the above copyright
|
||
|
|
notice, this list of conditions and the following disclaimer in the
|
||
|
|
documentation and/or other materials provided with the distribution.
|
||
|
|
|
||
|
|
o Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
|
||
|
|
the names of its contributors may be used to endorse or promote
|
||
|
|
products derived from this software without specific prior written
|
||
|
|
permission.
|
||
|
|
|
||
|
|
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
|
||
|
|
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
|
||
|
|
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
|
||
|
|
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
|
||
|
|
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
|
||
|
|
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
|
||
|
|
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
|
||
|
|
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
|
||
|
|
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||
|
|
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
||
|
|
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
|
||
|
|
|
||
|
|
-->
|
||
|
|
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>image assets</title>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
img { max-height: 72px; }
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>image assets</h1>
|
||
|
|
|
||
|
|
Notes:
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
|
||
|
|
<li>Some of these may be redundant; feel free to merge
|
||
|
|
|
||
|
|
<li>Feel free to rename files, but give me before & after list of filenames so I can reflect the change
|
||
|
|
|
||
|
|
<li>use neutral grayscale if possible
|
||
|
|
|
||
|
|
<li>use PNG file format if possible
|
||
|
|
|
||
|
|
<li>I plan to cut new set of generic icons
|
||
|
|
(e.g., <a href="anim_skew.htm">HERE</a> to be white text on darkish
|
||
|
|
gray, probably #777777)
|
||
|
|
|
||
|
|
<li>No more need for online/offline indicators (red/green circles) for
|
||
|
|
this draft.
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<table border="1" width="100%">
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<th>FILENAME</th>
|
||
|
|
<th>IMAGE (thumbnail & link)</th>
|
||
|
|
<th>USED ON PAGE</th>
|
||
|
|
<th>DESCRIPTION</th>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>icon_dismiss.png,<br/>icon_dismiss_x22.png</td>
|
||
|
|
<td>
|
||
|
|
<a target="elsewhere" href="img/icon_dismiss.png"><img src="img/icon_dismiss.png"/></a>
|
||
|
|
<a target="elsewhere" href="img/icon_dismiss_x22.png"><img src="img/icon_dismiss_x22.png"/></a>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<a target="elsewhere" href="anim_skew.htm">HERE</a>
|
||
|
|
<a target="elsewhere" href="storage.htm">HERE</a>
|
||
|
|
<a target="elsewhere" href="css3_text-overflow.htm">HERE</a>
|
||
|
|
<a target="elsewhere" href="layout_tbl-keyhole.htm">HERE</a>
|
||
|
|
</td>
|
||
|
|
<td>Dismiss panel or listed item</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>icon_expand-nav.png</td>
|
||
|
|
<td><a target="elsewhere" href="img/icon_expand-nav.png"><img src="img/icon_expand-nav.png"/></a></td>
|
||
|
|
<td><a target="elsewhere" href="anim_accord.htm">HERE</a></td>
|
||
|
|
<td>expand complex set of navigation options</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>icon_nav-up.png</td>
|
||
|
|
<td><a target="elsewhere" href="img/icon_nav-up.png"><img src="img/icon_nav-up.png"/></a></td>
|
||
|
|
<td><a target="elsewhere" href="layout_tbl-keyhole.htm">HERE</a></td>
|
||
|
|
<td>navigate within listings (up arrow also serves as down arrow using rotate transform)</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>icon_drill-up.png,<br/>icon_drill-up_x32.png</td>
|
||
|
|
<td>
|
||
|
|
<a target="elsewhere" href="img/icon_drill-up.png"><img src="img/icon_drill-up.png"/></a>
|
||
|
|
<a target="elsewhere" href="img/icon_drill-up_x32.png"><img src="img/icon_drill-up_x32.png"/></a>
|
||
|
|
</td>
|
||
|
|
<td><a target="elsewhere" href="anim_slide1.htm">HERE</a></td>
|
||
|
|
<td>navigate up one level within sliding drilldown UI</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>icon_drill-down.png,<br/>icon_drill-down_x32.png</td>
|
||
|
|
<td>
|
||
|
|
<a target="elsewhere" href="img/icon_drill-down.png"><img src="img/icon_drill-down.png"/></a>
|
||
|
|
<a target="elsewhere" href="img/icon_drill-down_x32.png"><img src="img/icon_drill-down_x32.png"/></a>
|
||
|
|
</td>
|
||
|
|
<td><a target="elsewhere" href="anim_slide1.htm">HERE</a></td>
|
||
|
|
<td>navigate down one level within sliding drilldown UI</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>icon_scroll-left.png</td>
|
||
|
|
<td><a target="elsewhere" href="img/icon_scroll-left.png"><img src="img/icon_scroll-left.png"/></a></td>
|
||
|
|
<td><a target="elsewhere" href="css3_scroll.htm">HERE</a></td>
|
||
|
|
<td>custom horizontal scroll button</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>icon_scroll-right.png</td>
|
||
|
|
<td><a target="elsewhere" href="img/icon_scroll-right.png"><img src="img/icon_scroll-right.png"/></a></td>
|
||
|
|
<td><a target="elsewhere" href="css3_scroll.htm">HERE</a></td>
|
||
|
|
<td>custom horizontal scroll button</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>icon_head-expanded.png,<br/>icon_head-expanded_x13.png</td>
|
||
|
|
<td>
|
||
|
|
<a target="elsewhere" href="img/icon_head-expanded.png"><img src="img/icon_head-expanded.png"/></a>
|
||
|
|
<a target="elsewhere" href="img/icon_head-expanded_x13.png"><img src="img/icon_head-expanded_x13.png"/></a>
|
||
|
|
</td>
|
||
|
|
<td><a target="elsewhere" href="anim_accord.htm">HERE</a>
|
||
|
|
<a target="elsewhere" href="css3_backgrounds.htm">HERE</a></td>
|
||
|
|
<td>marks accordion heading expanded state</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>icon_head-collapsed.png,<br/>icon_head-collapsed_x13.png</td>
|
||
|
|
<td>
|
||
|
|
<a target="elsewhere" href="img/icon_head-collapsed.png"><img src="img/icon_head-collapsed.png"/></a>
|
||
|
|
<a target="elsewhere" href="img/icon_head-collapsed_x13.png"><img src="img/icon_head-collapsed_x13.png"/></a>
|
||
|
|
</td>
|
||
|
|
<td><a target="elsewhere" href="anim_accord.htm">HERE</a>
|
||
|
|
<a target="elsewhere" href="css3_backgrounds.htm">HERE</a></td>
|
||
|
|
<td>marks accordion heading collapsed state</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>icon_info.png,<br/>icon_info_x24.png</td>
|
||
|
|
<td>
|
||
|
|
<a target="elsewhere" href="img/icon_info.png"><img src="img/icon_info.png"/></a>
|
||
|
|
<a target="elsewhere" href="img/icon_info_x24.png"><img src="img/icon_info_x24.png"/></a>
|
||
|
|
</td>
|
||
|
|
<td><a target="elsewhere" href="storage.htm">HERE</a></td>
|
||
|
|
<td>link to panel specifying user preferences</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>icon_list-all.png,<br/>icon_list-all_circ.png</td>
|
||
|
|
<td>
|
||
|
|
<a target="elsewhere" href="img/icon_list-all.png"><img src="img/icon_list-all.png"/></a>
|
||
|
|
<a target="elsewhere" href="img/icon_list-all_circ.png"><img src="img/icon_list-all_circ.png"/></a>
|
||
|
|
</td>
|
||
|
|
<td><a target="elsewhere" href="anim_skew.htm">HERE</a></td>
|
||
|
|
<td>within UI listing items users can filter by category, this indicates LIST ALL ITEMS</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>gradient.jpg</td>
|
||
|
|
<td><a target="elsewhere" href="img/gradient.jpg"><img src="img/gradient.jpg"/></a></td>
|
||
|
|
<td><a target="elsewhere" href="css3_backgrounds.htm">HERE</a></td>
|
||
|
|
<td>serves as background for expanded accordion heads (demonstrates CSS's >1 background image feature)</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>border-frame.png</td>
|
||
|
|
<td><a target="elsewhere" href="img/border-frame.png"><img src="img/border-frame.png"/></a></td>
|
||
|
|
<td><a target="elsewhere" href="css3_border-img.htm">HERE</a></td>
|
||
|
|
<td>border around chunk of text (got this from Wei Lu's sample; simply demo's this feature)</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>mask.png</td>
|
||
|
|
<td><a target="elsewhere" href="img/mask.png"><img src="img/mask.png"/></a></td>
|
||
|
|
<td><a target="elsewhere" href="css3_mask-img.htm">HERE</a></td>
|
||
|
|
<td>Used as a gradient to mask an image; think I got this one from <a href="http://webkit.org/blog/181/css-masks/">webkit.org</a></td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>icon_check.png,<br/>icon_check_x24green.png</td>
|
||
|
|
<td>
|
||
|
|
<a target="elsewhere" href="img/icon_check.png"><img src="img/icon_check.png"/></a>
|
||
|
|
<a target="elsewhere" href="img/icon_check_x24green.png"><img src="img/icon_check_x24green.png"/></a>
|
||
|
|
</td>
|
||
|
|
<td><a target="elsewhere" href="form_tapper.htm">HERE</a></td>
|
||
|
|
<td>This is not available as a separate file; it's specified within
|
||
|
|
CSS using the "data:" URL scheme. It indicates radio/checkbox
|
||
|
|
selection state within tappable UI; keep green if possible to match
|
||
|
|
border</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<th colspan="4">FILE FORMATS</th>
|
||
|
|
<tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>icon_link-sms.png</td>
|
||
|
|
<td><a target="elsewhere" href="img/icon_link-sms.png"><img src="img/icon_link-sms.png"/></a></td>
|
||
|
|
<td><a target="elsewhere" href="layout_link-fmt.htm">HERE</a></td>
|
||
|
|
<td>provides visual hint marking context of hyperlink, in this case a link to initiate an instant message</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>icon_link-tel.png</td>
|
||
|
|
<td><a target="elsewhere" href="img/icon_link-tel.png"><img src="img/icon_link-tel.png"/></a></td>
|
||
|
|
<td><a target="elsewhere" href="layout_link-fmt.htm">HERE</a></td>
|
||
|
|
<td>...link to make phone call</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>icon_link-xls.png</td>
|
||
|
|
<td><a target="elsewhere" href="img/icon_link-xls.png"><img src="img/icon_link-xls.png"/></a></td>
|
||
|
|
<td><a target="elsewhere" href="layout_link-fmt.htm">HERE</a></td>
|
||
|
|
<td>...link to excel file</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>icon_link-doc.png</td>
|
||
|
|
<td><a target="elsewhere" href="img/icon_link-doc.png"><img src="img/icon_link-doc.png"/></a></td>
|
||
|
|
<td><a target="elsewhere" href="layout_link-fmt.htm">HERE</a></td>
|
||
|
|
<td>...link to MS Word file</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>icon_link-email.png</td>
|
||
|
|
<td><a target="elsewhere" href="img/icon_link-email.png"><img src="img/icon_link-email.png"/></a></td>
|
||
|
|
<td><a target="elsewhere" href="layout_link-fmt.htm">HERE</a></td>
|
||
|
|
<td>...email link</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>icon_link-external.png</td>
|
||
|
|
<td><a target="elsewhere" href="img/icon_link-external.png"><img src="img/icon_link-external.png"/></a></td>
|
||
|
|
<td><a target="elsewhere" href="layout_link-fmt.htm">HERE</a></td>
|
||
|
|
<td>...link to web page external to current site</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>icon_link-pdf.png</td>
|
||
|
|
<td><a target="elsewhere" href="img/icon_link-pdf.png"><img src="img/icon_link-pdf.png"/></a></td>
|
||
|
|
<td><a target="elsewhere" href="layout_link-fmt.htm">HERE</a></td>
|
||
|
|
<td>...loink to PDF file</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>icon_link-ppt.png</td>
|
||
|
|
<td><a target="elsewhere" href="img/icon_link-ppt.png"><img src="img/icon_link-ppt.png"/></a></td>
|
||
|
|
<td><a target="elsewhere" href="layout_link-fmt.htm">HERE</a></td>
|
||
|
|
<td>...link to PowerPoint file</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>icon_link-rss.png</td>
|
||
|
|
<td><a target="elsewhere" href="img/icon_link-rss.png"><img src="img/icon_link-rss.png"/></a></td>
|
||
|
|
<td><a target="elsewhere" href="layout_link-fmt.htm">HERE</a></td>
|
||
|
|
<td>...link to RSS feed</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<th colspan="4">UNUSED</th>
|
||
|
|
<tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>icon_nav-top.png</td>
|
||
|
|
<td><a target="elsewhere" href="img/icon_nav-top.png"><img src="img/icon_nav-top.png"/></a></td>
|
||
|
|
<td></td>
|
||
|
|
<td></td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>icon_nav-start.png</td>
|
||
|
|
<td><a target="elsewhere" href="img/icon_nav-start.png"><img src="img/icon_nav-start.png"/></a></td>
|
||
|
|
<td></td>
|
||
|
|
<td></td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>icon_nav_end.png</td>
|
||
|
|
<td><a target="elsewhere" href="img/icon_nav_end.png"><img src="img/icon_nav_end.png"/></a></td>
|
||
|
|
<td></td>
|
||
|
|
<td></td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>icon_question.png</td>
|
||
|
|
<td><a target="elsewhere" href="img/icon_question.png"><img src="img/icon_question.png"/></a></td>
|
||
|
|
<td></td>
|
||
|
|
<td></td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>icon_trash.png</td>
|
||
|
|
<td><a target="elsewhere" href="img/icon_trash.png"><img src="img/icon_trash.png"/></a></td>
|
||
|
|
<td></td>
|
||
|
|
<td></td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
</table>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|