tazpanel annotate test.cgi @ rev 558

Change icons presentation in code - free to use anywhere, simplify icons substitution, minify html, misc
author Aleksej Bobylev <al.bobylev@gmail.com>
date Thu Dec 10 04:11:45 2015 +0200 (2015-12-10)
parents 694b20d6963c
children 26f60e49e3d5
rev   line source
al@419 1 #!/bin/sh
al@419 2 #
al@419 3 # test.cgi - Test TazPanel styles.
al@419 4 #
al@419 5 # Copyright (C) 2015 SliTaz GNU/Linux - BSD License
al@419 6 #
al@419 7
al@419 8 # Common functions from libtazpanel
al@419 9 . lib/libtazpanel
al@419 10 get_config
al@419 11 header
al@419 12
al@501 13 TITLE='Test'
al@419 14
al@501 15 xhtml_header 'Show icons and styles'
al@419 16
al@419 17 cat <<EOT
al@419 18
al@419 19 <section>
al@558 20 <header><span data-img="@info@"></span>Buttons with font icons</header>
al@558 21 EOT
al@558 22
al@558 23 icons="@add@:add @admin@:admin @back@:back @battery@:battery @brightness@:brightness \
al@558 24 @cancel@:cancel @cd@:cd @check@:check @clock@:clock @conf@:conf @daemons@:daemons @delete@:delete \
al@558 25 @detect@:detect @diff@:diff @download@:download @edit@:edit @eth@:eth @group@:group @grub@:grub \
al@558 26 @hdd@:hdd @help@:help @history@:history @info@:info @install@:install @link@:link @list@:list \
al@558 27 @locale@:locale @lock@:lock @logs@:logs @loopback@:loopback @man@:man @modules@:modules @off@:off \
al@558 28 @ok@:ok @on@:on @opt@:opt @proc@:proc @refresh@:refresh @removable@:removable @remove@:remove \
al@558 29 @repack@:repack @report@:report @restart@:restart @run@:run @save@:save @scan@:scan \
al@558 30 @settings@:settings @slitaz@:slitaz @start@:start @stop@:stop @sync@:sync @tags@:tags @tag@:tag \
al@558 31 @tazx@:tazx @temperature@:temperature @terminal@:terminal @text@:text @unlink@:unlink \
al@558 32 @unlock@:unlock @upgrade@:upgrade @user@:user @view@:view @web@:web @wifi@:wifi @toggle@:toggle \
al@558 33 @chlock@:chlock @calendar@:calendar @modem@:modem @vpn@:vpn @display@:display @cpu@:cpu \
al@558 34 @floppy@:floppy @folder@:folder"
al@558 35
al@558 36 echo "$icons" | \
al@558 37 awk 'BEGIN{RS=" "; FS=":"} {
al@558 38 printf "<button data-icon=\"%s\">%s</button>", $1, $2;
al@558 39 }'
al@558 40
al@558 41 cat <<EOT
al@419 42 </section>
al@419 43
al@419 44
al@419 45 <section>
al@558 46 <header><span data-img="@link@"></span>Links with font icons</header>
al@419 47 <div>
al@419 48 <p>
al@558 49 EOT
al@558 50
al@558 51 echo "$icons" | \
al@558 52 awk 'BEGIN{RS=" "; FS=":"} {
al@558 53 printf "<a data-icon=\"%s\" href=\"#\">%s</a> ", $1, $2;
al@558 54 }'
al@558 55
al@558 56 cat <<EOT
al@419 57 </p>
al@419 58 </div>
al@419 59 </section>
al@419 60
al@419 61
al@419 62 <section>
al@558 63 <header><span data-img="@view@"></span>Links with font icons only (small buttons)</header>
al@419 64 <p>
al@558 65 EOT
al@558 66
al@558 67 echo "$icons" | \
al@558 68 awk 'BEGIN{RS=" "; FS=":"} {
al@558 69 printf "<a data-img=\"%s\" href=\"#\"></a>%s ", $1, $2;
al@558 70 }'
al@558 71
al@558 72 cat <<EOT
al@556 73 </p>
al@419 74 </section>
al@419 75
al@501 76
al@501 77 <section>
al@558 78 <header><span data-img="@sechi@"></span>Status icons</header>
al@501 79 <div>
al@558 80 <span data-icon="@lvl0@">lvl0</span> <span data-icon="@lvl1@">lvl1</span> <span data-icon="@lvl2@">lvl2</span>
al@558 81 <span data-icon="@lvl3@">lvl3</span> <span data-icon="@lvl4@">lvl4, lvl5</span>
al@558 82 <span data-icon="@online@">online</span> <span data-icon="@offline@">offline</span>
al@558 83 <span data-icon="@sechi@">sechi</span> <span data-icon="@secmi@">secmi</span> <span data-icon="@seclo@">seclo</span>
al@558 84 <span data-icon="@pkg@">pkg</span> <span data-icon="@pkgi@">pkgi</span> <span data-icon="@pkgib@">pkgib</span>
al@501 85 </div>
al@501 86 <div>
al@558 87 <span data-icon="@msg@">msg</span> <span data-icon="@msgerr@">msgerr</span>
al@558 88 <span data-icon="@msgwarn@">msgwarn</span> <span data-icon="@msgup@">msgup</span>
al@558 89 <span data-icon="@msgtip@">msgtip</span>
al@501 90 </div>
al@501 91 </section>
al@501 92
al@501 93
al@501 94 <section>
al@501 95 <header><span data-img="&#xf20a;"></span>Font components</header>
al@501 96 <div>
al@501 97 <span data-icon="&#xf200;">#f200</span> <span data-icon="&#xf201;">#f201</span>
al@501 98 <span data-icon="&#xf202;">#f202</span> <span data-icon="&#xf203;">#f203</span>
al@501 99 <span data-icon="&#xf204;">#f204</span> <span data-icon="&#xf205;">#f205</span>
al@501 100 <span data-icon="&#xf206;">#f206</span> <span data-icon="&#xf207;">#f207</span>
al@501 101 <span data-icon="&#xf208;">#f208</span> <span data-icon="&#xf209;">#f209</span>
al@501 102 <span data-icon="&#xf20a;">#f20a</span> <span data-icon="&#xf20b;">#f20b</span>
al@501 103 <span data-icon="&#xf20c;">#f20c</span> <span data-icon="&#xf20d;">#f20d</span>
al@501 104 </div>
al@501 105 </section>
al@501 106
al@501 107
al@501 108 <section>
al@501 109 <header>Message boxes</header>
al@501 110 $(msg msg "Lorem ipsum dolor sit amet, consectetur adipiscing elit.")
al@501 111 $(msg tip "Fusce volutpat est a euismod malesuada.")
al@501 112 $(msg warn "Aenean elementum augue et nisl sollicitudin, ut pellentesque leo rutrum.")
al@501 113 $(msg err "Etiam nisi elit, fringilla sit amet consectetur quis, efficitur eu ligula.")
al@501 114 $(msg up "Sed pharetra ex ligula, nec commodo erat suscipit eu.")
al@501 115 </section>
al@501 116
al@501 117
al@419 118 <section>
al@558 119 <header><span data-img="@check@"></span>User input elements</header>
al@419 120 <div><form>
al@419 121 <table>
al@419 122 <tr><td>Text:</td>
al@419 123 <td><input type="text" placeholder="Text"/></td>
al@419 124 </tr>
al@419 125 <tr><td>Password:</td>
al@419 126 <td><input type="password" placeholder="Password"/></td>
al@419 127 </tr>
al@419 128 <tr><td>Button:</td>
al@558 129 <td><input type="button" value="Button" data-icon="@ok@"/></td>
al@419 130 </tr>
al@419 131 <tr><td>Checkbox:</td>
al@419 132 <td><input type="checkbox" id="chk"/><label for="chk">Check it</label></td>
al@419 133 </tr>
al@419 134 <tr><td>Radio:</td>
al@419 135 <td>
al@419 136 <label><input type="radio" name="rad" id="radio1"/>Option 1</label>
al@419 137 <label><input type="radio" name="rad" id="radio2" checked/>Option 2</label>
al@419 138 <label><input type="radio" name="rad" id="radio3"/>Option 3</label>
al@419 139 </td>
al@419 140 </tr>
al@419 141 <tr><td>File:</td>
al@419 142 <td><input type="file" accept=".txt,.png"/></td>
al@419 143 </tr>
al@419 144 <tr><td>Image:</td>
al@419 145 <td><input type="image" src="/styles/default/images/msg-warn.png"/></td>
al@419 146 </tr>
al@419 147 <tr><td>Reset:</td><td><input type="reset"/></td></tr>
al@419 148 <tr><td>Submit:</td><td><input type="submit"/></td></tr>
al@419 149 <tr><td>Select:</td>
al@558 150 <td><select><option data-icon="@user@">Option 1<option>Option 2<option>Option 3</select></td>
al@419 151 </tr>
al@419 152 <tr><td colspan="2"><b>HTML 5 inputs:</b></td></tr>
al@419 153 <tr><td>Search:</td><td><input type="search" results="5" autosave="pkgsearch" autocomplete="on"/></td></tr>
al@419 154 <tr><td>Number:</td><td><input type="number" name="n" value="3" min="0" max="10"/></td></tr>
al@419 155 <tr><td>Range:</td><td><input type="range" name="r" value="3" min="0" max="10"/></td></tr>
al@419 156 <tr><td>Color:</td><td><input type="color" name="c"/></td></tr>
al@419 157 <tr><td>Tel:</td><td><input type="tel" name="t"/></td></tr>
al@419 158 <tr><td>URL:</td><td><input type="url" name="u"/></td></tr>
al@419 159 <tr><td>E-mail:</td><td><input type="email" name="e" data-x="A part number is a digit followed by three uppercase letters." required/></td></tr>
al@419 160 <tr><td>Date:</td><td><input type="date" name="d" value="$(date +'%F')"/></td></tr>
al@419 161 <tr><td>Month:</td><td><input type="month" name="m" value="$(date +'%Y-%m')"/></td></tr>
al@419 162 <tr><td>Week:</td><td><input type="week" name="w" value="$(date +'%Y-W%V')"/></td></tr>
al@419 163 <tr><td>Time:</td><td><input type="time" name="ti" value="$(date +'%R')"/></td></tr>
al@419 164 <tr><td>Date &amp; Time:</td><td><input type="datetime" name="dt" value="$(date +'%FT%RZ')"/></td></tr>
al@419 165 <tr><td>Date &amp; Time Local:</td><td><input type="datetime-local" name="dtl" value="$(date +'%FT%R')"/></td></tr>
al@419 166 </table>
al@419 167 </form></div>
al@419 168 </section>
al@419 169 EOT
al@419 170 xhtml_footer
al@419 171 exit 0