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

Bug 1132996 - fixing the markup order based on presentation order. #28272

Merged
merged 1 commit into from
Feb 18, 2015
Merged

Bug 1132996 - fixing the markup order based on presentation order. #28272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
26 changes: 12 additions & 14 deletions apps/video/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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 @@ -738,21 +738,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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,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