Skip to content
This repository was archived by the owner on Jan 31, 2018. It is now read-only.

Requesting a pull to mozilla:master from k88hudson:t3368 #1656

Open
k88hudson wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Requesting a pull to mozilla:master from k88hudson:t3368 #1656

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0f9f5fb
[#3368] Better media editor UI
Apr 2, 2013
7e02c5e
[t3368] Added widget stuff
Apr 8, 2013
f94ab48
[t3368] Lint
Apr 8, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions public/css/butter.ui.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
@import "common";

@import "ui-states";
@import "ui-widgets";
@import "buttons";
@import "dialog";

Expand Down
143 changes: 47 additions & 96 deletions public/css/media-editor.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,127 +3,56 @@
*/

.media-editor {

@titleBarHeight: 60px;
@addClipHeight: 165px;
@durationInputHeight: 48px;
@addMediaHeight: 200px;

.butter-editor-body {
top: @titleBarHeight;
bottom: @durationInputHeight
}

.fl-right {
.row,
.padded {
padding: 10px 20px;
}

.fl-right { // Helpers for media icons
margin-top: 8px;
float: right;
}

h1.add-new-media {
height: @titleBarHeight;
line-height: @titleBarHeight;
text-transform: none;
font-weight: normal;
color: #555;
.media-gallery-heading {
Copy link
Contributor

@mjschranz mjschranz Apr 8, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems like we could actually just make this a normal <h1> element now rather than having a div with specific styling because of base styles we have for editors. That is, unless you explicitly want this title smaller than the ones used for say the plugin list or the project editor. If that's the case, why?

background: #FFF;
line-height: 48px;
padding: 0 20px;
border: 0 solid @baseLightOutline;
border-bottom-width: 1px;
border-top-width: 1px;
font-weight: 700;
font-size: 14px;
&:before {
content: "";
background: url( "../resources/icons/media.png" ) no-repeat;
float: left;
height: 26px;
width: 22px;
position: relative;
top: 16px;
left: 3px;
margin-right: 16px;
}
color: @green;
}

.media-editor-inner-wrapper { // Textarea wrappers
position: relative;
overflow: hidden;
margin-bottom: 5px;
&:hover .delete-media-btn {
right: 2px;
}
.add-media-panel {
background: #FFF;
border-bottom: 1px solid @baseLightOutline;
height: @addMediaHeight;
textarea {
font-size: 12px;
font-family: monaco, monospace;
}
}

&.add-media-collapsed {
.add-media-panel {
margin: 0;
height: 0;
opacity: 0;
}
.media-gallery {
top: 0;
}
}

.add-media-panel {
height: @addClipHeight;
.transition( all 0.2s ease );
overflow: hidden;
opacity: 1;
margin: 0 20px;
.tabs {
border-bottom: 1px solid @baseLightOutline;
}

.media-gallery {
position: absolute;
bottom: @durationInputHeight;
top: @addClipHeight + 15px;
top: @addMediaHeight + 1;
bottom: 0;
width: 100%;
margin-top: -1px;

.media-gallery-heading {
background: #FFF;
padding: 15px 20px;
border: 0 solid @baseLightOutline;
border-bottom-width: 1px;
border-top-width: 1px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
position: absolute;
top: 0;
left: 0;
right: 0;
}
}

.media-gallery-base-media.butter-form-inline.form-single {
left: 0;
right: 0;
margin: 0;
padding: 5px 20px;
background: @baseLight;
border-top: 1px solid @baseLightOutline;
> label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
line-height: 22px;
}
> input {
float: right;
}
&.bottom {
bottom: 0;
position: absolute;
}
&.top {
top: 0;
}
}

.media-gallery-scroll-container {
position: absolute;
top: 46px;
left: 0;
right: 0;
bottom: 0;
}
.media-gallery-list {
list-style: none;
padding: 0;
Expand Down Expand Up @@ -258,5 +187,27 @@
margin-right: 10px;
margin-top: 4px;
}

.duration-panel {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 5px 20px;
background: @baseLight;
border-top: 1px solid @baseLightOutline;
> label {
float: left;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
line-height: 22px;
}
> input {
width: 200px;
float: right;
}
}

}

52 changes: 52 additions & 0 deletions public/css/ui-widgets.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
/*********************************************************
* Tabs
*/

.tabs {
list-style: none;
padding: 0;
margin: 0;
background: #EEE;
height: 2.4em;
.clearfix();
> li {
float: left;
height: 100%;
line-height: 2.4em;
border-right: 1px solid @baseLightOutline;
font-size: 0.9em;
color: #999;
padding: 0 1em;
}
}

li[data-tab-control] {
cursor: pointer;
&.tab-on {
background: #FFF;
color: #555;
border-top: 1px solid #FFF;
z-index: 1;
margin-top: -1px;
}
&:hover {
color: #000;
}
}

.tabs.top {
> li {
&.tab-on {
margin-top: 0;
border-bottom: 1px solid #FFF;
border-top: none;
}
}
}

[data-tab] {
display: none;
&.tab-on {
display: block;
}
}
14 changes: 6 additions & 8 deletions public/src/editor/media-gallery-editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,11 @@
* If a copy of the MIT license was not distributed with this file, you can
* obtain one at https://raw.github.com/mozilla/butter/master/LICENSE */

define( [ "util/lang", "util/uri", "util/keys", "util/mediatypes", "editor/editor",
define( [ "util/lang", "util/uri", "util/keys","util/mediatypes", "UI/ui-widgets", "editor/editor",
Copy link
Contributor

@mjschranz mjschranz Apr 8, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change to ui/ui-widgets

Also add a space to before the load of media types.

,"util/mediatypes" -> , "util/mediatypes"

"util/time", "util/dragndrop", "text!layouts/media-editor.html" ],
function( LangUtils, URI, KeysUtils, MediaUtils, Editor, Time, DragNDrop, EDITOR_LAYOUT ) {
function( LangUtils, URI, KeysUtils, MediaUtils, UI, Editor, Time, DragNDrop, EDITOR_LAYOUT ) {

var _parentElement = LangUtils.domFragment( EDITOR_LAYOUT,".media-editor" ),
_addMediaTitle = _parentElement.querySelector( ".add-new-media" ),
_addMediaPanel = _parentElement.querySelector( ".add-media-panel" ),

_urlInput = _addMediaPanel.querySelector( ".add-media-input" ),
Expand All @@ -31,10 +30,6 @@ define( [ "util/lang", "util/uri", "util/keys", "util/mediatypes", "editor/edito
_this,
TRANSITION_TIME = 2000;

function toggleAddNewMediaPanel() {
_parentElement.classList.toggle( "add-media-collapsed" );
}

function resetInput() {
_urlInput.value = "";

Expand Down Expand Up @@ -266,7 +261,6 @@ define( [ "util/lang", "util/uri", "util/keys", "util/mediatypes", "editor/edito
}

function setup() {
_addMediaTitle.addEventListener( "click", toggleAddNewMediaPanel, false );

_urlInput.addEventListener( "focus", onFocus, false );
_urlInput.addEventListener( "input", onInput, false );
Expand All @@ -276,6 +270,10 @@ define( [ "util/lang", "util/uri", "util/keys", "util/mediatypes", "editor/edito

_durationInput.addEventListener( "keydown", onDurationChange, false );
_durationInput.addEventListener( "blur", onBlur, false );

UI.tabs({
element: _addMediaPanel
});
}

function onDurationChange( e ) {
Expand Down
64 changes: 33 additions & 31 deletions public/src/layouts/media-editor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,42 @@
<div class="media-editor butter-editor fadable alternates-hidden allow-scrollbar">
<h1 class="add-new-media">Create new media clip</h1>
<div class="media-gallery-heading">Media Gallery</div>
<div class="butter-editor-body">
<fieldset class="add-media-panel">
<div class="media-editor-inner-wrapper primary-media-wrapper">
<p>
<span class="fl-right">
<span class="media-icon youtube-icon"></span>
<span class="media-icon vimeo-icon"></span>
<span class="media-icon soundcloud-icon"></span>
<span class="media-icon html5-icon"></span>
<div class="add-media-panel">
<ul class="tabs top">
<li class="add-media-title">+ Add</li>
<li data-tab-control="url" class="tab-on" data-tab-default>URL</li>
<li data-tab-control="webcam">Webcam</li>
</ul>
<div class="tab-container">
<div data-tab="url" class="padded">
<label>
<span class="fl-right">
<span class="media-icon youtube-icon"></span>
<span class="media-icon vimeo-icon"></span>
<span class="media-icon soundcloud-icon"></span>
<span class="media-icon html5-icon"></span>
</span>
Paste a link from YouTube, SoundCloud, Vimeo or an HTML5 video
</label>
<textarea class="add-media-input" placeholder="Paste an HTML5, YouTube, Vimeo, or SoundCloud link here"></textarea>
<span class="butter-btn-slide-out">
<a class="add-media-btn butter-btn btn-green hidden">Create clip</a>
<span class="media-loading-spinner butter-spinner hidden" ></span>
<label class="media-error-message hidden"></label>
</span>
Paste a link from YouTube, SoundCloud, Vimeo or an HTML5 video
</p>
<textarea class="add-media-input" placeholder="Paste an HTML5, YouTube, Vimeo, or SoundCloud link here"></textarea>
<span class="butter-btn-slide-out">
<a class="add-media-btn butter-btn btn-green hidden">Create clip</a>
<span class="media-loading-spinner butter-spinner hidden" ></span>
<label class="media-error-message hidden"></label>
</span>
</div>
<div data-tab="webcam">Webcam</div>
</div>
</fieldset>

<div class="media-gallery">
<div class="media-gallery-heading">
Media Gallery
</div>
<div class="media-gallery-scroll-container scrollbar-container">
<ul class="media-gallery-list scrollbar-outer scrollbar-inner"></ul>
</div><!-- add-media-panel -->
Copy link
Contributor

@mjschranz mjschranz Apr 8, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why the comment here? If anything it should be above the div.

<div class="media-gallery scrollbar-container">
<div class="scrollbar-outer scrollbar-inner">
<ul class="media-gallery-list"></ul>
</div>
</div>

<fieldset class="media-gallery-base-media butter-form-inline form-single bottom">
<label>Duration</label>
<input type="text" class="media-base-duration" value="">
</fieldset>

</div>
<div class="row duration-panel">
<label>Duration</label>
<input type="text" class="media-base-duration" value="">
</div>
</div>

Expand Down
Loading