Skip to content
This repository was archived by the owner on Apr 16, 2019. It is now read-only.

Commit 74bdd0b

Browse files
langowskiadamlangowskiadam
committed
Conflicts: build/appframework.ui.min.js
2 parents 22730a2 + e79d8d7 commit 74bdd0b

23 files changed

Lines changed: 1936 additions & 107 deletions

‎.settings/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// Place your settings in this file to overwrite default and user settings.
2+
{
3+
}

‎Gruntfile.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,8 @@ module.exports = function (grunt) {
4949
"src/af.drawer.js",
5050
"src/af.swipereveal.js",
5151
"src/af.desktopBrowsers.js",
52-
"src/af.toast.js"
52+
"src/af.toast.js",
53+
"src/af.lockscreen.js"
5354
]
5455
}
5556
},
@@ -80,7 +81,8 @@ module.exports = function (grunt) {
8081
"src/less/forms.less",
8182
"src/less/grid.less",
8283
"src/less/lists.less",
83-
"src/less/splitview.less"
84+
"src/less/splitview.less",
85+
"src/less/af.lockscreen.less"
8486
]
8587
}
8688
}
@@ -140,7 +142,8 @@ module.exports = function (grunt) {
140142
"src/less/forms.less",
141143
"src/less/grid.less",
142144
"src/less/lists.less",
143-
"src/less/splitview.less"
145+
"src/less/splitview.less",
146+
"src/less/af.lockscreen.less"
144147
]
145148
}
146149
}
@@ -161,7 +164,7 @@ module.exports = function (grunt) {
161164
"watch"
162165
]);
163166

164-
grunt.registerTask("rebuild" , ["concat","closure-compiler","usebanner"]);
167+
grunt.registerTask("rebuild" , ["less","concat","closure-compiler","usebanner"]);
165168
grunt.registerTask("hint" , ["jshint"]);
166169
grunt.registerTask("test" , ["karma"]);
167170

‎animbase.html‎

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
<!DOCTYPE html>
2+
<!--HTML5 doctype-->
3+
<html>
4+
5+
<head>
6+
7+
<title>App Framework Kitchen Sink</title>
8+
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, minimal-ui">
10+
<meta name="apple-mobile-web-app-capable" content="yes" />
11+
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
12+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
13+
<link rel="stylesheet" type="text/css" href="src/css/icons.css" />
14+
15+
<link rel="stylesheet" type="text/css" href="../build/af.ui.css" />
16+
17+
<script type="text/javascript" charset="utf-8" src="./jquery.min.js"></script>
18+
<script type="text/javascript" charset="utf-8" src="3rdparty/fastclick.js"></script>
19+
<script type="text/javascript" charset="utf-8" src="src/af.shim.js"></script>
20+
<script type="text/javascript" charset="utf-8" src="src/af.ui.js"></script>
21+
22+
23+
<script src="src/af.desktopBrowsers.js"></script>
24+
<script type="text/javascript" charset="utf-8" src="src/af.actionsheet.js"></script>
25+
<script type="text/javascript" charset="utf-8" src="src/af.animation.js"></script>
26+
<script type="text/javascript" charset="utf-8" src="src/af.touchEvents.js"></script>
27+
<script type="text/javascript" charset="utf-8" src="src/af.popup.js"></script>
28+
<script type="text/javascript" charset="utf-8" src="src/af.drawer.js"></script>
29+
<script type="text/javascript" charset="utf-8" src="src/af.toast.js"></script>
30+
<script type="text/javascript" charset="utf-8" src="src/af.animateheader.js"></script>
31+
<script type="text/javascript" charset="utf-8" src="src/af.splashscreen.js"></script>
32+
<script type="text/javascript" charset="utf-8" src="src/af.swipereveal.js"></script>
33+
34+
35+
<script>
36+
$.afui.useOSThemes=true;
37+
$.afui.loadDefaultHash=true;
38+
$(document).ready(function(){
39+
//$.afui.splitview.enable();
40+
})
41+
42+
if($.os.ios)
43+
$.afui.animateHeader();
44+
45+
</script>
46+
</head>
47+
48+
<body >
49+
<div id="splashscreen" class='ui-loader heavy'>
50+
App Framework
51+
<br>
52+
<br>
53+
<span class='ui-icon ui-icon-loading spin'></span>
54+
<h1>Starting app</h1>
55+
56+
</div>
57+
<div class="view" id="mainview">
58+
<header>
59+
<h1>What</h1>
60+
</header>
61+
<div class="pages">
62+
<div data-left-drawer="left" class="panel" id="main" data-title="Main" data-selected="true">
63+
64+
<ul class="list">
65+
<li><a href="#login" data-transition="up-reveal">Login View (modal)</a></li>
66+
<li><a href="#drawer" >Drawer</a></li>
67+
<li><a href="ajax.html" data-refresh="true" >Ajax</a></li>
68+
<li><a href="#toast" data-transition="flip">Toast</a></li>
69+
<li><a href="#afforms" >Form Elements</a></li>
70+
<li><a href="#popup">Popup</a></li>
71+
<li><a href="#actionsheet">Actionsheet</a></li>
72+
<li><a href="#foobar">Button Groups</a></li>
73+
<li><a href="#cards">cards</a></li>
74+
</ul>
75+
</div>
76+
<div class="panel" id="popup" data-title="Popup Plugin" data-include="partials/popup.html">
77+
</div>
78+
<div class="panel" id="actionsheet" data-title="Actionsheet Plugin" data-include="partials/actionsheet.html">
79+
</div>
80+
<div class="panel" id="toast" data-title="Toast Plugin" data-include="partials/toast.html">
81+
</div>
82+
<div data-left-drawer="left" class="panel" id="foobar" data-title="Foobar">
83+
Foobar stuff goes here
84+
85+
<div class='button-grouped tabbed'>
86+
<a class='button'>One</a>
87+
<a class='button'>two</a>
88+
<a class='button'>three</a>
89+
</div>
90+
</div>
91+
<div data-left-drawer="left" class="panel" id="cards" data-title="Cards">
92+
<br>
93+
<div class="card">
94+
<h1>Card One</h1>
95+
<h2>Card Two</h2>
96+
</div>
97+
<div class="card">
98+
<h1 class='info'>Meeting</h1>
99+
<p>This is card content</p>
100+
</div>
101+
</div>
102+
<div class="panel" id="drawer" data-title="Drawer">
103+
<a href="#" class="button" onclick="$.afui.drawer.hide('#left')">Hide Left</a>
104+
<a href="#" class="button" data-menu-close>Hide Active</a>
105+
<a href="#" class="button" data-menu-close data-right-menu="right">Hide Right</a>
106+
<br>
107+
<a href="#" class="button" data-left-menu="left" >Cover Left</a>
108+
<br>
109+
<a href="#" class="button" onclick="$.afui.drawer.show('#right','right')">Cover Right</a>
110+
<br>
111+
<a href="#" class="button" data-left-menu="left" data-transition="push">Left Push</a>
112+
<br>
113+
<a href="#" class="button" onclick="$.afui.drawer.show('#left','left','reveal')">Left Reveal</a>
114+
<br>
115+
<a href="#" class="button" onclick="$.afui.drawer.show('#right','right','push')">Right Push</a>
116+
<br>
117+
<a href="#" class="button" onclick="$.afui.drawer.show('#right','right','reveal')">Right Reveal</a>
118+
</div>
119+
120+
<div id="afforms" title="Form Styles" class="panel" data-include="partials/forms.html"></div>
121+
122+
</div>
123+
<footer>
124+
<a href="#main" class="icon home">Main</a>
125+
126+
<a href="#about" class="icon html5" data-transition="up-reveal">About</a>
127+
<a href="#test" class="icon trash">test</a>
128+
<a href="#touchevents" class="icon trash">Touch Events</a>
129+
</footer>
130+
<nav id="left" data-include="partials/leftnav.html">
131+
132+
</nav>
133+
<nav id="right">
134+
<div class="view active" id="navView2">
135+
<header>
136+
<h1>What</h1>
137+
</header>
138+
<div class="pages">
139+
140+
<div class="panel active" id="rightNav" data-title="Foobar">
141+
This is the right nav
142+
</div>
143+
</div>
144+
</div>
145+
</nav>
146+
</div>
147+
148+
<div class="view" id="touchView">
149+
<header><h1></h1></header>
150+
<div class="pages">
151+
<div class="panel" data-title="touch events" id="touchevents" data-include="partials/touch.html">
152+
</div>
153+
</div>
154+
</div>
155+
<div class="view" id="aboutView">
156+
<header>
157+
<h1>Bar</h1>
158+
</header>
159+
<div class="pages">
160+
<div class="panel" id="about" data-title="Bar">
161+
About
162+
</div>
163+
</div>
164+
<footer>
165+
<a href="#" class="icon home" data-back >Home</a>
166+
<a href="#test" class="icon home">Test</a>
167+
</footer>
168+
</div>
169+
170+
<div class="view" id="testView">
171+
<header>
172+
<h1>Bar</h1>
173+
</header>
174+
175+
<div class="pages">
176+
<div class="panel" id="test" data-title="Test Tabbar">
177+
About
178+
</div>
179+
</div>
180+
<footer>
181+
<a class="button" href="#main">Something</a>
182+
</footer>
183+
</div>
184+
185+
<div class="view" id="loginView">
186+
<div class="pages">
187+
<div class="panel" id="login">
188+
<h1>Login</h1>
189+
<div style="height:300px">
190+
191+
</div>
192+
<label>Test<input type="text" placeholder="Username">
193+
<br>
194+
<a class='button' href='#' data-message='Hi There' data-alert>Alert</a>
195+
<a class='button' href='#main' data-transition='up-reveal:dismiss'>Back</a>
196+
<div style="height:300px;background:green;">
197+
asdf
198+
</div>
199+
more stuff
200+
</div>
201+
</div>
202+
</div>
203+
</body>
204+
205+
</html>

‎build/af.ui.base.css‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2534,3 +2534,148 @@ header .menuButton:after {
25342534
position: absolute;
25352535
width: 15px;
25362536
}
2537+
2538+
#lockScreen {
2539+
position: absolute;
2540+
top: 0px;
2541+
bottom: 0px;
2542+
width: 100%;
2543+
height: 100%;
2544+
left: 0px;
2545+
z-index: 99999999999999;
2546+
background: #ccc;
2547+
}
2548+
#lockScreen .flexContainer {
2549+
display: -webkit-box;
2550+
display: -moz-box;
2551+
display: box;
2552+
-webkit-box-orient: vertical;
2553+
-moz-box-orient: vertical;
2554+
box-orient: vertical;
2555+
-webkit-box-align: center;
2556+
-moz-box-align: center;
2557+
box-align: center;
2558+
-webkit-box-pack: center;
2559+
-moz-box-pack: center;
2560+
box-pack: center;
2561+
}
2562+
#lockScreen .keyboard {
2563+
width: 100%;
2564+
position: absolute;
2565+
bottom: 0px;
2566+
}
2567+
#lockScreen .keyboard .row {
2568+
display: block;
2569+
width: 100%;
2570+
text-align: center;
2571+
height: 50px;
2572+
line-height: 50px;
2573+
font-size: 1.3em;
2574+
font-weight: bold;
2575+
}
2576+
#lockScreen .keyboard .row div {
2577+
display: block;
2578+
width: 33.33%;
2579+
float: left;
2580+
border: 1px solid #000;
2581+
justify-content: center;
2582+
text-align: center;
2583+
}
2584+
#lockScreen .keyboard .row div.grey {
2585+
background: white;
2586+
}
2587+
#lockScreen .content {
2588+
position: absolute;
2589+
top: 0px;
2590+
bottom: 170px;
2591+
width: 100%;
2592+
text-align: center;
2593+
-moz-box-flex: 0;
2594+
-webkit-box-flex: 0;
2595+
-ms-box-flex: 0;
2596+
box-flex: 0;
2597+
-moz-box-ordinal-group: 1;
2598+
-webkit-box-ordinal-group: 1;
2599+
-ms-box-ordinal-group: 1;
2600+
box-ordinal-group: 1;
2601+
align-items: center;
2602+
justify-content: center;
2603+
}
2604+
#lockScreen .touched {
2605+
background-color: white;
2606+
}
2607+
#lockScreen input[type="password"] {
2608+
height: 50px;
2609+
font-size: 40px;
2610+
width: 200px;
2611+
text-align: center;
2612+
}
2613+
#lockScreen .icon {
2614+
font-size: 50px;
2615+
color: white;
2616+
margin-bottom: 10px;
2617+
}
2618+
#lockScreen .error {
2619+
padding-top: 10px;
2620+
visibility: hidden;
2621+
color: red;
2622+
font-weight: bold;
2623+
font-size: 1.3em;
2624+
}
2625+
#lockScreen.round .content {
2626+
bottom: 250px;
2627+
}
2628+
#lockScreen.round .keyboard {
2629+
bottom: 10px;
2630+
}
2631+
#lockScreen.round .keyboard .row {
2632+
display: -webkit-box;
2633+
display: -moz-box;
2634+
display: box;
2635+
-webkit-box-align: center;
2636+
-moz-box-align: center;
2637+
box-align: center;
2638+
-webkit-box-pack: center;
2639+
-moz-box-pack: center;
2640+
box-pack: center;
2641+
margin-bottom: 20px;
2642+
}
2643+
#lockScreen.round .keyboard .row div {
2644+
-moz-box-flex: 0;
2645+
-webkit-box-flex: 0;
2646+
-ms-box-flex: 0;
2647+
box-flex: 0;
2648+
-moz-box-ordinal-group: 1;
2649+
-webkit-box-ordinal-group: 1;
2650+
-ms-box-ordinal-group: 1;
2651+
box-ordinal-group: 1;
2652+
float: none;
2653+
width: 60px;
2654+
height: 60px;
2655+
border-radius: 60px;
2656+
line-height: 60px;
2657+
margin: 10px;
2658+
cursor: pointer;
2659+
}
2660+
#lockScreen.round .keyboard .row div.grey {
2661+
background: transparent;
2662+
border: none;
2663+
}
2664+
#lockScreen.round input[type="password"] {
2665+
height: 50px;
2666+
font-size: 40px;
2667+
width: 200px;
2668+
text-align: center;
2669+
background: transparent;
2670+
color: white;
2671+
}
2672+
#lockScreen.round input[type="password"]::-webkit-input-placeholder {
2673+
color: white;
2674+
}
2675+
#lockScreen.round input[type="password"]::-moz-placeholder {
2676+
/* Firefox 19+ */
2677+
color: white;
2678+
}
2679+
#lockScreen.round input[type="password"]:-ms-input-placeholder {
2680+
color: white;
2681+
}

0 commit comments

Comments
 (0)