haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Android navigation bar

This commit is contained in:
zbettenbuk 2018-02-14 16:19:26 -06:00 committed by Lyubo Marinov
parent c84abd543e
commit 1020a54a33
9 changed files with 277 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
css/_font.scss
View File

@ -42,6 +42,9 @@
.icon-public:before { .icon-public:before {
content: "\e80b"; content: "\e80b";
} }
.icon-restore:before {
content: "\e8b3";
}
.icon-timer:before { .icon-timer:before {
content: "\e425"; content: "\e425";
} }

BIN
fonts/jitsi.eot
View File

Binary file not shown.

1
fonts/jitsi.svg
View File

@ -23,6 +23,7 @@
<glyph unicode="&#xe616;" glyph-name="event_note" d="M598 426v-84h-300v84h300zM810 214v468h-596v-468h596zM810 896c46 0 86-40 86-86v-596c0-46-40-86-86-86h-596c-48 0-86 40-86 86v596c0 46 38 86 86 86h42v86h86v-86h340v86h86v-86h42zM726 598v-86h-428v86h428z" /> <glyph unicode="&#xe616;" glyph-name="event_note" d="M598 426v-84h-300v84h300zM810 214v468h-596v-468h596zM810 896c46 0 86-40 86-86v-596c0-46-40-86-86-86h-596c-48 0-86 40-86 86v596c0 46 38 86 86 86h42v86h86v-86h340v86h86v-86h42zM726 598v-86h-428v86h428z" />
<glyph unicode="&#xe61d;" glyph-name="phone-talk" d="M640 512c0 70-58 128-128 128v86c118 0 214-96 214-214h-86zM810 512c0 166-132 298-298 298v86c212 0 384-172 384-384h-86zM854 362c24 0 42-18 42-42v-150c0-24-18-42-42-42-400 0-726 326-726 726 0 24 18 42 42 42h150c24 0 42-18 42-42 0-54 8-104 24-152 4-14 2-32-10-44l-94-94c62-122 162-220 282-282l94 94c12 12 30 14 44 10 48-16 98-24 152-24z" /> <glyph unicode="&#xe61d;" glyph-name="phone-talk" d="M640 512c0 70-58 128-128 128v86c118 0 214-96 214-214h-86zM810 512c0 166-132 298-298 298v86c212 0 384-172 384-384h-86zM854 362c24 0 42-18 42-42v-150c0-24-18-42-42-42-400 0-726 326-726 726 0 24 18 42 42 42h150c24 0 42-18 42-42 0-54 8-104 24-152 4-14 2-32-10-44l-94-94c62-122 162-220 282-282l94 94c12 12 30 14 44 10 48-16 98-24 152-24z" />
<glyph unicode="&#xe80b;" glyph-name="public" d="M764 282c56 60 90 142 90 230 0 142-88 266-214 316v-18c0-46-40-84-86-84h-84v-86c0-24-20-42-44-42h-84v-86h256c24 0 42-18 42-42v-128h42c38 0 70-26 82-60zM470 174v82c-46 0-86 40-86 86v42l-204 204c-6-24-10-50-10-76 0-174 132-318 300-338zM512 938c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426z" /> <glyph unicode="&#xe80b;" glyph-name="public" d="M764 282c56 60 90 142 90 230 0 142-88 266-214 316v-18c0-46-40-84-86-84h-84v-86c0-24-20-42-44-42h-84v-86h256c24 0 42-18 42-42v-128h42c38 0 70-26 82-60zM470 174v82c-46 0-86 40-86 86v42l-204 204c-6-24-10-50-10-76 0-174 132-318 300-338zM512 938c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426z" />
<glyph unicode="&#xe8b3;" glyph-name="restore" d="M512 682h64v-180l150-90-32-52-182 110v212zM554 896c212 0 384-172 384-384s-172-384-384-384c-106 0-200 42-270 112l60 62c54-54 128-88 210-88 166 0 300 132 300 298s-134 298-300 298-298-132-298-298h128l-172-172-4 6-166 166h128c0 212 172 384 384 384z" />
<glyph unicode="&#xe901;" glyph-name="avatar" d="M512 204c106 0 200 56 256 138-2 84-172 132-256 132-86 0-254-48-256-132 56-82 150-138 256-138zM512 810c-70 0-128-58-128-128s58-128 128-128 128 58 128 128-58 128-128 128zM512 938c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426z" /> <glyph unicode="&#xe901;" glyph-name="avatar" d="M512 204c106 0 200 56 256 138-2 84-172 132-256 132-86 0-254-48-256-132 56-82 150-138 256-138zM512 810c-70 0-128-58-128-128s58-128 128-128 128 58 128 128-58 128-128 128zM512 938c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426z" />
<glyph unicode="&#xe902;" glyph-name="download" d="M726 470h-128v170h-172v-170h-128l214-214zM826 596c110-8 198-100 198-212 0-118-96-214-214-214h-554c-142 0-256 114-256 256 0 132 100 240 228 254 54 102 160 174 284 174 156 0 284-110 314-258z" /> <glyph unicode="&#xe902;" glyph-name="download" d="M726 470h-128v170h-172v-170h-128l214-214zM826 596c110-8 198-100 198-212 0-118-96-214-214-214h-554c-142 0-256 114-256 256 0 132 100 240 228 254 54 102 160 174 284 174 156 0 284-110 314-258z" />
<glyph unicode="&#xe903;" glyph-name="mic-camera-combined" d="M756.704 628.138l267.296 202.213v-635.075l-267.296 202.213v-191.923c0-12.085-11.296-21.863-25.216-21.863h-706.272c-13.92 0-25.216 9.777-25.216 21.863v612.25c0 12.085 11.296 21.863 25.216 21.863h706.272c13.92 0 25.216-9.777 25.216-21.863v-189.679zM371.338 376.228c47.817 0 86.529 40.232 86.529 89.811v184.835c0 49.651-38.713 89.883-86.529 89.883-47.788 0-86.515-40.232-86.515-89.883v-184.835c0-49.579 38.756-89.811 86.515-89.811v0zM356.754 314.070v-32.78h33.718v33.412c73.858 9.606 131.235 73.73 131.235 151.351v88.232h-30.636v-88.232c0-67.57-53.696-122.534-119.734-122.534-66.024 0-119.691 54.964-119.691 122.534v88.232h-30.636v-88.232c0-79.215 59.674-144.502 135.744-151.969v-0.014z" /> <glyph unicode="&#xe903;" glyph-name="mic-camera-combined" d="M756.704 628.138l267.296 202.213v-635.075l-267.296 202.213v-191.923c0-12.085-11.296-21.863-25.216-21.863h-706.272c-13.92 0-25.216 9.777-25.216 21.863v612.25c0 12.085 11.296 21.863 25.216 21.863h706.272c13.92 0 25.216-9.777 25.216-21.863v-189.679zM371.338 376.228c47.817 0 86.529 40.232 86.529 89.811v184.835c0 49.651-38.713 89.883-86.529 89.883-47.788 0-86.515-40.232-86.515-89.883v-184.835c0-49.579 38.756-89.811 86.515-89.811v0zM356.754 314.070v-32.78h33.718v33.412c73.858 9.606 131.235 73.73 131.235 151.351v88.232h-30.636v-88.232c0-67.57-53.696-122.534-119.734-122.534-66.024 0-119.691 54.964-119.691 122.534v88.232h-30.636v-88.232c0-79.215 59.674-144.502 135.744-151.969v-0.014z" />

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 20 KiB

BIN
fonts/jitsi.ttf
View File

Binary file not shown.

BIN
fonts/jitsi.woff
View File

Binary file not shown.

141
fonts/selection.json
View File

@ -1,6 +1,33 @@
{ {
"IcoMoonType": "selection", "IcoMoonType": "selection",
"icons": [ "icons": [
{
"icon": {
"paths": [
"M512 342h64v180l150 90-32 52-182-110v-212zM554 128c212 0 384 172 384 384s-172 384-384 384c-106 0-200-42-270-112l60-62c54 54 128 88 210 88 166 0 300-132 300-298s-134-298-300-298-298 132-298 298h128l-172 172-4-6-166-166h128c0-212 172-384 384-384z"
],
"attrs": [],
"isMulticolor": false,
"isMulticolor2": false,
"tags": [
"restore"
],
"defaultCode": 59571,
"grid": 24
},
"attrs": [],
"properties": {
"ligatures": "history, restore",
"id": 385,
"order": 930,
"prevSize": 24,
"code": 59571,
"name": "restore"
},
"setIdx": 0,
"setId": 2,
"iconIdx": 385
},
{ {
"icon": { "icon": {
"paths": [ "paths": [
@ -24,9 +51,9 @@
"code": 58377, "code": 58377,
"name": "navigate_next" "name": "navigate_next"
}, },
"setIdx": 0, "setIdx": 1,
"setId": 2, "setId": 1,
"iconIdx": 153 "iconIdx": 0
}, },
{ {
"icon": { "icon": {
@ -53,7 +80,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 0 "iconIdx": 1
}, },
{ {
"icon": { "icon": {
@ -80,7 +107,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 1 "iconIdx": 2
}, },
{ {
"icon": { "icon": {
@ -107,7 +134,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 2 "iconIdx": 3
}, },
{ {
"icon": { "icon": {
@ -134,7 +161,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 3 "iconIdx": 4
}, },
{ {
"icon": { "icon": {
@ -161,7 +188,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 4 "iconIdx": 5
}, },
{ {
"icon": { "icon": {
@ -181,14 +208,14 @@
"properties": { "properties": {
"ligatures": "timer", "ligatures": "timer",
"id": 760, "id": 760,
"order": 916, "order": 928,
"prevSize": 24, "prevSize": 24,
"code": 58405, "code": 58405,
"name": "timer" "name": "timer"
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 5 "iconIdx": 6
}, },
{ {
"icon": { "icon": {
@ -215,7 +242,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 6 "iconIdx": 7
}, },
{ {
"icon": { "icon": {
@ -242,7 +269,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 7 "iconIdx": 8
}, },
{ {
"icon": { "icon": {
@ -269,7 +296,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 8 "iconIdx": 9
}, },
{ {
"icon": { "icon": {
@ -296,7 +323,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 9 "iconIdx": 10
}, },
{ {
"icon": { "icon": {
@ -325,7 +352,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 10 "iconIdx": 11
}, },
{ {
"icon": { "icon": {
@ -352,7 +379,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 11 "iconIdx": 12
}, },
{ {
"icon": { "icon": {
@ -379,7 +406,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 12 "iconIdx": 13
}, },
{ {
"icon": { "icon": {
@ -408,7 +435,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 13 "iconIdx": 14
}, },
{ {
"icon": { "icon": {
@ -437,7 +464,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 14 "iconIdx": 15
}, },
{ {
"icon": { "icon": {
@ -466,7 +493,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 15 "iconIdx": 16
}, },
{ {
"icon": { "icon": {
@ -495,7 +522,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 16 "iconIdx": 17
}, },
{ {
"icon": { "icon": {
@ -524,7 +551,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 17 "iconIdx": 18
}, },
{ {
"icon": { "icon": {
@ -550,7 +577,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 18 "iconIdx": 19
}, },
{ {
"icon": { "icon": {
@ -576,7 +603,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 19 "iconIdx": 20
}, },
{ {
"icon": { "icon": {
@ -602,7 +629,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 20 "iconIdx": 21
}, },
{ {
"icon": { "icon": {
@ -628,7 +655,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 21 "iconIdx": 22
}, },
{ {
"icon": { "icon": {
@ -654,7 +681,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 22 "iconIdx": 23
}, },
{ {
"icon": { "icon": {
@ -680,7 +707,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 23 "iconIdx": 24
}, },
{ {
"icon": { "icon": {
@ -706,7 +733,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 24 "iconIdx": 25
}, },
{ {
"icon": { "icon": {
@ -732,7 +759,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 25 "iconIdx": 26
}, },
{ {
"icon": { "icon": {
@ -758,7 +785,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 26 "iconIdx": 27
}, },
{ {
"icon": { "icon": {
@ -784,7 +811,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 27 "iconIdx": 28
}, },
{ {
"icon": { "icon": {
@ -810,7 +837,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 28 "iconIdx": 29
}, },
{ {
"icon": { "icon": {
@ -836,7 +863,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 29 "iconIdx": 30
}, },
{ {
"icon": { "icon": {
@ -862,7 +889,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 30 "iconIdx": 31
}, },
{ {
"icon": { "icon": {
@ -888,7 +915,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 31 "iconIdx": 32
}, },
{ {
"icon": { "icon": {
@ -914,7 +941,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 32 "iconIdx": 33
}, },
{ {
"icon": { "icon": {
@ -940,7 +967,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 33 "iconIdx": 34
}, },
{ {
"icon": { "icon": {
@ -966,7 +993,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 34 "iconIdx": 35
}, },
{ {
"icon": { "icon": {
@ -992,7 +1019,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 35 "iconIdx": 36
}, },
{ {
"icon": { "icon": {
@ -1018,7 +1045,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 36 "iconIdx": 37
}, },
{ {
"icon": { "icon": {
@ -1044,7 +1071,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 37 "iconIdx": 38
}, },
{ {
"icon": { "icon": {
@ -1070,7 +1097,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 38 "iconIdx": 39
}, },
{ {
"icon": { "icon": {
@ -1096,7 +1123,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 39 "iconIdx": 40
}, },
{ {
"icon": { "icon": {
@ -1122,7 +1149,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 40 "iconIdx": 41
}, },
{ {
"icon": { "icon": {
@ -1148,7 +1175,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 41 "iconIdx": 42
}, },
{ {
"icon": { "icon": {
@ -1174,7 +1201,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 42 "iconIdx": 43
}, },
{ {
"icon": { "icon": {
@ -1200,7 +1227,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 43 "iconIdx": 44
}, },
{ {
"icon": { "icon": {
@ -1226,7 +1253,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 44 "iconIdx": 45
}, },
{ {
"icon": { "icon": {
@ -1252,7 +1279,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 45 "iconIdx": 46
}, },
{ {
"icon": { "icon": {
@ -1278,7 +1305,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 46 "iconIdx": 47
}, },
{ {
"icon": { "icon": {
@ -1307,7 +1334,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 47 "iconIdx": 48
}, },
{ {
"icon": { "icon": {
@ -1337,7 +1364,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 48 "iconIdx": 49
}, },
{ {
"icon": { "icon": {
@ -1367,7 +1394,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 49 "iconIdx": 50
}, },
{ {
"icon": { "icon": {
@ -1393,7 +1420,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 50 "iconIdx": 51
}, },
{ {
"icon": { "icon": {
@ -1419,7 +1446,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 51 "iconIdx": 52
}, },
{ {
"icon": { "icon": {
@ -1445,7 +1472,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 52 "iconIdx": 53
} }
], ],
"height": 1024, "height": 1024,

141
react/features/base/font-icons/jitsi.json
View File

@ -1,6 +1,33 @@
{ {
"IcoMoonType": "selection", "IcoMoonType": "selection",
"icons": [ "icons": [
{
"icon": {
"paths": [
"M512 342h64v180l150 90-32 52-182-110v-212zM554 128c212 0 384 172 384 384s-172 384-384 384c-106 0-200-42-270-112l60-62c54 54 128 88 210 88 166 0 300-132 300-298s-134-298-300-298-298 132-298 298h128l-172 172-4-6-166-166h128c0-212 172-384 384-384z"
],
"attrs": [],
"isMulticolor": false,
"isMulticolor2": false,
"tags": [
"restore"
],
"defaultCode": 59571,
"grid": 24
},
"attrs": [],
"properties": {
"ligatures": "history, restore",
"id": 385,
"order": 930,
"prevSize": 24,
"code": 59571,
"name": "restore"
},
"setIdx": 0,
"setId": 2,
"iconIdx": 385
},
{ {
"icon": { "icon": {
"paths": [ "paths": [
@ -24,9 +51,9 @@
"code": 58377, "code": 58377,
"name": "navigate_next" "name": "navigate_next"
}, },
"setIdx": 0, "setIdx": 1,
"setId": 2, "setId": 1,
"iconIdx": 153 "iconIdx": 0
}, },
{ {
"icon": { "icon": {
@ -53,7 +80,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 0 "iconIdx": 1
}, },
{ {
"icon": { "icon": {
@ -80,7 +107,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 1 "iconIdx": 2
}, },
{ {
"icon": { "icon": {
@ -107,7 +134,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 2 "iconIdx": 3
}, },
{ {
"icon": { "icon": {
@ -134,7 +161,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 3 "iconIdx": 4
}, },
{ {
"icon": { "icon": {
@ -161,7 +188,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 4 "iconIdx": 5
}, },
{ {
"icon": { "icon": {
@ -181,14 +208,14 @@
"properties": { "properties": {
"ligatures": "timer", "ligatures": "timer",
"id": 760, "id": 760,
"order": 916, "order": 928,
"prevSize": 24, "prevSize": 24,
"code": 58405, "code": 58405,
"name": "timer" "name": "timer"
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 5 "iconIdx": 6
}, },
{ {
"icon": { "icon": {
@ -215,7 +242,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 6 "iconIdx": 7
}, },
{ {
"icon": { "icon": {
@ -242,7 +269,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 7 "iconIdx": 8
}, },
{ {
"icon": { "icon": {
@ -269,7 +296,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 8 "iconIdx": 9
}, },
{ {
"icon": { "icon": {
@ -296,7 +323,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 9 "iconIdx": 10
}, },
{ {
"icon": { "icon": {
@ -325,7 +352,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 10 "iconIdx": 11
}, },
{ {
"icon": { "icon": {
@ -352,7 +379,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 11 "iconIdx": 12
}, },
{ {
"icon": { "icon": {
@ -379,7 +406,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 12 "iconIdx": 13
}, },
{ {
"icon": { "icon": {
@ -408,7 +435,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 13 "iconIdx": 14
}, },
{ {
"icon": { "icon": {
@ -437,7 +464,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 14 "iconIdx": 15
}, },
{ {
"icon": { "icon": {
@ -466,7 +493,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 15 "iconIdx": 16
}, },
{ {
"icon": { "icon": {
@ -495,7 +522,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 16 "iconIdx": 17
}, },
{ {
"icon": { "icon": {
@ -524,7 +551,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 17 "iconIdx": 18
}, },
{ {
"icon": { "icon": {
@ -550,7 +577,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 18 "iconIdx": 19
}, },
{ {
"icon": { "icon": {
@ -576,7 +603,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 19 "iconIdx": 20
}, },
{ {
"icon": { "icon": {
@ -602,7 +629,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 20 "iconIdx": 21
}, },
{ {
"icon": { "icon": {
@ -628,7 +655,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 21 "iconIdx": 22
}, },
{ {
"icon": { "icon": {
@ -654,7 +681,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 22 "iconIdx": 23
}, },
{ {
"icon": { "icon": {
@ -680,7 +707,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 23 "iconIdx": 24
}, },
{ {
"icon": { "icon": {
@ -706,7 +733,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 24 "iconIdx": 25
}, },
{ {
"icon": { "icon": {
@ -732,7 +759,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 25 "iconIdx": 26
}, },
{ {
"icon": { "icon": {
@ -758,7 +785,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 26 "iconIdx": 27
}, },
{ {
"icon": { "icon": {
@ -784,7 +811,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 27 "iconIdx": 28
}, },
{ {
"icon": { "icon": {
@ -810,7 +837,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 28 "iconIdx": 29
}, },
{ {
"icon": { "icon": {
@ -836,7 +863,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 29 "iconIdx": 30
}, },
{ {
"icon": { "icon": {
@ -862,7 +889,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 30 "iconIdx": 31
}, },
{ {
"icon": { "icon": {
@ -888,7 +915,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 31 "iconIdx": 32
}, },
{ {
"icon": { "icon": {
@ -914,7 +941,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 32 "iconIdx": 33
}, },
{ {
"icon": { "icon": {
@ -940,7 +967,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 33 "iconIdx": 34
}, },
{ {
"icon": { "icon": {
@ -966,7 +993,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 34 "iconIdx": 35
}, },
{ {
"icon": { "icon": {
@ -992,7 +1019,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 35 "iconIdx": 36
}, },
{ {
"icon": { "icon": {
@ -1018,7 +1045,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 36 "iconIdx": 37
}, },
{ {
"icon": { "icon": {
@ -1044,7 +1071,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 37 "iconIdx": 38
}, },
{ {
"icon": { "icon": {
@ -1070,7 +1097,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 38 "iconIdx": 39
}, },
{ {
"icon": { "icon": {
@ -1096,7 +1123,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 39 "iconIdx": 40
}, },
{ {
"icon": { "icon": {
@ -1122,7 +1149,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 40 "iconIdx": 41
}, },
{ {
"icon": { "icon": {
@ -1148,7 +1175,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 41 "iconIdx": 42
}, },
{ {
"icon": { "icon": {
@ -1174,7 +1201,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 42 "iconIdx": 43
}, },
{ {
"icon": { "icon": {
@ -1200,7 +1227,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 43 "iconIdx": 44
}, },
{ {
"icon": { "icon": {
@ -1226,7 +1253,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 44 "iconIdx": 45
}, },
{ {
"icon": { "icon": {
@ -1252,7 +1279,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 45 "iconIdx": 46
}, },
{ {
"icon": { "icon": {
@ -1278,7 +1305,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 46 "iconIdx": 47
}, },
{ {
"icon": { "icon": {
@ -1307,7 +1334,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 47 "iconIdx": 48
}, },
{ {
"icon": { "icon": {
@ -1337,7 +1364,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 48 "iconIdx": 49
}, },
{ {
"icon": { "icon": {
@ -1367,7 +1394,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 49 "iconIdx": 50
}, },
{ {
"icon": { "icon": {
@ -1393,7 +1420,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 50 "iconIdx": 51
}, },
{ {
"icon": { "icon": {
@ -1419,7 +1446,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 51 "iconIdx": 52
}, },
{ {
"icon": { "icon": {
@ -1445,7 +1472,7 @@
}, },
"setIdx": 1, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 52 "iconIdx": 53
} }
], ],
"height": 1024, "height": 1024,

96
react/features/welcome/components/PagedList.android.js
View File

@ -1,7 +1,8 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import { View, ViewPagerAndroid } from 'react-native'; import { Text, TouchableOpacity, View, ViewPagerAndroid } from 'react-native';
import { Icon } from '../../base/font-icons';
import { MeetingList } from '../../calendar-sync'; import { MeetingList } from '../../calendar-sync';
import { RecentList } from '../../recent-list'; import { RecentList } from '../../recent-list';
@ -14,6 +15,10 @@ import styles from './styles';
* @extends PagedList * @extends PagedList
*/ */
export default class PagedList extends AbstractPagedList { export default class PagedList extends AbstractPagedList {
/**
* A reference to the viewpager.
*/
_viewPager: Object;
/** /**
* Constructor of the PagedList Component. * Constructor of the PagedList Component.
@ -25,6 +30,8 @@ export default class PagedList extends AbstractPagedList {
this._getIndicatorStyle = this._getIndicatorStyle.bind(this); this._getIndicatorStyle = this._getIndicatorStyle.bind(this);
this._onPageSelected = this._onPageSelected.bind(this); this._onPageSelected = this._onPageSelected.bind(this);
this._onSelectPage = this._onSelectPage.bind(this);
this._setPagerReference = this._setPagerReference.bind(this);
} }
/** /**
@ -46,6 +53,7 @@ export default class PagedList extends AbstractPagedList {
keyboardDismissMode = 'on-drag' keyboardDismissMode = 'on-drag'
onPageSelected = { this._onPageSelected } onPageSelected = { this._onPageSelected }
peekEnabled = { true } peekEnabled = { true }
ref = { this._setPagerReference }
style = { styles.pagedList }> style = { styles.pagedList }>
<View key = { 0 }> <View key = { 0 }>
<RecentList disabled = { disabled } /> <RecentList disabled = { disabled } />
@ -55,32 +63,64 @@ export default class PagedList extends AbstractPagedList {
</View> </View>
</ViewPagerAndroid> </ViewPagerAndroid>
<View style = { styles.pageIndicatorContainer }> <View style = { styles.pageIndicatorContainer }>
<View style = { this._getIndicatorStyle(0) } /> <TouchableOpacity
<View style = { this._getIndicatorStyle(1) } /> onPress = { this._onSelectPage(0) }
style = { styles.pageIndicator } >
<View style = { styles.pageIndicator }>
<Icon
name = 'restore'
style = { [
styles.pageIndicatorIcon,
this._getIndicatorStyle(0)
] } />
<Text
style = { [
styles.pageIndicatorText,
this._getIndicatorStyle(0)
] }>
History
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
onPress = { this._onSelectPage(1) }
style = { styles.pageIndicator } >
<View style = { styles.pageIndicator }>
<Icon
name = 'event_note'
style = { [
styles.pageIndicatorIcon,
this._getIndicatorStyle(1)
] } />
<Text
style = { [
styles.pageIndicatorText,
this._getIndicatorStyle(1)
] }>
Calendar
</Text>
</View>
</TouchableOpacity>
</View> </View>
</View> </View>
); );
} }
_getIndicatorStyle: number => Array<Object>; _getIndicatorStyle: number => Object;
/** /**
* Constructs the style array of an idicator. * Constructs the style of an indicator.
* *
* @private * @private
* @param {number} indicatorIndex - The index of the indicator. * @param {number} indicatorIndex - The index of the indicator.
* @returns {Array<Object>} * @returns {Object}
*/ */
_getIndicatorStyle(indicatorIndex) { _getIndicatorStyle(indicatorIndex) {
const style = [
styles.pageIndicator
];
if (this.state.pageIndex === indicatorIndex) { if (this.state.pageIndex === indicatorIndex) {
style.push(styles.pageIndicatorActive); return styles.pageIndicatorTextActive;
} }
return style; return null;
} }
_onPageSelected: Object => void; _onPageSelected: Object => void;
@ -99,4 +139,36 @@ export default class PagedList extends AbstractPagedList {
}); });
} }
} }
_onSelectPage: number => Function
/**
* Constructs a function to be used as a callback for the tab bar.
*
* @private
* @param {number} pageIndex - The index of the page to activate via the
* callback.
* @returns {Function}
*/
_onSelectPage(pageIndex) {
return () => {
this._viewPager.setPage(pageIndex);
this.setState({
pageIndex
});
};
}
_setPagerReference: Object => void
/**
* Sets the pager's reference for direct modification.
*
* @private
* @param {React@Node} component - The pager component.
* @returns {void}
*/
_setPagerReference(component) {
this._viewPager = component;
}
} }

32
react/features/welcome/components/styles.js
View File

@ -150,21 +150,31 @@ export default createStyleSheet({
}, },
pageIndicator: { pageIndicator: {
backgroundColor: 'rgba(255, 255, 255, 0.2)', alignItems: 'center',
height: 3, flex: 1,
marginHorizontal: 7, flexDirection: 'column',
width: 20 justifyContent: 'center'
},
pageIndicatorActive: {
backgroundColor: 'rgba(255, 255, 255, 0.8)'
}, },
pageIndicatorContainer: { pageIndicatorContainer: {
alignItems: 'center', alignItems: 'stretch',
backgroundColor: ColorPalette.blue,
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'center', height: 56,
padding: 12 justifyContent: 'center'
},
pageIndicatorIcon: {
color: ColorPalette.blueHighlight,
fontSize: 24
},
pageIndicatorText: {
color: ColorPalette.blueHighlight
},
pageIndicatorTextActive: {
color: ColorPalette.white
}, },
/** /**