summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorHumberto Alfonso Díaz <humberto.alfonso@asvito.es>2019-09-23 13:29:46 +0200
committerLorenzo Tilve <ltilve@igalia.com>2020-02-04 19:20:13 +0100
commit2de1c21023be0d1518d3d2ac663d00a7c20c8944 (patch)
tree9ba90b9d3114846f949dd630ead35be10fb997fc /src
parentc3a5d63e11e85d617a131160e8af6baed55fbfb6 (diff)
FUNCT Add first draft for settings screen
Diffstat (limited to 'src')
-rw-r--r--src/config.xml6
-rw-r--r--src/index.html66
-rw-r--r--src/index.js9
-rw-r--r--src/js/app.js29
-rw-r--r--src/js/sliders.js56
-rwxr-xr-xsrc/styles/fonts/icomoon.eotbin1412 -> 1976 bytes
-rwxr-xr-xsrc/styles/fonts/icomoon.svg9
-rwxr-xr-xsrc/styles/fonts/icomoon.ttfbin1248 -> 1812 bytes
-rwxr-xr-xsrc/styles/fonts/icomoon.woffbin1324 -> 1888 bytes
-rw-r--r--src/styles/main.scss69
-rwxr-xr-xsrc/styles/style.css33
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
index 1de3233..060e952 100755
--- a/src/styles/fonts/icomoon.eot
+++ b/src/styles/fonts/icomoon.eot
Binary files differ
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="&#x20;" horiz-adv-x="512" d="" />
-<glyph unicode="&#xea2b;" 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="&#xea2c;" 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="&#xe900;" 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="&#xe901;" 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="&#xe902;" 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="&#xe903;" 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="&#xe904;" 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="&#xe905;" 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="&#xe906;" 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
index 520b0ff..1c80635 100755
--- a/src/styles/fonts/icomoon.ttf
+++ b/src/styles/fonts/icomoon.ttf
Binary files differ
diff --git a/src/styles/fonts/icomoon.woff b/src/styles/fonts/icomoon.woff
index d1c4591..035641c 100755
--- a/src/styles/fonts/icomoon.woff
+++ b/src/styles/fonts/icomoon.woff
Binary files differ
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";
}