Publish Vulpes Preview 15 sources for desktop, Android and Tundra
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
This commit is contained in:
OverSu
parent
93e3a48004
commit
b38dea0597
25901 changed files with 9982925 additions and 369 deletions
65
gaia/shared/elements/gaia_overflow_menu/examples/index.html
Executable file
65
gaia/shared/elements/gaia_overflow_menu/examples/index.html
Executable file
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>GaiaOverflowMenu Demo</title>
|
||||
<meta name="description" content="Demo app for gaia-overflow-menu" />
|
||||
<link rel="stylesheet" href="../style/external.css">
|
||||
<style type="text/css">
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 1.6rem;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 1.6rem;
|
||||
padding: 1.6rem;
|
||||
background-color: #00aac5;
|
||||
color: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a:hover, a:active {
|
||||
border: 0.1rem #00aac5 solid;
|
||||
background-color: #fff;
|
||||
color: #00aac5;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<script>window.GaiaOverflowMenuBaseurl = '../';</script>
|
||||
<script src="../../../js/component_utils.js"></script>
|
||||
<script src="../script.js" type="text/javascript"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var inputDir = document.getElementById('dir');
|
||||
inputDir.checked = false;
|
||||
inputDir.onchange = function() {
|
||||
document.documentElement.dir = this.checked ? 'rtl' : 'ltr';
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p dir="ltr">
|
||||
<label class="bb-docs">
|
||||
<input id="dir" type="checkbox"> RTL mode
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<a onclick="document.getElementById('menu').show()">Click me</a>
|
||||
</p>
|
||||
<gaia-overflow-menu id="menu">
|
||||
<button>Option 1</button>
|
||||
<button>Option 2</button>
|
||||
<button>Option 3</button>
|
||||
</gaia-overflow-menu>
|
||||
</body>
|
||||
</html>
|
||||
76
gaia/shared/elements/gaia_overflow_menu/script.js
Executable file
76
gaia/shared/elements/gaia_overflow_menu/script.js
Executable file
|
|
@ -0,0 +1,76 @@
|
|||
'use strict';
|
||||
/* global ComponentUtils */
|
||||
|
||||
window.GaiaOverflowMenu = (function(win) {
|
||||
// Extend from HTMLElement prototype
|
||||
var proto = Object.create(HTMLElement.prototype);
|
||||
|
||||
// Allow baseurl to be overridden (used for demo page)
|
||||
var baseurl = window.GaiaOverflowMenuBaseurl ||
|
||||
'/shared/elements/gaia_overflow_menu/';
|
||||
|
||||
proto.createdCallback = function() {
|
||||
var shadow = this.createShadowRoot();
|
||||
|
||||
this._template = template.content.cloneNode(true);
|
||||
|
||||
shadow.appendChild(this._template);
|
||||
ComponentUtils.style.call(this, baseurl);
|
||||
|
||||
this.addEventListener('click', this);
|
||||
this.addEventListener('animationend', this);
|
||||
this.addEventListener('transitionend', this);
|
||||
|
||||
this.classList.add('hidden');
|
||||
};
|
||||
|
||||
proto.show = function() {
|
||||
// XXX You can't show a hiding overflow menu. We may want to reconsider
|
||||
// this behaviour at some point, or make it optional.
|
||||
if (this.classList.contains('hidden')) {
|
||||
this.classList.remove('hidden');
|
||||
this.classList.add('showing');
|
||||
}
|
||||
};
|
||||
|
||||
proto.hide = function() {
|
||||
// XXX You can't hide a showing overflow menu. We may want to reconsider
|
||||
// this behaviour at some point, or make it optional.
|
||||
if (!this.classList.contains('hidden') &&
|
||||
!this.classList.contains('showing')) {
|
||||
this.classList.add('hiding');
|
||||
}
|
||||
};
|
||||
|
||||
proto.handleEvent = function(evt) {
|
||||
switch(evt.type) {
|
||||
case 'click':
|
||||
evt.preventDefault();
|
||||
this.hide();
|
||||
break;
|
||||
|
||||
case 'transitionend':
|
||||
if (evt.target === this) {
|
||||
if (this.classList.contains('hiding')) {
|
||||
this.classList.remove('hiding');
|
||||
this.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case 'animationend':
|
||||
this.classList.remove('showing');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
var template = document.createElement('template');
|
||||
|
||||
template.innerHTML =
|
||||
`<div>
|
||||
<content select="button"></content>
|
||||
</div>`;
|
||||
|
||||
// Register and return the constructor
|
||||
return document.registerElement('gaia-overflow-menu', { prototype: proto });
|
||||
})(window);
|
||||
103
gaia/shared/elements/gaia_overflow_menu/style.css
Executable file
103
gaia/shared/elements/gaia_overflow_menu/style.css
Executable file
|
|
@ -0,0 +1,103 @@
|
|||
gaia-overflow-menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* Same as titlebar */
|
||||
z-index: 1001;
|
||||
padding: 11.4rem 3rem 0;
|
||||
background-color: rgba(231, 231, 231, 0.6);
|
||||
transition: opacity var(--transition-duration);
|
||||
pointer-events: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
gaia-overflow-menu.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
gaia-overflow-menu.showing {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* XXX Possibly a Gecko bug, if you don't specify this pseudo-element, the
|
||||
* animation set on it below won't re-play subsequent times.
|
||||
*/
|
||||
gaia-overflow-menu::before {
|
||||
content: '';
|
||||
}
|
||||
|
||||
gaia-overflow-menu.showing::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
offset-inline-end: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(231, 231, 231, 0.6);
|
||||
will-change: transform;
|
||||
|
||||
animation-name: grow;
|
||||
animation-duration: var(--transition-duration);
|
||||
}
|
||||
:-moz-dir(ltr) gaia-overflow-menu.showing::before {
|
||||
transform-origin: 100% 0;
|
||||
border-radius: 0 0 0 100%;
|
||||
}
|
||||
:-moz-dir(rtl) gaia-overflow-menu.showing::before {
|
||||
transform-origin: 0 0;
|
||||
border-radius: 0 0 100% 0;
|
||||
}
|
||||
|
||||
gaia-overflow-menu.hiding {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
gaia-overflow-menu.showing > * {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
gaia-overflow-menu button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
background-color: white;
|
||||
border: 0.1rem solid rgba(189, 189, 189, 0.1);
|
||||
border-bottom: none;
|
||||
border-radius: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
padding: 0;
|
||||
background-position: 0.75rem center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
font-size: 1.6rem;
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
color: #00aac5;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
-moz-user-select: none;
|
||||
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
gaia-overflow-menu:-moz-dir(ltr) button {
|
||||
padding-left: 6rem;
|
||||
text-align: left;
|
||||
}
|
||||
gaia-overflow-menu:-moz-dir(rtl) button {
|
||||
padding-right: 6rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
gaia-overflow-menu button:active {
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
|
||||
gaia-overflow-menu button:last-child {
|
||||
border-bottom: 0.1rem solid rgba(189, 189, 189, 0.1);
|
||||
}
|
||||
|
||||
gaia-overflow-menu button[hidden] {
|
||||
display: none;
|
||||
}
|
||||
17
gaia/shared/elements/gaia_overflow_menu/style/external.css
Executable file
17
gaia/shared/elements/gaia_overflow_menu/style/external.css
Executable file
|
|
@ -0,0 +1,17 @@
|
|||
/**
|
||||
Some css properties are global (keyframes) and cannot be specified
|
||||
to to only apply to our shadow dom so we hack around this by including
|
||||
this file without scoping it.
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
Bug 1018269 - we need to specify the keyframe outside
|
||||
of the web component...
|
||||
*/
|
||||
|
||||
@keyframes grow {
|
||||
from { transform: scale(0, 0); }
|
||||
to { transform: scale(2, 2); }
|
||||
}
|
||||
|
||||
Loading…
Reference in a new issue