tazpanel diff test.cgi @ rev 426

Code cleaning; add icons for packages and "toggle" to tazpanel.ttf; merge checkbox.js with tazpanel.js.
author Aleksej Bobylev <al.bobylev@gmail.com>
date Fri Mar 27 14:28:32 2015 +0200 (2015-03-27)
parents
children b0146d791379
line diff
     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/test.cgi	Fri Mar 27 14:28:32 2015 +0200
     1.3 @@ -0,0 +1,153 @@
     1.4 +#!/bin/sh
     1.5 +#
     1.6 +# test.cgi - Test TazPanel styles.
     1.7 +#
     1.8 +# Copyright (C) 2015 SliTaz GNU/Linux - BSD License
     1.9 +#
    1.10 +
    1.11 +# Common functions from libtazpanel
    1.12 +. lib/libtazpanel
    1.13 +get_config
    1.14 +header
    1.15 +
    1.16 +TITLE='TazPanel - Test'
    1.17 +
    1.18 +xhtml_header
    1.19 +
    1.20 +cat <<EOT
    1.21 +
    1.22 +<section>
    1.23 +	<header data-icon="info">Buttons with font icons</header>
    1.24 +<!--
    1.25 +--><button data-icon="add"        >Add        </button><button data-icon="admin"   >Admin   </button><!--
    1.26 +--><button data-icon="back"       >Back       </button><button data-icon="battery" >Battery </button><!--
    1.27 +--><button data-icon="brightness" >Brightness </button><button data-icon="cancel"  >Cancel  </button><!--
    1.28 +--><button data-icon="cd"         >CD         </button><button data-icon="check"   >Check   </button><!--
    1.29 +--><button data-icon="clock"      >Clock      </button><button data-icon="conf"    >Conf    </button><!--
    1.30 +--><button data-icon="daemons"    >Daemons    </button><button data-icon="delete"  >Delete  </button><!--
    1.31 +--><button data-icon="detect"     >Detect     </button><button data-icon="diff"    >Diff    </button><!--
    1.32 +--><button data-icon="download"   >Download   </button><button data-icon="edit"    >Edit    </button><!--
    1.33 +--><button data-icon="eth"        >Eth        </button><button data-icon="group"   >Group   </button><!--
    1.34 +--><button data-icon="grub"       >GRUB       </button><button data-icon="hdd"     >HDD     </button><!--
    1.35 +--><button data-icon="help"       >Help       </button><button data-icon="history" >History </button><!--
    1.36 +--><button data-icon="info"       >Info       </button><button data-icon="install" >Install </button><!--
    1.37 +--><button data-icon="link"       >Link       </button><button data-icon="list"    >List    </button><!--
    1.38 +--><button data-icon="locale"     >Locale     </button><button data-icon="lock"    >Lock    </button><!--
    1.39 +--><button data-icon="logs"       >Logs       </button><button data-icon="loopback">Loopback</button><!--
    1.40 +--><button data-icon="man"        >Man        </button><button data-icon="modules" >Modules </button><!--
    1.41 +--><button data-icon="off"        >Off        </button><button data-icon="ok"      >OK      </button><!--
    1.42 +--><button data-icon="on"         >On         </button><button data-icon="opt"     >Opt     </button><!--
    1.43 +--><button data-icon="proc"       >Proc       </button><button data-icon="refresh" >Refresh </button><!--
    1.44 +--><button data-icon="removable"  >Removable  </button><button data-icon="remove"  >Remove  </button><!--
    1.45 +--><button data-icon="repack"     >Repack     </button><button data-icon="report"  >Report  </button><!--
    1.46 +--><button data-icon="restart"    >Restart    </button><button data-icon="run"     >Run     </button><!--
    1.47 +--><button data-icon="save"       >Save       </button><button data-icon="scan"    >Scan    </button><!--
    1.48 +--><button data-icon="settings"   >Settings   </button><button data-icon="slitaz"  >SliTaz  </button><!--
    1.49 +--><button data-icon="start"      >Start      </button><button data-icon="stop"    >Stop    </button><!--
    1.50 +--><button data-icon="sync"       >Sync       </button><button data-icon="tags"    >Tags    </button><!--
    1.51 +--><button data-icon="tag"        >Tag        </button><button data-icon="tazx"    >TazX    </button><!--
    1.52 +--><button data-icon="temperature">Temperature</button><button data-icon="terminal">Terminal</button><!--
    1.53 +--><button data-icon="text"       >Text       </button><button data-icon="unlink"  >Unlink  </button><!--
    1.54 +--><button data-icon="unlock"     >Unlock     </button><button data-icon="upgrade" >Upgrade </button><!--
    1.55 +--><button data-icon="user"       >User       </button><button data-icon="view"    >View    </button><!--
    1.56 +--><button data-icon="web"        >Web        </button><button data-icon="wifi"    >Wi-Fi   </button><!--
    1.57 +-->
    1.58 +</section>
    1.59 +
    1.60 +
    1.61 +<section>
    1.62 +	<header data-icon="link">Links with font icons</header>
    1.63 +	<div>
    1.64 +<p>
    1.65 +<a data-icon="add"        >Add        </a> <a data-icon="admin"     >Admin     </a> <a data-icon="back"     >Back     </a>
    1.66 +<a data-icon="battery"    >Battery    </a> <a data-icon="brightness">Brightness</a> <a data-icon="cancel"   >Cancel   </a>
    1.67 +<a data-icon="cd"         >CD         </a> <a data-icon="check"     >Check     </a> <a data-icon="clock"    >Clock    </a>
    1.68 +<a data-icon="conf"       >Conf       </a> <a data-icon="daemons"   >Daemons   </a> <a data-icon="delete"   >Delete   </a>
    1.69 +<a data-icon="detect"     >Detect     </a> <a data-icon="diff"      >Diff      </a> <a data-icon="download" >Download </a>
    1.70 +<a data-icon="edit"       >Edit       </a> <a data-icon="eth"       >Eth       </a> <a data-icon="group"    >Group    </a>
    1.71 +<a data-icon="grub"       >GRUB       </a> <a data-icon="hdd"       >HDD       </a> <a data-icon="help"     >Help     </a>
    1.72 +<a data-icon="history"    >History    </a> <a data-icon="info"      >Info      </a> <a data-icon="install"  >Install  </a>
    1.73 +<a data-icon="link"       >Link       </a> <a data-icon="list"      >List      </a> <a data-icon="locale"   >Locale   </a>
    1.74 +<a data-icon="lock"       >Lock       </a> <a data-icon="logs"      >Logs      </a> <a data-icon="loopback" >Loopback </a>
    1.75 +<a data-icon="man"        >Man        </a> <a data-icon="modules"   >Modules   </a> <a data-icon="off"      >Off      </a>
    1.76 +<a data-icon="ok"         >OK         </a> <a data-icon="on"        >On        </a> <a data-icon="opt"      >Opt      </a>
    1.77 +<a data-icon="proc"       >Proc       </a> <a data-icon="refresh"   >Refresh   </a> <a data-icon="removable">Removable</a>
    1.78 +<a data-icon="remove"     >Remove     </a> <a data-icon="repack"    >Repack    </a> <a data-icon="report"   >Report   </a>
    1.79 +<a data-icon="restart"    >Restart    </a> <a data-icon="run"       >Run       </a> <a data-icon="save"     >Save     </a>
    1.80 +<a data-icon="scan"       >Scan       </a> <a data-icon="settings"  >Settings  </a> <a data-icon="slitaz"   >SliTaz   </a>
    1.81 +<a data-icon="start"      >Start      </a> <a data-icon="stop"      >Stop      </a> <a data-icon="sync"     >Sync     </a>
    1.82 +<a data-icon="tags"       >Tags       </a> <a data-icon="tag"       >Tag       </a> <a data-icon="tazx"     >TazX     </a>
    1.83 +<a data-icon="temperature">Temperature</a> <a data-icon="terminal"  >Terminal  </a> <a data-icon="text"     >Text     </a>
    1.84 +<a data-icon="unlink"     >Unlink     </a> <a data-icon="unlock"    >Unlock    </a> <a data-icon="upgrade"  >Upgrade  </a>
    1.85 +<a data-icon="user"       >User       </a> <a data-icon="view"      >View      </a> <a data-icon="web"      >Web      </a>
    1.86 +<a data-icon="wifi"       >Wi-Fi      </a>
    1.87 +</p>
    1.88 +	</div>
    1.89 +</section>
    1.90 +
    1.91 +
    1.92 +<section>
    1.93 +	<header data-icon="view">Links with font icons only (small buttons)</header>
    1.94 +	<p>
    1.95 +<a data-img="conf"   href="#"></a>Conf   <a data-img="help" href="#"></a>Help <a data-img="man"  href="#"></a>Man
    1.96 +<a data-img="off"    href="#"></a>Off    <a data-img="on"   href="#"></a>On   <a data-img="opt"  href="#"></a>Opt
    1.97 +<a data-img="remove" href="#"></a>Remove <a data-img="run"  href="#"></a>Run  <a data-img="stop" href="#"></a>Stop
    1.98 +<a data-img="web"    href="#"></a>Web
    1.99 +</p>
   1.100 +</section>
   1.101 +
   1.102 +<section>
   1.103 +	<header data-icon="check">User input elements</header>
   1.104 +	<div><form>
   1.105 +	<table>
   1.106 +		<tr><td>Text:</td>
   1.107 +			<td><input type="text" placeholder="Text"/></td>
   1.108 +		</tr>
   1.109 +		<tr><td>Password:</td>
   1.110 +			<td><input type="password" placeholder="Password"/></td>
   1.111 +		</tr>
   1.112 +		<tr><td>Button:</td>
   1.113 +			<td><input type="button" value="Button" data-icon="ok"/></td>
   1.114 +		</tr>
   1.115 +		<tr><td>Checkbox:</td>
   1.116 +			<td><input type="checkbox" id="chk"/><label for="chk">Check it</label></td>
   1.117 +		</tr>
   1.118 +		<tr><td>Radio:</td>
   1.119 +			<td>
   1.120 +				<label><input type="radio" name="rad" id="radio1"/>Option 1</label>
   1.121 +				<label><input type="radio" name="rad" id="radio2" checked/>Option 2</label>
   1.122 +				<label><input type="radio" name="rad" id="radio3"/>Option 3</label>
   1.123 +			</td>
   1.124 +		</tr>
   1.125 +		<tr><td>File:</td>
   1.126 +			<td><input type="file" accept=".txt,.png"/></td>
   1.127 +		</tr>
   1.128 +		<tr><td>Image:</td>
   1.129 +			<td><input type="image" src="/styles/default/images/msg-warn.png"/></td>
   1.130 +		</tr>
   1.131 +		<tr><td>Reset:</td><td><input type="reset"/></td></tr>
   1.132 +		<tr><td>Submit:</td><td><input type="submit"/></td></tr>
   1.133 +		<tr><td>Select:</td>
   1.134 +			<td><select><option data-icon="user">Option 1<option>Option 2<option>Option 3</select></td>
   1.135 +		</tr>
   1.136 +		<tr><td colspan="2"><b>HTML 5 inputs:</b></td></tr>
   1.137 +		<tr><td>Search:</td><td><input type="search" results="5" autosave="pkgsearch" autocomplete="on"/></td></tr>
   1.138 +		<tr><td>Number:</td><td><input type="number" name="n" value="3" min="0" max="10"/></td></tr>
   1.139 +		<tr><td>Range:</td><td><input type="range" name="r" value="3" min="0" max="10"/></td></tr>
   1.140 +		<tr><td>Color:</td><td><input type="color" name="c"/></td></tr>
   1.141 +		<tr><td>Tel:</td><td><input type="tel" name="t"/></td></tr>
   1.142 +		<tr><td>URL:</td><td><input type="url" name="u"/></td></tr>
   1.143 +		<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>
   1.144 +		<tr><td>Date:</td><td><input type="date" name="d" value="$(date +'%F')"/></td></tr>
   1.145 +		<tr><td>Month:</td><td><input type="month" name="m" value="$(date +'%Y-%m')"/></td></tr>
   1.146 +		<tr><td>Week:</td><td><input type="week" name="w" value="$(date +'%Y-W%V')"/></td></tr>
   1.147 +		<tr><td>Time:</td><td><input type="time" name="ti" value="$(date +'%R')"/></td></tr>
   1.148 +		<tr><td>Date &amp; Time:</td><td><input type="datetime" name="dt" value="$(date +'%FT%RZ')"/></td></tr>
   1.149 +		<tr><td>Date &amp; Time Local:</td><td><input type="datetime-local" name="dtl" value="$(date +'%FT%R')"/></td></tr>
   1.150 +	</table>
   1.151 +	</form></div>
   1.152 +</section>
   1.153 +
   1.154 +EOT
   1.155 +xhtml_footer
   1.156 +exit 0