Skip to content
This repository has been archived by the owner on Nov 3, 2021. It is now read-only.

Commit

Permalink
Bug 1132996 - fixing the markup order based on presentation order.
Browse files Browse the repository at this point in the history
  • Loading branch information
@yzen @rvandermeulen
yzen authored and rvandermeulen committed Feb 19, 2015
1 parent 35edbcd commit 6033382
Show file tree
Hide file tree
Showing 6 changed files with 76 additions and 67 deletions.
26 changes: 12 additions & 14 deletions apps/video/index.html
View file
Expand Up @@ -53,24 +53,25 @@
<body role="application" class="skin-dark theme-media">
<div id="app-container">
<div id="two-column-spearator"></div>
<section role="region" id="thumbnail-list-view">
<gaia-header id="picker-header" action="back">
<section role="region" id="thumbnail-views">
<gaia-header id="picker-header" action="back" class="thumbnails-list">
<h1 id="picker-title" data-l10n-id="pick-title"></h1>
<h1 id="thumbnail-list-title">Video</h1>
</gaia-header>
<gaia-header id="thumbnails-select-top" action="close"
class="thumbnails-select">
<h1 id="thumbnails-number-selected"></h1>
</gaia-header>

<footer id="thumbnails-bottom">
<!-- This element gets positioned over different view elements -->
<!-- It gets styled differently depending on what it is over -->
<ul id="thumbnails"></ul> <!-- Thumbnails inserted here -->

<footer id="thumbnails-bottom" class="thumbnails-list">
<a id="thumbnails-video-button" class="button" data-icon="video"></a>
<a id="thumbnails-select-button" class="button" data-icon="select"></a>
</footer>
</section>

<section role="region" id="thumbnail-select-view" class="skin-dark">
<gaia-header id="thumbnails-select-top" action="close">
<h1 id="thumbnails-number-selected"></h1>
</gaia-header>

<footer id="thumbnails-select-bottom">
<footer id="thumbnails-select-bottom" class="thumbnails-select">
<a id="thumbnails-delete-button" class="button" data-icon="delete"></a>
<a id="thumbnails-share-button" class="button" data-icon="share"></a>
</footer>
Expand Down Expand Up @@ -148,9 +149,6 @@ <h1 id="video-title"></h1>
</menu>
</form>

<!-- This element gets positioned over different view elements -->
<!-- It gets styled differently depending on what it is over -->
<ul id="thumbnails"></ul> <!-- Thumbnails inserted here -->
<!-- This element is the template of each thumbnail item -->
<div id="thumbnail-group-header" class="hidden">
<!--
Expand Down
35 changes: 17 additions & 18 deletions apps/video/js/video.js
View file
Expand Up @@ -12,23 +12,22 @@ const LAYOUT_MODE = {

var dom = {};

var ids = ['thumbnail-list-view', 'thumbnails-bottom', 'thumbnail-list-title',
'thumbnails', 'thumbnails-video-button', 'thumbnails-select-button',
'thumbnail-select-view',
'thumbnails-delete-button', 'thumbnails-share-button',
'thumbnails-select-top', 'thumbnails-number-selected',
'player-view', 'fullscreen-button', 'spinner-overlay',
'thumbnails-single-delete-button', 'thumbnails-single-share-button',
'thumbnails-single-info-button', 'info-view', 'info-close-button',
'player', 'overlay', 'overlay-title', 'overlay-text',
'overlay-menu', 'overlay-action-button', 'player-header',
'video-container', 'videoControls', 'videoBar', 'videoControlBar',
'close', 'play', 'playHead', 'timeSlider', 'elapsedTime',
'video-title', 'duration-text', 'elapsed-text', 'bufferedTime',
'slider-wrapper', 'throbber', 'picker-close', 'picker-title',
'picker-header', 'picker-done', 'options', 'options-view',
'options-cancel-button', 'seek-backward', 'seek-forward',
'in-use-overlay', 'in-use-overlay-title', 'in-use-overlay-text'];
var ids = ['thumbnail-list-title', 'thumbnails', 'thumbnails-video-button',
'thumbnails-select-button', 'thumbnails-delete-button',
'thumbnails-share-button', 'thumbnails-select-top',
'thumbnails-number-selected', 'player-view', 'fullscreen-button',
'spinner-overlay', 'thumbnails-single-delete-button',
'thumbnails-single-share-button', 'thumbnails-single-info-button',
'info-view', 'info-close-button', 'player', 'overlay',
'overlay-title', 'overlay-text', 'overlay-menu',
'overlay-action-button', 'player-header', 'video-container',
'videoControls', 'videoBar', 'videoControlBar', 'close', 'play',
'playHead', 'timeSlider', 'elapsedTime', 'video-title',
'duration-text', 'elapsed-text', 'bufferedTime', 'slider-wrapper',
'throbber', 'picker-close', 'picker-title', 'picker-header',
'picker-done', 'options', 'options-view', 'options-cancel-button',
'seek-backward', 'seek-forward', 'in-use-overlay',
'in-use-overlay-title', 'in-use-overlay-text'];

ids.forEach(function createElementRef(name) {
dom[toCamelCase(name)] = document.getElementById(name);
Expand All @@ -50,7 +49,7 @@ var endedTimer;
var controlShowing = false;
var controlFadeTimeout = null;

// In thumbnailSelectView, we allow the user to select thumbnails.
// In thumbnails select view, we allow the user to select thumbnails.
// These variables hold the names of the selected files, and map those
// names to the corresponding File objects
var selectedFileNames = [];
Expand Down
26 changes: 10 additions & 16 deletions apps/video/style/video.css
View file
Expand Up @@ -104,7 +104,7 @@ span.line-break {
}

/* All of the main views fill the screen */
#thumbnail-list-view, #thumbnail-select-view, #player-view {
#thumbnail-views, #player-view {
position: absolute;
top: 0;
left: 0;
Expand Down Expand Up @@ -188,13 +188,13 @@ span.line-break {
/*
* give the very last thumbnail a large bottom margin so that it doesn't
* get stuck hidden behind the overlaid toolbar.
* for normal thumbnail-list-view case, it is 4rem at bottom.
* for normal thumbnails-list case, it is 4rem at bottom.
*/
#thumbnails>li:last-child{
margin-bottom: 4rem;
}
/*
* for normal thumbnail-select-view case, it is 5rem at top and 4rem at bottom.
* for normal thumbnails-select case, it is 5rem at top and 4rem at bottom.
*/
#thumbnails.select>li:last-child{
margin-bottom: 9rem;
Expand Down Expand Up @@ -726,21 +726,15 @@ body.pick-activity #thumbnails-bottom {
display: none !important; /* 1 */
}

/* selection mode */
.layout-selection #thumbnail-list-view,
.layout-selection #player-view {
display: none;
}

/* list mode */
.layout-list #thumbnail-select-view,
.layout-list #player-view {
display: none;
/* not selection mode */
body:not(.layout-selection) .thumbnails-select,
/* not list mode */
body:not(.layout-list) .thumbnails-list,
/* not fullscreen-player mode */
body:not(.layout-fullscreen-player) #player-view {
display: none !important; /* 1 */
}

/* fullscreen-player mode */
.layout-fullscreen-player #thumbnail-select-view,
.layout-fullscreen-player #thumbnail-list-view,
.layout-fullscreen-player #thumbnails {
display: none;
}
Expand Down
48 changes: 33 additions & 15 deletions apps/video/style/video_tablet.css
View file
Expand Up @@ -19,7 +19,7 @@ body {
* change when we get `:host` and `:content` selectors
* in shadow-dom.
*/
body:not(.pick-activity) #thumbnail-list-view gaia-header,
body:not(.pick-activity) gaia-header.thumbnails-list,
#thumbnail-list-title {
display: inherit !important; /* 1 */
}
Expand Down Expand Up @@ -211,8 +211,8 @@ footer {
margin-bottom: 1rem;
}

.layout-selection #thumbnail-select-view,
.layout-list #thumbnail-list-view {
.layout-selection .thumbnails-select,
.layout-list .thumbnails-list {
display: block;
}

Expand All @@ -238,7 +238,10 @@ body.pick-activity .single-info-button {
@media (orientation: landscape) {

/* panels of selection mode */
.layout-selection #thumbnail-list-view,
.layout-selection .thumbnails-list {
display: none !important; /* 1 */
}

.layout-selection #switch-fullscreen,
.layout-selection #player-view > *,
.layout-selection .single-delete-button,
Expand All @@ -258,7 +261,10 @@ body.pick-activity .single-info-button {
display: block;
}

.layout-list #thumbnail-select-view,
.layout-list .thumbnails-select {
display: none !important; /* 1 */
}

.layout-list #switch-fullscreen,
.layout-list #videoControls #videoActionBar,
.layout-list #videoControls #close,
Expand All @@ -273,16 +279,19 @@ body.pick-activity .single-info-button {
display: block;
}

.layout-fullscreen-player #thumbnail-select-view,
.layout-fullscreen-player #thumbnail-list-view,
.layout-fullscreen-player .thumbnails-list,
.layout-fullscreen-player .thumbnails-select {
display: none !important; /* 1 */
}

.layout-fullscreen-player #thumbnails,
.layout-fullscreen-player #videoControls #videoActionBar {
display: none;
}

/* left pane size */
#thumbnail-select-view,
#thumbnail-list-view,
.thumbnails-select,
.thumbnails-list,
#thumbnails {
left: 0;
width: 40rem;
Expand Down Expand Up @@ -461,8 +470,8 @@ body.pick-activity .single-info-button {
}

/* left pane size */
body.pick-activity #thumbnail-select-view,
body.pick-activity #thumbnail-list-view,
body.pick-activity .thumbnails-select,
body.pick-activity .thumbnails-list,
body.pick-activity #thumbnails {
left: 0;
width: 100%;
Expand Down Expand Up @@ -547,20 +556,29 @@ body.pick-activity .single-info-button {
}

/* selection mode */
.layout-selection #thumbnail-list-view,
.layout-selection .thumbnails-list {
display: none !important; /* 1 */
}

.layout-selection #player-view {
display: none;
}

/* list mode */
.layout-list #thumbnail-select-view,
.layout-list .thumbnails-select {
display: none !important; /* 1 */
}

.layout-list #player-view {
display: none;
}

/* player mode / fullscreen-player mode */
.layout-fullscreen-player #thumbnail-select-view,
.layout-fullscreen-player #thumbnail-list-view,
.layout-fullscreen-player .thumbnails-select,
.layout-fullscreen-player .thumbnails-list {
display: none !important; /* 1 */
}

.layout-fullscreen-player #thumbnails,
.layout-fullscreen-player #videoControls #videoActionBar {
display: none;
Expand Down
4 changes: 2 additions & 2 deletions apps/video/test/marionette/lib/video.js
View file
Expand Up @@ -30,7 +30,7 @@ Video.Selector = Object.freeze({
videoControls: '#videoControls',
overlay: '#overlay',
thumbnailsSelectButton: '#thumbnails-select-button',
thumbnailSelectView: '#thumbnail-select-view',
thumbnailSelectTop: '#thumbnail-select-top',
thumbnailsShareButton: '#thumbnails-share-button',
thumbnailsVideoButton: '#thumbnails-video-button',
thumbnailsDeleteButton: '#thumbnails-delete-button',
Expand Down Expand Up @@ -159,7 +159,7 @@ Video.prototype = {
enterSelectionMode: function() {
this.client.helper.waitForElement(Video.Selector.thumbnailsSelectButton)
.click();
this.client.helper.waitForElement(Video.Selector.thumbnailSelectView);
this.client.helper.waitForElement(Video.Selector.thumbnailSelectTop);
},

/**
Expand Down
4 changes: 2 additions & 2 deletions build/csslint/xfail.list
View file
Expand Up @@ -60,8 +60,8 @@ apps/system/style/system/system.css 0 2
apps/system/style/window.css 0 3
apps/system/style/zindex.css 0 4
apps/video/style/info.css 0 2
apps/video/style/video.css 0 8
apps/video/style/video_tablet.css 0 4
apps/video/style/video.css 0 9
apps/video/style/video_tablet.css 0 11
apps/wappush/style/wappush.css 0 1
apps/search/style/search.css 0 2
shared/elements/gaia_grid/style.css 0 5
Expand Down

0 comments on commit 6033382

Please sign in to comment.