diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/config.xml | 6 | ||||
| -rw-r--r-- | src/index.html | 66 | ||||
| -rw-r--r-- | src/index.js | 9 | ||||
| -rw-r--r-- | src/js/app.js | 29 | ||||
| -rw-r--r-- | src/js/sliders.js | 56 | ||||
| -rwxr-xr-x | src/styles/fonts/icomoon.eot | bin | 1412 -> 1976 bytes | |||
| -rwxr-xr-x | src/styles/fonts/icomoon.svg | 9 | ||||
| -rwxr-xr-x | src/styles/fonts/icomoon.ttf | bin | 1248 -> 1812 bytes | |||
| -rwxr-xr-x | src/styles/fonts/icomoon.woff | bin | 1324 -> 1888 bytes | |||
| -rw-r--r-- | src/styles/main.scss | 69 | ||||
| -rwxr-xr-x | src/styles/style.css | 33 |
11 files changed, 103 insertions, 174 deletions
diff --git a/src/config.xml b/src/config.xml index 9a21f67..4e3f71c 100644 --- a/src/config.xml +++ b/src/config.xml @@ -1,9 +1,9 @@ <?xml version="1.0" encoding="UTF-8"?> -<widget xmlns="http://www.w3.org/ns/widgets" id="webapps-mixer" version="0.0.0"> - <name>MIXER</name> +<widget xmlns="http://www.w3.org/ns/widgets" id="webapps-settings" version="0.0.0"> + <name>SETTINGS</name> <icon src="icon.svg"/> <content src="index.html" type="text/html"/> - <description>HTML5 MIXER demo</description> + <description>HTML5 SETTINGS demo</description> <author>Igalia, S.L.</author> <license>APL 2.0</license> <feature name="urn:AGL:widget:required-permission"> diff --git a/src/index.html b/src/index.html index 6b2ed01..9798f94 100644 --- a/src/index.html +++ b/src/index.html @@ -23,26 +23,54 @@ <body> <div class="content"> <h1 class="header"> - Mixer + Settings </h1> - <div id="SliderContainer"></div> - <script id="slider-template" type="x-tmpl-mustache"> - <div class="entry" id="slider-{{id}}" slider-id="{{ id }}" value="{{ value }}"> - <div class="label"> - {{ name }}: <span class="value"> {{ value }}%</span> - </div> - <a href="#" class="button" onclick="window.decrease(this);"> - <span class="icon-volume-decrease"></span> - </a> - <div class="slider"> - <input type="range" min="1" value="{{ value }}" max="100" oninput="window.change(this);"> - <progress value="{{ value }}" max="100"></progress> - </div> - <a href="#" class="button" onclick="window.increase(this);"> - <span class="icon-volume-increase"></span> - </a> - </div> - </script> + <a href="#" class="entry"> + <div class="icon"> + <span class="icon-time"></span> + </div> + <div class="label"> + Date & Time + </div> + </a> + <a href="#" class="entry"> + <div class="icon"> + <span class="icon-bluetooth"></span> + </div> + <div class="label"> + Bluetooth + </div> + <div class="control"> + <span class="icon-toggle_on"></span> + </div> + </a> + <a href="#" class="entry"> + <div class="icon"> + <span class="icon-wifi"></span> + </div> + <div class="label"> + Wifi + </div> + <div class="control"> + <span class="icon-toggle_off"></span> + </div> + </a> + <a href="#" class="entry"> + <div class="icon"> + <span class="icon-ethernet"></span> + </div> + <div class="label"> + Wired + </div> + </a> + <a href="#" class="entry"> + <div class="icon"> + <span class="icon-speed"></span> + </div> + <div class="label"> + Version info + </div> + </a> </div> <div class="log" id="log"> diff --git a/src/index.js b/src/index.js index fa62684..962b5a6 100644 --- a/src/index.js +++ b/src/index.js @@ -16,13 +16,6 @@ /* JS */ import './js/AFB.js'; -import { init } from './js/app'; -import { increase, decrease, change } from './js/sliders'; /* CSS */ -import './styles/app.scss'; - -window.increase = increase; -window.decrease = decrease; -window.change = change; -init();
\ No newline at end of file +import './styles/app.scss';
\ No newline at end of file diff --git a/src/js/app.js b/src/js/app.js deleted file mode 100644 index 773e5b0..0000000 --- a/src/js/app.js +++ /dev/null @@ -1,29 +0,0 @@ -import Mustache from 'mustache'; -import { init as init_sliders } from './sliders'; - -var template; - -function render_sliders(sliders) { - var sliderContainer = document.getElementById('SliderContainer'); - for( var i=0; i<sliders.length; i++) { - var node = Mustache.render(template, sliders[i]); - sliderContainer.innerHTML += node; - } -} - -export function init() { - template = document.getElementById('slider-template').innerHTML; - Mustache.parse(template); - - var sliders = []; - for( var i=0; i<10; i++) { - sliders.push({ - id: i, - name: 'Volume '+i, - value: Math.floor(Math.random()*100) - }); - } - - init_sliders(sliders); - render_sliders(sliders); -}
\ No newline at end of file diff --git a/src/js/sliders.js b/src/js/sliders.js deleted file mode 100644 index 624e8e4..0000000 --- a/src/js/sliders.js +++ /dev/null @@ -1,56 +0,0 @@ -this.sliders = {}; - -function getRootNode(node) { - while(!node.hasAttribute('slider-id') && node.parentNode) { - return getRootNode(node.parentNode); - } - - if( node.hasAttribute('slider-id') ) { - return node; - } else { - return false; - } -} - -function getValue(node) { - node = getRootNode(node); - if( node ) { - return parseInt(node.getAttribute('value')); - } else { - return false; - } -} - -function setValue(node, value) { - node = getRootNode(node); - if( node ){ - value = Math.max(Math.min(value, 100), 0); - node.setAttribute('value', value); - node.getElementsByTagName('progress')[0].value = value; - node.getElementsByTagName('input')[0].value = value; - node.getElementsByClassName('value')[0].innerHTML = value+'%'; - } -} - -function init(sliders) { - console.log(sliders); -} - -function increase(node) { - setValue(node, getValue(node)+5); -} - -function decrease(node) { - setValue(node, getValue(node)-5); -} - -function change(node) { - setValue(node, node.value); -} - -module.exports = { - init: init, - increase: increase, - decrease: decrease, - change: change -}
\ No newline at end of file diff --git a/src/styles/fonts/icomoon.eot b/src/styles/fonts/icomoon.eot Binary files differindex 1de3233..060e952 100755 --- a/src/styles/fonts/icomoon.eot +++ b/src/styles/fonts/icomoon.eot diff --git a/src/styles/fonts/icomoon.svg b/src/styles/fonts/icomoon.svg index c58b9e7..ee686b7 100755 --- a/src/styles/fonts/icomoon.svg +++ b/src/styles/fonts/icomoon.svg @@ -7,6 +7,11 @@ <font-face units-per-em="1024" ascent="960" descent="-64" /> <missing-glyph horiz-adv-x="1024" /> <glyph unicode=" " horiz-adv-x="512" d="" /> -<glyph unicode="" glyph-name="volume-increase" d="M1024 384h-192v-192h-128v192h-192v128h192v192h128v-192h192v-128zM416.006 0c-8.328 0-16.512 3.25-22.634 9.374l-246.626 246.626h-114.746c-17.672 0-32 14.326-32 32v320c0 17.672 14.328 32 32 32h114.746l246.626 246.628c9.154 9.154 22.916 11.89 34.874 6.936 11.958-4.952 19.754-16.622 19.754-29.564v-832c0-12.944-7.796-24.612-19.754-29.564-3.958-1.64-8.118-2.436-12.24-2.436z" /> -<glyph unicode="" glyph-name="volume-decrease" d="M512 512h512v-128h-512v128zM416.006 0c-8.328 0-16.512 3.25-22.634 9.374l-246.626 246.626h-114.746c-17.672 0-32 14.326-32 32v320c0 17.672 14.328 32 32 32h114.746l246.626 246.628c9.154 9.154 22.916 11.89 34.874 6.936 11.958-4.952 19.754-16.622 19.754-29.564v-832c0-12.944-7.796-24.612-19.754-29.564-3.958-1.64-8.118-2.436-12.24-2.436z" /> +<glyph unicode="" glyph-name="time" d="M534 640.667v-224l192-114-32-54-224 136v256h64zM512 84.667q140 0 241 101t101 241-101 241-241 101-241-101-101-241 101-241 241-101zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125z" /> +<glyph unicode="" glyph-name="bluetooth" d="M634 242.667l-80 82v-162zM554 690.667v-162l80 82zM756 610.667l-184-184 184-184-244-242h-42v324l-196-196-60 60 238 238-238 238 60 60 196-196v324h42z" /> +<glyph unicode="" glyph-name="wifi" d="M214 384.667q124 122 299 122t297-122l-84-86q-36 36-99 62t-115 26-115-26-99-62zM384 212.667q54 54 128 54t128-54l-128-128zM42 554.667q196 194 471 194t469-194l-86-86q-160 158-384 158t-384-158z" /> +<glyph unicode="" glyph-name="ethernet" d="M758 704.667l232-278-232-278-66 54 186 224-186 224zM470 384.667v84h84v-84h-84zM726 468.667v-84h-86v84h86zM298 384.667v84h86v-84h-86zM332 650.667l-186-224 186-224-66-54-232 278 232 278z" /> +<glyph unicode="" glyph-name="speed" d="M512 256.667q-34 0-60 25t-26 59q0 36 26 62l362 240-242-362q-24-24-60-24zM870 572.667q28-44 48-112t20-120q0-118-56-212-26-44-74-44h-592q-48 0-74 44-56 94-56 212 0 176 125 301t303 125q52 0 119-20t111-48l-80-52q-72 36-152 36-140 0-241-100t-101-242q0-92 46-170h592q46 78 46 170 0 82-36 154z" /> +<glyph unicode="" glyph-name="toggle_off" d="M298 298.667q52 0 90 38t38 90-38 90-90 38-90-38-38-90 38-90 90-38zM726 640.667q88 0 150-63t62-151-62-151-150-63h-428q-88 0-150 63t-62 151 62 151 150 63h428z" /> +<glyph unicode="" glyph-name="toggle_on" d="M726 298.667q52 0 90 38t38 90-38 90-90 38-90-38-38-90 38-90 90-38zM726 640.667q88 0 150-63t62-151-62-151-150-63h-428q-88 0-150 63t-62 151 62 151 150 63h428z" /> </font></defs></svg>
\ No newline at end of file diff --git a/src/styles/fonts/icomoon.ttf b/src/styles/fonts/icomoon.ttf Binary files differindex 520b0ff..1c80635 100755 --- a/src/styles/fonts/icomoon.ttf +++ b/src/styles/fonts/icomoon.ttf diff --git a/src/styles/fonts/icomoon.woff b/src/styles/fonts/icomoon.woff Binary files differindex d1c4591..035641c 100755 --- a/src/styles/fonts/icomoon.woff +++ b/src/styles/fonts/icomoon.woff diff --git a/src/styles/main.scss b/src/styles/main.scss index 01373eb..22dd899 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -2,45 +2,6 @@ display: none; } -input[type=range] { - -webkit-appearance: none; - width: 100%; - margin: 13.8px 0; - background: transparent; - z-index: 1000; -} - -input[type=range]:focus { - outline: none; -} - -input[type=range]::-webkit-slider-runnable-track { - width: 100%; - height: 8.4px; - cursor: pointer; - background: transparent; -} - -input[type=range]::-webkit-slider-thumb { - height: 64px; - width: 64px; - border-radius: 32px; - background: #FFFFFF; - cursor: pointer; - -webkit-appearance: none; - margin-top: -14px; - z-index: 0; -} - -progress { - -webkit-appearance: none; - height: 16px; - width: 100%; - margin-top: -12px; - z-index: -1000; - display: block; -} - ::-webkit-progress-bar { background: map-get($colors, grey); } @@ -93,7 +54,7 @@ body { display: flex; flex-direction: column; flex-wrap: wrap; - justify-content: space-around; + justify-content: center; height: 100%; .header { @@ -103,25 +64,37 @@ body { .entry { height: 120px; + line-height: 120px; + border-bottom: 1px solid map-get($colors, grey); - .label { - margin: 10px 0; + &:last-child { + border-bottom: none2; } - .button { + .icon { width: 10%; position: relative; float: left; text-align: center; - height: 80px; - line-height: 80px; } - .slider { - width: 78%; + .label { position: relative; float: left; - margin: 0 1%; + text-align: left; + width: 80%; + } + + .control { + width: 10%; + position: relative; + float: left; + text-align: right; + font-size: 5rem; + + .icon-toggle_on { + color: map-get($colors, primary); + } } } } diff --git a/src/styles/style.css b/src/styles/style.css index e86165c..0bd7eb9 100755 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -1,10 +1,10 @@ @font-face { font-family: 'icomoon'; - src: url('fonts/icomoon.eot?41hzv3'); - src: url('fonts/icomoon.eot?41hzv3#iefix') format('embedded-opentype'), - url('fonts/icomoon.ttf?41hzv3') format('truetype'), - url('fonts/icomoon.woff?41hzv3') format('woff'), - url('fonts/icomoon.svg?41hzv3#icomoon') format('svg'); + src: url('fonts/icomoon.eot?h6r2e7'); + src: url('fonts/icomoon.eot?h6r2e7#iefix') format('embedded-opentype'), + url('fonts/icomoon.ttf?h6r2e7') format('truetype'), + url('fonts/icomoon.woff?h6r2e7') format('woff'), + url('fonts/icomoon.svg?h6r2e7#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; @@ -25,9 +25,24 @@ -moz-osx-font-smoothing: grayscale; } -.icon-volume-increase:before { - content: "\ea2b"; +.icon-time:before { + content: "\e900"; } -.icon-volume-decrease:before { - content: "\ea2c"; +.icon-bluetooth:before { + content: "\e901"; +} +.icon-wifi:before { + content: "\e902"; +} +.icon-ethernet:before { + content: "\e903"; +} +.icon-speed:before { + content: "\e904"; +} +.icon-toggle_off:before { + content: "\e905"; +} +.icon-toggle_on:before { + content: "\e906"; } |
