tazpanel annotate test.cgi @ rev 501

*.cgi: Implement TazPanel title and sub-title; hardware.cgi: fix and improve modules search; index.cgi: complex code using awk was prevented 'make pot' to collect all messages, fix terminal history removing; tazpanel.js: disable buttons when no packages selected (pkgs.cgi: up / search / category lists); network.cgi: complex comment was prevented 'make pot' to collect all messages; powersaving.cgi: starting development; *.po: rebuild; tazpanel.ttf: add messages icons, so remove all the style/png images and change libtazpanel; *.css: title and sub-title, messages icons; test.cgi: add new icons.
author Aleksej Bobylev <al.bobylev@gmail.com>
date Mon Jun 08 04:32:19 2015 +0300 (2015-06-08)
parents b0146d791379
children aaf630cf6a8b
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@437 20 <header><span data-img="info"></span>Buttons with font icons</header>
al@419 21 <!--
al@419 22 --><button data-icon="add" >Add </button><button data-icon="admin" >Admin </button><!--
al@419 23 --><button data-icon="back" >Back </button><button data-icon="battery" >Battery </button><!--
al@419 24 --><button data-icon="brightness" >Brightness </button><button data-icon="cancel" >Cancel </button><!--
al@419 25 --><button data-icon="cd" >CD </button><button data-icon="check" >Check </button><!--
al@419 26 --><button data-icon="clock" >Clock </button><button data-icon="conf" >Conf </button><!--
al@419 27 --><button data-icon="daemons" >Daemons </button><button data-icon="delete" >Delete </button><!--
al@419 28 --><button data-icon="detect" >Detect </button><button data-icon="diff" >Diff </button><!--
al@419 29 --><button data-icon="download" >Download </button><button data-icon="edit" >Edit </button><!--
al@419 30 --><button data-icon="eth" >Eth </button><button data-icon="group" >Group </button><!--
al@419 31 --><button data-icon="grub" >GRUB </button><button data-icon="hdd" >HDD </button><!--
al@419 32 --><button data-icon="help" >Help </button><button data-icon="history" >History </button><!--
al@419 33 --><button data-icon="info" >Info </button><button data-icon="install" >Install </button><!--
al@419 34 --><button data-icon="link" >Link </button><button data-icon="list" >List </button><!--
al@419 35 --><button data-icon="locale" >Locale </button><button data-icon="lock" >Lock </button><!--
al@419 36 --><button data-icon="logs" >Logs </button><button data-icon="loopback">Loopback</button><!--
al@419 37 --><button data-icon="man" >Man </button><button data-icon="modules" >Modules </button><!--
al@419 38 --><button data-icon="off" >Off </button><button data-icon="ok" >OK </button><!--
al@419 39 --><button data-icon="on" >On </button><button data-icon="opt" >Opt </button><!--
al@419 40 --><button data-icon="proc" >Proc </button><button data-icon="refresh" >Refresh </button><!--
al@419 41 --><button data-icon="removable" >Removable </button><button data-icon="remove" >Remove </button><!--
al@419 42 --><button data-icon="repack" >Repack </button><button data-icon="report" >Report </button><!--
al@419 43 --><button data-icon="restart" >Restart </button><button data-icon="run" >Run </button><!--
al@419 44 --><button data-icon="save" >Save </button><button data-icon="scan" >Scan </button><!--
al@419 45 --><button data-icon="settings" >Settings </button><button data-icon="slitaz" >SliTaz </button><!--
al@419 46 --><button data-icon="start" >Start </button><button data-icon="stop" >Stop </button><!--
al@419 47 --><button data-icon="sync" >Sync </button><button data-icon="tags" >Tags </button><!--
al@419 48 --><button data-icon="tag" >Tag </button><button data-icon="tazx" >TazX </button><!--
al@419 49 --><button data-icon="temperature">Temperature</button><button data-icon="terminal">Terminal</button><!--
al@419 50 --><button data-icon="text" >Text </button><button data-icon="unlink" >Unlink </button><!--
al@419 51 --><button data-icon="unlock" >Unlock </button><button data-icon="upgrade" >Upgrade </button><!--
al@419 52 --><button data-icon="user" >User </button><button data-icon="view" >View </button><!--
al@419 53 --><button data-icon="web" >Web </button><button data-icon="wifi" >Wi-Fi </button><!--
al@501 54 --><button data-icon="toggle" >Toggle </button><button data-icon="chlock" >ChLock </button><!--
al@501 55 --><button data-icon="calendar" >Calendar </button><button data-icon="modem" >Modem </button><!--
al@501 56 --><button data-icon="vpn" >VPN </button><button data-icon="display" >Display </button><!--
al@501 57 --><button data-icon="cpu" >CPU </button><button data-icon="display" >Display </button><!--
al@419 58 -->
al@419 59 </section>
al@419 60
al@419 61
al@419 62 <section>
al@437 63 <header><span data-img="link"></span>Links with font icons</header>
al@419 64 <div>
al@419 65 <p>
al@419 66 <a data-icon="add" >Add </a> <a data-icon="admin" >Admin </a> <a data-icon="back" >Back </a>
al@419 67 <a data-icon="battery" >Battery </a> <a data-icon="brightness">Brightness</a> <a data-icon="cancel" >Cancel </a>
al@419 68 <a data-icon="cd" >CD </a> <a data-icon="check" >Check </a> <a data-icon="clock" >Clock </a>
al@419 69 <a data-icon="conf" >Conf </a> <a data-icon="daemons" >Daemons </a> <a data-icon="delete" >Delete </a>
al@419 70 <a data-icon="detect" >Detect </a> <a data-icon="diff" >Diff </a> <a data-icon="download" >Download </a>
al@419 71 <a data-icon="edit" >Edit </a> <a data-icon="eth" >Eth </a> <a data-icon="group" >Group </a>
al@419 72 <a data-icon="grub" >GRUB </a> <a data-icon="hdd" >HDD </a> <a data-icon="help" >Help </a>
al@419 73 <a data-icon="history" >History </a> <a data-icon="info" >Info </a> <a data-icon="install" >Install </a>
al@419 74 <a data-icon="link" >Link </a> <a data-icon="list" >List </a> <a data-icon="locale" >Locale </a>
al@419 75 <a data-icon="lock" >Lock </a> <a data-icon="logs" >Logs </a> <a data-icon="loopback" >Loopback </a>
al@419 76 <a data-icon="man" >Man </a> <a data-icon="modules" >Modules </a> <a data-icon="off" >Off </a>
al@419 77 <a data-icon="ok" >OK </a> <a data-icon="on" >On </a> <a data-icon="opt" >Opt </a>
al@419 78 <a data-icon="proc" >Proc </a> <a data-icon="refresh" >Refresh </a> <a data-icon="removable">Removable</a>
al@419 79 <a data-icon="remove" >Remove </a> <a data-icon="repack" >Repack </a> <a data-icon="report" >Report </a>
al@419 80 <a data-icon="restart" >Restart </a> <a data-icon="run" >Run </a> <a data-icon="save" >Save </a>
al@419 81 <a data-icon="scan" >Scan </a> <a data-icon="settings" >Settings </a> <a data-icon="slitaz" >SliTaz </a>
al@419 82 <a data-icon="start" >Start </a> <a data-icon="stop" >Stop </a> <a data-icon="sync" >Sync </a>
al@419 83 <a data-icon="tags" >Tags </a> <a data-icon="tag" >Tag </a> <a data-icon="tazx" >TazX </a>
al@419 84 <a data-icon="temperature">Temperature</a> <a data-icon="terminal" >Terminal </a> <a data-icon="text" >Text </a>
al@419 85 <a data-icon="unlink" >Unlink </a> <a data-icon="unlock" >Unlock </a> <a data-icon="upgrade" >Upgrade </a>
al@419 86 <a data-icon="user" >User </a> <a data-icon="view" >View </a> <a data-icon="web" >Web </a>
al@419 87 <a data-icon="wifi" >Wi-Fi </a>
al@419 88 </p>
al@419 89 </div>
al@419 90 </section>
al@419 91
al@419 92
al@419 93 <section>
al@437 94 <header><span data-img="view"></span>Links with font icons only (small buttons)</header>
al@419 95 <p>
al@419 96 <a data-img="conf" href="#"></a>Conf <a data-img="help" href="#"></a>Help <a data-img="man" href="#"></a>Man
al@419 97 <a data-img="off" href="#"></a>Off <a data-img="on" href="#"></a>On <a data-img="opt" href="#"></a>Opt
al@419 98 <a data-img="remove" href="#"></a>Remove <a data-img="run" href="#"></a>Run <a data-img="stop" href="#"></a>Stop
al@437 99 <a data-img="web" href="#"></a>Web <a data-img="slitaz" href="#"></a>SliTaz <a data-img="user" href="#"></a>User
al@419 100 </p>
al@419 101 </section>
al@419 102
al@501 103
al@501 104 <section>
al@501 105 <header><span data-img="sechi"></span>Status icons</header>
al@501 106 <div>
al@501 107 <span data-icon="lvl0">lvl0</span> <span data-icon="lvl1">lvl1</span> <span data-icon="lvl2">lvl2</span>
al@501 108 <span data-icon="lvl3">lvl3</span> <span data-icon="lvl4">lvl4, lvl5</span>
al@501 109 <span data-icon="online">online</span> <span data-icon="offline">offline</span>
al@501 110 <span data-icon="sechi">sechi</span> <span data-icon="secmi">secmi</span> <span data-icon="seclo">seclo</span>
al@501 111 <span data-icon="pkg">pkg</span> <span data-icon="pkgi">pkgi</span> <span data-icon="pkgib">pkgib</span>
al@501 112 </div>
al@501 113 <div>
al@501 114 <span data-icon="msg">msg</span> <span data-icon="msgerr">msgerr</span>
al@501 115 <span data-icon="msgwarn">msgwarn</span> <span data-icon="msgup">msgup</span>
al@501 116 <span data-icon="msgtip">msgtip</span>
al@501 117 </div>
al@501 118 </section>
al@501 119
al@501 120
al@501 121 <section>
al@501 122 <header><span data-img="&#xf20a;"></span>Font components</header>
al@501 123 <div>
al@501 124 <span data-icon="&#xf200;">#f200</span> <span data-icon="&#xf201;">#f201</span>
al@501 125 <span data-icon="&#xf202;">#f202</span> <span data-icon="&#xf203;">#f203</span>
al@501 126 <span data-icon="&#xf204;">#f204</span> <span data-icon="&#xf205;">#f205</span>
al@501 127 <span data-icon="&#xf206;">#f206</span> <span data-icon="&#xf207;">#f207</span>
al@501 128 <span data-icon="&#xf208;">#f208</span> <span data-icon="&#xf209;">#f209</span>
al@501 129 <span data-icon="&#xf20a;">#f20a</span> <span data-icon="&#xf20b;">#f20b</span>
al@501 130 <span data-icon="&#xf20c;">#f20c</span> <span data-icon="&#xf20d;">#f20d</span>
al@501 131 </div>
al@501 132 </section>
al@501 133
al@501 134
al@501 135 <section>
al@501 136 <header>Message boxes</header>
al@501 137 $(msg msg "Lorem ipsum dolor sit amet, consectetur adipiscing elit.")
al@501 138 $(msg tip "Fusce volutpat est a euismod malesuada.")
al@501 139 $(msg warn "Aenean elementum augue et nisl sollicitudin, ut pellentesque leo rutrum.")
al@501 140 $(msg err "Etiam nisi elit, fringilla sit amet consectetur quis, efficitur eu ligula.")
al@501 141 $(msg up "Sed pharetra ex ligula, nec commodo erat suscipit eu.")
al@501 142 </section>
al@501 143
al@501 144
al@419 145 <section>
al@437 146 <header><span data-img="check"></span>User input elements</header>
al@419 147 <div><form>
al@419 148 <table>
al@419 149 <tr><td>Text:</td>
al@419 150 <td><input type="text" placeholder="Text"/></td>
al@419 151 </tr>
al@419 152 <tr><td>Password:</td>
al@419 153 <td><input type="password" placeholder="Password"/></td>
al@419 154 </tr>
al@419 155 <tr><td>Button:</td>
al@419 156 <td><input type="button" value="Button" data-icon="ok"/></td>
al@419 157 </tr>
al@419 158 <tr><td>Checkbox:</td>
al@419 159 <td><input type="checkbox" id="chk"/><label for="chk">Check it</label></td>
al@419 160 </tr>
al@419 161 <tr><td>Radio:</td>
al@419 162 <td>
al@419 163 <label><input type="radio" name="rad" id="radio1"/>Option 1</label>
al@419 164 <label><input type="radio" name="rad" id="radio2" checked/>Option 2</label>
al@419 165 <label><input type="radio" name="rad" id="radio3"/>Option 3</label>
al@419 166 </td>
al@419 167 </tr>
al@419 168 <tr><td>File:</td>
al@419 169 <td><input type="file" accept=".txt,.png"/></td>
al@419 170 </tr>
al@419 171 <tr><td>Image:</td>
al@419 172 <td><input type="image" src="/styles/default/images/msg-warn.png"/></td>
al@419 173 </tr>
al@419 174 <tr><td>Reset:</td><td><input type="reset"/></td></tr>
al@419 175 <tr><td>Submit:</td><td><input type="submit"/></td></tr>
al@419 176 <tr><td>Select:</td>
al@419 177 <td><select><option data-icon="user">Option 1<option>Option 2<option>Option 3</select></td>
al@419 178 </tr>
al@419 179 <tr><td colspan="2"><b>HTML 5 inputs:</b></td></tr>
al@419 180 <tr><td>Search:</td><td><input type="search" results="5" autosave="pkgsearch" autocomplete="on"/></td></tr>
al@419 181 <tr><td>Number:</td><td><input type="number" name="n" value="3" min="0" max="10"/></td></tr>
al@419 182 <tr><td>Range:</td><td><input type="range" name="r" value="3" min="0" max="10"/></td></tr>
al@419 183 <tr><td>Color:</td><td><input type="color" name="c"/></td></tr>
al@419 184 <tr><td>Tel:</td><td><input type="tel" name="t"/></td></tr>
al@419 185 <tr><td>URL:</td><td><input type="url" name="u"/></td></tr>
al@419 186 <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 187 <tr><td>Date:</td><td><input type="date" name="d" value="$(date +'%F')"/></td></tr>
al@419 188 <tr><td>Month:</td><td><input type="month" name="m" value="$(date +'%Y-%m')"/></td></tr>
al@419 189 <tr><td>Week:</td><td><input type="week" name="w" value="$(date +'%Y-W%V')"/></td></tr>
al@419 190 <tr><td>Time:</td><td><input type="time" name="ti" value="$(date +'%R')"/></td></tr>
al@419 191 <tr><td>Date &amp; Time:</td><td><input type="datetime" name="dt" value="$(date +'%FT%RZ')"/></td></tr>
al@419 192 <tr><td>Date &amp; Time Local:</td><td><input type="datetime-local" name="dtl" value="$(date +'%FT%R')"/></td></tr>
al@419 193 </table>
al@419 194 </form></div>
al@419 195 </section>
al@419 196 EOT
al@419 197 xhtml_footer
al@419 198 exit 0