Wiki source code of Standard Icon Classes
Last modified by Lucas Charpentier on 2024/01/16 12:06
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | Icon Types: | ||
| 2 | |||
| 3 | * A. [[Clickable icons>>xwiki:Documentation.DevGuide.StandardIconClasses||anchor="clickableIcons"]] | ||
| 4 | ** standalone icons, independent of surrounding text, clickable, link/action associated per icon | ||
| 5 | * B. [[Decorative icons>>xwiki:Documentation.DevGuide.StandardIconClasses||anchor="decorativeIcons"]] | ||
| 6 | ** text accompanied by background images, non individual clickable, link/action associated per whole text+icon | ||
| 7 | |||
| 8 | = (% id="clickableIcons" %)A. //Type//: Clickable icons(%%) = | ||
| 9 | |||
| 10 | * There are several ways to have standalone clickable icons, by using links or form inputs; and by placing a direct image or using it as a background-image | ||
| 11 | ** using ##<a href=''/>## links | ||
| 12 | *** using ##<... class=''/>## + ##.css## or ##ssx## | ||
| 13 | *** using ##<img src=''/>## | ||
| 14 | ** using ##<input />## form actions | ||
| 15 | *** using ##<input class=''/>## + ##.css## or ##ssx## | ||
| 16 | *** using ##<input type='image' src=''/>## | ||
| 17 | * //Note//: if the icon is on the same row as the text, there might be some problems with the text/icon alignment. Depending on the markup used for the icon there are several manual solutions (float, fixed heights, vertical-aligment, etc.). You can use the standard ##.icon## class to assure the alignment | ||
| 18 | * //Note//: although in the CSS-capable browsers clickable actions will be displayed just as icons, please don't forget to add ##title##, ##alt## attributes, or use a .sr-only workaround to describe the functionality, according to our [[HTML codestyle>>doc:dev:Community.CodeStyle.XhtmlCssCodeStyle.WebHome]]. This is also useful when the icons are missing (older text browsers). | ||
| 19 | |||
| 20 | == (% id="iconClass" %) A1. //Standard//: ##.icon## class(%%) == | ||
| 21 | |||
| 22 | {{warning style="background-color: #C2D1F0"}} | ||
| 23 | Standard: ##.icon## | ||
| 24 | {{/warning}} | ||
| 25 | |||
| 26 | * Styles added by [[this commit>>https://github.com/xwiki/xwiki-platform/commit/0c05d5a7b7bed298fd04da9059359517556052d3]] | ||
| 27 | * Class used in conjunction with ##<img/>## tag | ||
| 28 | |||
| 29 | ===== Example ===== | ||
| 30 | |||
| 31 | [[image:iconA1.png]] | ||
| 32 | |||
| 33 | ===== HTML ===== | ||
| 34 | |||
| 35 | {{code language="html"}} | ||
| 36 | <a href="..."> | ||
| 37 | <img class="icon" title="RSS feed for wiki updates" alt="(RSS)" src="$xwiki.getSkinFile('icons/xwiki/rss-medium.png')"/> | ||
| 38 | </a> | ||
| 39 | {{/code}} | ||
| 40 | |||
| 41 | ===== CSS ===== | ||
| 42 | |||
| 43 | {{code language="css"}} | ||
| 44 | .icon { | ||
| 45 | vertical-align: middle; | ||
| 46 | } | ||
| 47 | {{/code}} | ||
| 48 | |||
| 49 | == (% id="iconButtonClass" %) A2. //Standard//: ##input.icon-button## + ##.add-button##, ##.remove-button##, ##.accept-button##, ##.search-button## classes(%%) == | ||
| 50 | |||
| 51 | {{warning style="background-color: #C2D1F0"}} | ||
| 52 | Standard: ##input.icon-button## | ||
| 53 | Types: ##.add-button##, ##.remove-button##, ##.accept-button##, ##.search-button## | ||
| 54 | {{/warning}} | ||
| 55 | |||
| 56 | * Styles added by [[XWIKI-7463>>https://jira.xwiki.org/browse/XWIKI-7463]] | ||
| 57 | * Classes used in conjunction with ##input## buttons | ||
| 58 | |||
| 59 | ===== Example ===== | ||
| 60 | |||
| 61 | [[image:iconA2.png]] | ||
| 62 | |||
| 63 | ===== HTML ===== | ||
| 64 | |||
| 65 | {{code language="html"}} | ||
| 66 | <input type="button" class="icon-button remove-button" value="Delete" title="Delete this file" /> | ||
| 67 | {{/code}} | ||
| 68 | |||
| 69 | ===== CSS ===== | ||
| 70 | |||
| 71 | {{code language="css"}} | ||
| 72 | input.icon-button { | ||
| 73 | background: transparent none center center no-repeat; | ||
| 74 | border: 0 none; | ||
| 75 | font-size: 80%; | ||
| 76 | height: 16px; | ||
| 77 | margin: 0; | ||
| 78 | padding: 0; | ||
| 79 | text-indent: -9999px; | ||
| 80 | width: 16px; | ||
| 81 | } | ||
| 82 | |||
| 83 | .icon-button.add-button { | ||
| 84 | background-image: url('$xwiki.getSkinFile(icons/silk/add.png)); | ||
| 85 | } | ||
| 86 | |||
| 87 | .icon-button.remove-button { | ||
| 88 | background-image: url('$xwiki.getSkinFile(icons/silk/cross.png)); | ||
| 89 | } | ||
| 90 | |||
| 91 | .icon-button.accept-button { | ||
| 92 | background-image: url('$xwiki.getSkinFile(icons/silk/accept.png)); | ||
| 93 | } | ||
| 94 | |||
| 95 | .icon-button.search-button { | ||
| 96 | background-image: url('$xwiki.getSkinFile(icons/xwiki/search.png)); | ||
| 97 | } | ||
| 98 | {{/code}} | ||
| 99 | |||
| 100 | = (% id="decorativeIcons" %)B. //Type//: Decorative icons(%%) = | ||
| 101 | |||
| 102 | * Decorative icons are implemented using background-images that accompany text elements, they are non-individual clickable and together with the text element have a single link/action associated | ||
| 103 | |||
| 104 | == (% id="hasIconClass" %) B1. //Standard//: ##.hasIcon## class(%%) == | ||
| 105 | |||
| 106 | {{warning style="background-color: #C2D1F0"}} | ||
| 107 | Standard: ##.hasIcon## | ||
| 108 | Types: ##.iconRSS## | ||
| 109 | {{/warning}} | ||
| 110 | |||
| 111 | * Styles added by [[this commit>>https://github.com/xwiki/xwiki-platform/commit/150baea0f8ae36a5f3eac301cf74700a3478cbdc]] | ||
| 112 | * Classes used when background-images are needed and a single action/link is available | ||
| 113 | |||
| 114 | ===== Example ===== | ||
| 115 | |||
| 116 | [[image:iconB1.png]] | ||
| 117 | |||
| 118 | ===== HTML ===== | ||
| 119 | |||
| 120 | {{code language="html"}} | ||
| 121 | <a href="..." class="hasIcon iconRSS">RSS feed for search on [xwiki]</a> | ||
| 122 | {{/code}} | ||
| 123 | |||
| 124 | ===== CSS ===== | ||
| 125 | |||
| 126 | {{code language="css"}} | ||
| 127 | .hasIcon { | ||
| 128 | background: none no-repeat scroll 0 0 transparent; | ||
| 129 | padding-left: 20px; | ||
| 130 | } | ||
| 131 | |||
| 132 | .iconRSS { | ||
| 133 | background-image: url("$xwiki.getSkinFile('icons/silk/feed.png')"); | ||
| 134 | } | ||
| 135 | {{/code}} | ||
| 136 | |||
| 137 | == B1.1. //Custom case//: Action Menus == | ||
| 138 | |||
| 139 | {{warning}} | ||
| 140 | Standard: ##.hasIcon## | ||
| 141 | Custom: ##.actionmenu .hasIcon## | ||
| 142 | Custom: ##.actionmenu## (##.tmCreate##, ##.tmWiki##, ##.tmSpace##, ##.tmPage##, ##.tmEdit##, etc.) (36 classes) | ||
| 143 | {{/warning}} | ||
| 144 | |||
| 145 | * //Note//: Action menus code was written before the creation of the more generic ##.hasIcon## class. Eventually all the specific actionmenu classes should be rewritten to be more generic | ||
| 146 | * Styles added by [[XSCOLIBRI-146>>https://jira.xwiki.org/browse/XSCOLIBRI-146]] | ||
| 147 | |||
| 148 | ===== Example ===== | ||
| 149 | |||
| 150 | [[image:iconB11.png]] | ||
| 151 | |||
| 152 | ===== HTML ===== | ||
| 153 | |||
| 154 | {{code language="html"}} | ||
| 155 | <div class="actionmenu"> | ||
| 156 | <div class="hasIcon tmWiki"><a href="." class="tme">Wiki</a> ... </div> | ||
| 157 | </div> | ||
| 158 | {{/code}} | ||
| 159 | |||
| 160 | ===== CSS ===== | ||
| 161 | |||
| 162 | {{code language="css"}} | ||
| 163 | /* Menu overrides standard .hasIcon class with custom styles */ | ||
| 164 | .actionmenu .hasIcon { | ||
| 165 | background: none no-repeat scroll 0 3px transparent; | ||
| 166 | padding: 0; | ||
| 167 | } | ||
| 168 | .actionmenu .hasIcon a.tme { | ||
| 169 | padding-left: 20px; | ||
| 170 | } | ||
| 171 | ... | ||
| 172 | .actionmenu .tmWiki { | ||
| 173 | background-image: url("$xwiki.getSkinFile('icons/silk/world.png')"); | ||
| 174 | } | ||
| 175 | ... | ||
| 176 | {{/code}} | ||
| 177 | |||
| 178 | = Other Links = | ||
| 179 | |||
| 180 | * More XWiki icon [[research>>http://incubator.myxwiki.org/xwiki/bin/view/Standards/Icons]] | ||
| 181 | * IconThemes idea [[XWIKI-8501>>https://jira.xwiki.org/browse/XWIKI-8501]] | ||
| 182 | * [[Special CSS Classes>>xwiki:Documentation.DevGuide.FrontendResources.SpecialCSSClasses]] |
