Skip to content

O
officejs
Commit acde619f authored by Romain Courteaud's avatar Romain Courteaud
Browse files
Options

Split page into gadgets.

parent a89bc8c7
Show whitespace changes
Inline Side-by-side
Showing with 290 additions and 96 deletions
src/gadget/footer.html 0 → 100644
View file @ acde619f
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Footer</title>
<!-- normalize -->
<link rel="stylesheet" href="../lib/normalize.css">
<!-- JQM structure -->
<link rel="stylesheet" href="../lib/jquery.mobile.css">
<!-- JQM extensions -->
<link rel="stylesheet" href="../css/extensions.css">
<!-- fontawesome icons -->
<link rel="stylesheet" href="../css/fontawesome.css">
<!-- JQM custom themes (slapos-white, slapos-black, slapos-active) -->
<link rel="stylesheet" href="../css/themes.css">
<!-- generic CSS -->
<link rel="stylesheet" href="../css/css.css">
</head>
<body>
<!-- footer -->
<div data-role="navbar" class="navbar">
<ul>
<li>
<a href="#" data-rel="popup" data-icon="compass">Browse</a>
</li>
<li>
<a class="new_item" href="computer.html?mode=add"
data-rel="popup" data-icon="plus">
<span class="navbar_add">Add</span>/<span
class="navbar_clone">Clone</span>
</a>
</li>
<li><a class="remove_item" href="#" data-rel="popup"
data-icon="minus">Remove</a></li>
<li><a href="#" data-rel="popup" data-icon="cog">Action</a></li>
<li><a href="#" data-rel="popup"
data-icon="share">Import/Export</a></li>
</ul>
</div>
</body>
</html>
src/gadget/header.html 0 → 100644
View file @ acde619f
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Headers</title>
<!-- TODO: gadget mobile meta -->
<!-- TODO: schema.org? -->
<!-- TODO: all JQM widgets should have enhanced markup vs
letting JQM enhance -->
<!-- normalize -->
<link rel="stylesheet" href="../lib/normalize.css">
<!-- JQM structure -->
<link rel="stylesheet" href="../lib/jquery.mobile.css">
<!-- JQM extensions -->
<link rel="stylesheet" href="../css/extensions.css">
<!-- fontawesome icons -->
<link rel="stylesheet" href="../css/fontawesome.css">
<!-- JQM custom themes (slapos-white, slapos-black, slapos-active) -->
<link rel="stylesheet" href="../css/themes.css">
<!-- generic CSS -->
<link rel="stylesheet" href="../css/css.css">
</head>
<body>
<div class="wrap left">
<div data-role="controlgroup" data-type="horizontal" class="buttongroup">
<a href="#menu_computers" data-rel="panel" data-role="button"
data-icon="reorder" class="responsive">Navigate</a>
<a href="#menu_computers" data-role="button">foo</a>
</div>
</div>
<h1 class="ui-title">Computers</h1>
<div class="wrap right">
<div data-role="controlgroup" data-type="horizontal" class="buttongroup">
<a href="#popup_computers" data-rel="popup" data-transition="pop"
data-position-to="window" data-role="button" data-icon="user"
class="responsive">Login</a>
<a href="#communicate_computers" data-rel="panel" data-role="button"
data-icon="comments" class="responsive">Communicate</a>
</div>
</div>
</body>
</html>
src/gadget/index.html
View file @ acde619f
...@@ -7,7 +7,8 @@ ...@@ -7,7 +7,8 @@
<!-- TODO: gadget mobile meta --> <!-- TODO: gadget mobile meta -->
<!-- TODO: schema.org? --> <!-- TODO: schema.org? -->
<!-- TODO: all JQM widgets should have enhanced markup vs letting JQM enhance --> <!-- TODO: all JQM widgets should have enhanced markup vs
letting JQM enhance -->
<!-- normalize --> <!-- normalize -->
<link rel="stylesheet" href="../lib/normalize.css"> <link rel="stylesheet" href="../lib/normalize.css">
<!-- JQM structure --> <!-- JQM structure -->
...@@ -27,93 +28,19 @@ ...@@ -27,93 +28,19 @@
<div id="computers" data-role="page" data-theme="slapos-white"> <div id="computers" data-role="page" data-theme="slapos-white">
<!-- left panel --> <!-- left panel -->
<div data-role="panel" id="menu_computers" data-theme="slapos-black" class="panel" data-position="left" data-display="push"> <div data-role="panel" id="menu_computers" data-theme="slapos-black"
<div class="panel_element panel_element_first panel_header"> class="panel" data-position="left" data-display="push">
<input type="search" data-role="button" value="" placeholder="Search" class="panel_search" />
<a href="#menu" class="panel-close" data-role="button" data-iconpos="notext" data-icon="remove" data-rel="close">Close</a>
</div>
<div class="panel_element">
<!-- gadget modules -->
<ul data-role="listview" class="listview" data-theme="slapos-black">
<li data-role="list-divider">Modules</li>
<li class="listview_item listview_icon"><a href="webpages.html"><span class="ui-li-icon ui-li-icon-custom ui-icon-file-alt ui-icon">&nbsp;</span><h3>Webpages</h3><p>Generated Webpages</p></a></li>
</ul>
</div>
<div class="panel_element">
<ul data-role="listview" class="listview" data-theme="slapos-black">
<li data-role="list-divider">General</li>
<li class="listview_item listview_icon"><a href=""><span class="ui-li-icon ui-li-icon-custom ui-icon-folder-open-alt ui-icon">&nbsp;</span><h3>Software</h3></a></li>
<li class="listview_item listview_icon"><a href=""><span class="ui-li-icon ui-li-icon-custom ui-icon-book ui-icon">&nbsp;</span><h3>Documentation</h3></a></li>
<li class="listview_item listview_icon"><a href=""><span class="ui-li-icon ui-li-icon-custom ui-icon-cloud-download ui-icon">&nbsp;</span><h3>Download</h3></a></li>
<li class="listview_item listview_icon"><a href=""><span class="ui-li-icon ui-li-icon-custom ui-icon-comments ui-icon">&nbsp;</span><h3>Forum</h3></a></li>
<li class="listview_item listview_icon"><a href=""><span class="ui-li-icon ui-li-icon-custom ui-icon-microphone ui-icon">&nbsp;</span><h3>Blog</h3></a></li>
</ul>
</div>
<div class="panel_element" data-theme="slapos-black">
<ul class="list mini">
<li><a href="http://nexedi.com/">Nexedi &copy; 2013</a></li>
</ul>
</div>
</div> </div>
<!-- gadget header --> <!-- gadget header -->
<div data-role="header" data-position="fixed"> <div id="headergadget" data-role="header" data-position="fixed"></div>
<div class="wrap left">
<div data-role="controlgroup" data-type="horizontal" class="buttongroup">
<a href="#menu_computers" data-rel="panel" data-role="button" data-icon="reorder" class="responsive">Navigate</a>
</div>
</div>
<h1>Computers</h1>
<div class="wrap right">
<div data-role="controlgroup" data-type="horizontal" class="buttongroup">
<a href="#popup_computers" data-rel="popup" data-transition="pop" data-position-to="window" data-role="button" data-icon="user" class="responsive">Login</a>
<a href="#communicate_computers" data-rel="panel" data-role="button" data-icon="comments" class="responsive">Communicate</a>
</div>
</div>
</div>
<!-- popup login --> <!-- popup login -->
<div data-role="popup" id="popup_computers" data-overlay-theme="slapos-black" data-tolerance="30,30,30,30" data-shadow="false" data-theme="slapos-white" class="popup login ui-content"> <!--div data-role="popup" id="popup_computers"
<div class="popup_element logo_wrap"> data-overlay-theme="slapos-black" data-tolerance="30,30,30,30"
<img src="../img/slapos.png" alt="slapos logo" /> data-shadow="false" data-theme="slapos-white"
</div> class="popup login ui-content">
<div class="popup_element"> </div-->
<p>Sign in using</p>
<div data-role="controlgroup">
<a href="#" data-role="button" class="signin_google" data-iconpos="left" data-icon="google-plus-sign">Google</a>
<a href="#" data-role="button" class="signin_fb" data-iconpos="left" data-icon="facebook-sign">Facebook</a>
</div>
<p>Classic login</p>
<div data-role="controlgroup" data-type="horizontal" class="input_board">
<label class="ui-hidden-accessible">Login</label>
<input name="login" type="text" value="" placeholder="Login" data-icon="user" />
<label class="ui-hidden-accessible">Password</label>
<input name="password" type="password" value="" placeholder="Password" data-icon="lock" />
</div>
<span class="mini right note">
<a href="#">Forgot Password</a>
</span>
</div>
<div class="popup_element">
<p class="mini">
<span class="note">Please note:</span>
To maintain sufficient resources, a minimal fee of 1 EUR will be
charged if you use SlapOS services for <strong>more than 24
hours</strong>. By clicking on one of the signup buttons, you
agree that you are subscribing to a payable service. All services
you request will be invoiced to you at the end of the month.
</p>
<p>
To find out more, please refer to
</p>
<a href="pricing.html" data-role="button" data-iconpos="left" data-icon="euro">SlapOS Pricing</a>
</div>
</div>
<!-- content --> <!-- content -->
<div class="ui-content"> <div class="ui-content">
...@@ -125,21 +52,12 @@ ...@@ -125,21 +52,12 @@
</div> </div>
<!-- footer --> <!-- footer -->
<div data-role="footer" data-position="fixed"> <div id="footergadget" data-role="footer" data-position="fixed"></div>
<div data-role="navbar" class="navbar">
<ul>
<li><a href="#" data-rel="popup" data-icon="compass">Browse</a></li>
<li><a class="new_item" href="computer.html?mode=add" data-rel="popup" data-icon="plus"><span class="navbar_add">Add</span>/<span class="navbar_clone">Clone</span></a></li>
<li><a class="remove_item" href="#" data-rel="popup" data-icon="minus">Remove</a></li>
<li><a href="#" data-rel="popup" data-icon="cog">Action</a></li>
<li><a href="#" data-rel="popup" data-icon="share">Import/Export</a></li>
</ul>
</div>
</div>
<!-- right panel --> <!-- right panel -->
<div data-role="panel" id="communicate_computers" data-theme="slapos-black" class="panel" data-position="right" data-display="push"> <div data-role="panel" id="communicate_computers"
data-theme="slapos-black" class="panel" data-position="right"
data-display="push">
</div> </div>
</div> </div>
...@@ -147,6 +65,9 @@ ...@@ -147,6 +65,9 @@
<script src="../lib/jquery.js"></script> <script src="../lib/jquery.js"></script>
<script src="../lib/jquery.mobile.js"></script> <script src="../lib/jquery.mobile.js"></script>
<script src="../lib/extensions.js"></script> <script src="../lib/extensions.js"></script>
<!-- renderjs -->
<script src="../lib/jschannel.js" type="text/javascript"></script>
<script src="../lib/renderjs.js"></script>
<!-- JIO --> <!-- JIO -->
<script src="../lib/md5.amd.js"></script> <script src="../lib/md5.amd.js"></script>
<script src="../lib/jio.js"></script> <script src="../lib/jio.js"></script>
...@@ -154,5 +75,6 @@ ...@@ -154,5 +75,6 @@
<script src="../lib/erp5storage.js"></script> <script src="../lib/erp5storage.js"></script>
<!-- custom script --> <!-- custom script -->
<script src="../js/erp5_loader.js"></script> <script src="../js/erp5_loader.js"></script>
<script src="../js/gadget_index.js"></script>
</body> </body>
</html> </html>
src/gadget/left_panel.html 0 → 100644
View file @ acde619f
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Nexedi ERP5 | Computers</title>
<!-- TODO: gadget mobile meta -->
<!-- TODO: schema.org? -->
<!-- TODO: all JQM widgets should have enhanced markup vs
letting JQM enhance -->
<!-- normalize -->
<link rel="stylesheet" href="../lib/normalize.css">
<!-- JQM structure -->
<link rel="stylesheet" href="../lib/jquery.mobile.css">
<!-- JQM extensions -->
<link rel="stylesheet" href="../css/extensions.css">
<!-- fontawesome icons -->
<link rel="stylesheet" href="../css/fontawesome.css">
<!-- JQM custom themes (slapos-white, slapos-black, slapos-active) -->
<link rel="stylesheet" href="../css/themes.css">
<!-- generic CSS -->
<link rel="stylesheet" href="../css/css.css">
</head>
<body>
<div class="panel_element panel_element_first panel_header">
<input type="search" data-role="button" value=""
placeholder="Search" class="panel_search" />
<a href="#menu" class="panel-close" data-role="button"
data-iconpos="notext" data-icon="remove"
data-rel="close">Close</a>
</div>
<div class="panel_element">
<!-- gadget modules -->
<ul data-role="listview" class="listview" data-theme="slapos-black">
<li data-role="list-divider">Modules</li>
<li class="listview_item listview_icon">
<a href="webpages.html">
<span
class="ui-li-icon ui-li-icon-custom ui-icon-file-alt ui-icon"
>&nbsp;</span>
<h3>Webpages</h3>
<p>Generated Webpages</p>
</a>
</li>
</ul>
</div>
<div class="panel_element">
<ul data-role="listview" class="listview" data-theme="slapos-black">
<li data-role="list-divider">General</li>
<li class="listview_item listview_icon">
<a href="">
<span class="ui-li-icon ui-li-icon-custom ui-icon-folder-open-alt ui-icon"
>&nbsp;</span>
<h3>Software</h3>
</a>
</li>
<li class="listview_item listview_icon">
<a href="">
<span class="ui-li-icon ui-li-icon-custom ui-icon-book ui-icon"
>&nbsp;</span>
<h3>Documentation</h3>
</a>
</li>
<li class="listview_item listview_icon">
<a href=""><span
class="ui-li-icon ui-li-icon-custom ui-icon-cloud-download ui-icon"
>&nbsp;</span><h3>Download</h3></a></li>
<li class="listview_item listview_icon"><a href=""><span
class="ui-li-icon ui-li-icon-custom ui-icon-comments ui-icon"
>&nbsp;</span><h3>Forum</h3></a></li>
<li class="listview_item listview_icon"><a href=""><span
class="ui-li-icon ui-li-icon-custom ui-icon-microphone ui-icon"
>&nbsp;</span><h3>Blog</h3></a></li>
</ul>
</div>
<div class="panel_element" data-theme="slapos-black">
<ul class="list mini">
<li><a href="http://nexedi.com/">Nexedi &copy; 2013</a></li>
</ul>
</div>
</body>
</html>
src/gadget/popup.html 0 → 100644
View file @ acde619f
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Nexedi ERP5 | Computers</title>
<!-- TODO: gadget mobile meta -->
<!-- TODO: schema.org? -->
<!-- TODO: all JQM widgets should have enhanced markup vs
letting JQM enhance -->
<!-- normalize -->
<link rel="stylesheet" href="../lib/normalize.css">
<!-- JQM structure -->
<link rel="stylesheet" href="../lib/jquery.mobile.css">
<!-- JQM extensions -->
<link rel="stylesheet" href="../css/extensions.css">
<!-- fontawesome icons -->
<link rel="stylesheet" href="../css/fontawesome.css">
<!-- JQM custom themes (slapos-white, slapos-black, slapos-active) -->
<link rel="stylesheet" href="../css/themes.css">
<!-- generic CSS -->
<link rel="stylesheet" href="../css/css.css">
</head>
<body>
<div class="popup_element logo_wrap">
<img src="../img/slapos.png" alt="slapos logo" />
</div>
<div class="popup_element">
<p>Sign in using</p>
<div data-role="controlgroup">
<a href="#" data-role="button" class="signin_google"
data-iconpos="left" data-icon="google-plus-sign">Google</a>
<a href="#" data-role="button" class="signin_fb" data-iconpos="left"
data-icon="facebook-sign">Facebook</a>
</div>
<p>Classic login</p>
<div data-role="controlgroup" data-type="horizontal" class="input_board">
<label class="ui-hidden-accessible">Login</label>
<input name="login" type="text" value="" placeholder="Login"
data-icon="user" />
<label class="ui-hidden-accessible">Password</label>
<input name="password" type="password" value="" placeholder="Password"
data-icon="lock" />
</div>
<span class="mini right note">
<a href="#">Forgot Password</a>
</span>
</div>
<div class="popup_element">
<p class="mini">
<span class="note">Please note:</span>
To maintain sufficient resources, a minimal fee of 1 EUR will be
charged if you use SlapOS services for <strong>more than 24
hours</strong>. By clicking on one of the signup buttons, you
agree that you are subscribing to a payable service. All services
you request will be invoiced to you at the end of the month.
</p>
<p>
To find out more, please refer to
</p>
<a href="pricing.html" data-role="button" data-iconpos="left"
data-icon="euro">SlapOS Pricing</a>
</div>
</body>
</html>
src/js/gadget_index.js 0 → 100644
View file @ acde619f
/*global window, jQuery, rJS */
"use strict";
(function (window, $, rJS, undefined) {
rJS(window).ready(function () {
var g = rJS(this),
footer_context = g.context.find("#footergadget").last(),
header_context = g.context.find("#headergadget").last(),
left_panel_context = g.context.find(".panel").first();
$.when(
g.declareGadget('./header.html', header_context),
g.declareGadget('./left_panel.html', left_panel_context),
g.declareGadget('./footer.html', footer_context)
).done(function (footer_gadget, header_gadget, left_panel_gadget) {
footer_gadget.context.enhanceWithin();
header_gadget.context.enhanceWithin();
left_panel_gadget.context.enhanceWithin();
});
});
}(window, jQuery, rJS));
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7