diff --git a/public/css/butter.ui.less b/public/css/butter.ui.less index 13a7c4811..7f1794eb7 100644 --- a/public/css/butter.ui.less +++ b/public/css/butter.ui.less @@ -10,6 +10,7 @@ @import "common"; @import "ui-states"; +@import "ui-widgets"; @import "buttons"; @import "dialog"; diff --git a/public/css/media-editor.less b/public/css/media-editor.less index 7a8155b0d..caceb2139 100644 --- a/public/css/media-editor.less +++ b/public/css/media-editor.less @@ -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 { + 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; @@ -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; + } + } + } diff --git a/public/css/ui-widgets.less b/public/css/ui-widgets.less new file mode 100644 index 000000000..7d8c42cd3 --- /dev/null +++ b/public/css/ui-widgets.less @@ -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; + } +} diff --git a/public/src/editor/media-gallery-editor.js b/public/src/editor/media-gallery-editor.js index 9d7eb1dfc..72770a800 100644 --- a/public/src/editor/media-gallery-editor.js +++ b/public/src/editor/media-gallery-editor.js @@ -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", "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" ), @@ -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 = ""; @@ -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 ); @@ -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 ) { diff --git a/public/src/layouts/media-editor.html b/public/src/layouts/media-editor.html index 16f69f07d..63aee817d 100644 --- a/public/src/layouts/media-editor.html +++ b/public/src/layouts/media-editor.html @@ -1,40 +1,42 @@
-

Create new media clip

+
Media Gallery
-
-
-

- - - - - +

+
    +
  • + Add
    • +
  • URL
    • +
  • Webcam
    • +
+
+
+ + + + + + - Paste a link from YouTube, SoundCloud, Vimeo or an HTML5 video -

- - - - - - +
+
Webcam
-
- -
-
- Media Gallery -
-
-
    +
    +
    +
    +
      - -
      - - -
      - +
      +
      + +
      diff --git a/public/src/ui/ui-widgets.js b/public/src/ui/ui-widgets.js new file mode 100644 index 000000000..6f6cb0779 --- /dev/null +++ b/public/src/ui/ui-widgets.js @@ -0,0 +1,52 @@ +define([], function() { + return { + tabs: function( options ) { + var element, + onUpdate; + + if ( options instanceof HTMLElement ) { + // You can pass it an element or a list of options + element = options; + options = {}; + } else { + options = options || {}; + element = options.element; + } + onUpdate = options.onUpdate || function(){}; + + var controls = element.querySelectorAll( "[data-tab-control]" ), + panels = element.querySelectorAll( "[data-tab]" ), + i; + + function onClick( e ) { + var whichTab = this.getAttribute( "data-tab-control" ), + j; + + e.preventDefault(); + + for ( j = 0; j < controls.length; j++ ) { + controls[ j ].classList.remove( "tab-on" ); + } + this.classList.add( "tab-on" ); + + if ( !whichTab ) { + return; + } + + for ( j = 0; j < panels.length; j++ ) { + panels[ j ].classList.remove( "tab-on" ); + } + element.querySelector( "[data-tab=\"" + whichTab + "\"]" ).classList.add( "tab-on" ); + onUpdate(); + } + + for ( i = 0; i < controls.length; i++ ) { + controls[ i ].addEventListener( "click", onClick, false ); + var whichTab = controls[ i ].getAttribute( "data-tab-control" ); + if ( controls[ i ].hasAttribute( "data-tab-default" ) ) { + element.querySelector( "[data-tab=\"" + whichTab + "\"]" ).classList.add( "tab-on" ); + } + } + } + }; + });