0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

update css (collapse panel extras, video editor bars, video find element)

Browse source
This commit is contained in:
rlx 2011-11-03 12:14:18 +00:00
parent fea1eed168
commit b056a22172
3 changed files with 80 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
source/Ox.UI/css/Ox.UI.css
View file

@ -1630,9 +1630,15 @@ Panels
height: 16px; height: 16px;
padding: 1px 1px 0 0; padding: 1px 1px 0 0;
border-width: 0; border-width: 0;
background: rgba(0, 0, 0, 0);
border-radius: 0; border-radius: 0;
background: rgba(0, 0, 0, 0);
} }
.OxCollapsePanel > .OxBar > .OxExtras > .OxSelect.OxFocus {
-moz-box-shadow: 0 0 0;
-o-box-shadow: 0 0 0;
-webkit-box-shadow: 0 0 0;
}
.OxCollapsePanel > .OxContent { .OxCollapsePanel > .OxContent {
position: relative; position: relative;
@ -2046,11 +2052,24 @@ Video
} }
.OxVideoPlayer input.OxInput { .OxVideoPlayer input.OxInput {
height: 16px; height: 16px;
padding: 0 3px 0 3px; //padding: 0 4px 0 4px;
border: 0; border: 0;
border-radius: 8px; border-radius: 8px;
} }
.OxVideoPlayer .OxPositionInput > input.OxInput {
padding: 0 3px 0 3px;
}
.OxVideoPlayer .OxSelect {
width: 16px;
height: 16px;
border-width: 0;
border-radius: 0;
background: rgba(0, 0, 0, 0);
}
.OxVideoPlayer .OxSelect > .OxButton {
margin: 0;
}
.OxVideoPlayer .OxCopyrightIcon { .OxVideoPlayer .OxCopyrightIcon {

114
source/Ox.UI/js/Video/Ox.VideoEditor.js
View file

@ -31,6 +31,7 @@ Ox.VideoEditor = function(options, self) {
out: 0, out: 0,
position: 0, position: 0,
posterFrame: 0, posterFrame: 0,
posterFrameControls: false,
showAnnotations: false, showAnnotations: false,
showLargeTimeline: true, showLargeTimeline: true,
subtitles: [], subtitles: [],
@ -312,7 +313,7 @@ Ox.VideoEditor = function(options, self) {
); );
}); });
self.$keyboardShortcuts = $('<div>'); self.$keyboardShortcuts = $('<div>').css({margin: '16px'});
[ [
{key: Ox.UI.symbols.space, action: 'Play/Pause'}, {key: Ox.UI.symbols.space, action: 'Play/Pause'},
{key: 'P', action: 'Play In to Out'}, {key: 'P', action: 'Play In to Out'},
@ -373,20 +374,18 @@ Ox.VideoEditor = function(options, self) {
self.resolutions, self.resolutions,
[ [
{}, {},
{id: 'largeTimeline', title: 'Hide Large Timeline'}, {id: 'largeTimeline', title: 'Hide Large Timeline', disabled: true},
{id: 'subtitlesTimeline', title: 'Hide Subtitles on Large Timeline'}, {id: 'subtitlesTimeline', title: 'Hide Subtitles on Large Timeline', disabled: true},
{}, {},
{id: 'linkSelection', title: 'Link to Selection...'}, {id: 'downloadVideo', title: 'Download Video...', disabled: true},
{id: 'embed', title: 'Embed Selection...'}, {id: 'downloadSelection', title: 'Download Selection...', disabled: true},
{id: 'downloadSelection', title: 'Download Selection...'}, {id: 'embedSelection', title: 'Embed Selection...', disabled: true},
{}, {},
{id: 'keyboard', title: 'Keyboard Shortcuts...', keyboard: 'h'} {id: 'keyboard', title: 'Keyboard Shortcuts...', keyboard: 'h'}
] ]
), ),
selectable: false, selectable: false,
title: $('<img>').attr({ title: 'set',
src: Ox.UI.getImageURL('symbolSet')
}),
tooltip: 'Actions and Settings', tooltip: 'Actions and Settings',
type: 'image' type: 'image'
}) })
@ -442,56 +441,57 @@ Ox.VideoEditor = function(options, self) {
}); });
//.appendTo(self.$videobar); //.appendTo(self.$videobar);
if (self.options.posterFrameControls) {
//$('<div>').css({float: 'left', width: '8px', height: '1px'}).appendTo(self.$videobar.$element); self.$goToPosterButton = Ox.Button({
style: 'symbol',
title: 'goToPoster',
tooltip: 'Go to Poster Frame',
type: 'image'
})
.css({float: 'left'})
.bindEvent({
click: function() {
setPosition(self.options.posterFrame);
}
})
.appendTo(self.$videobar);
self.$goToPosterButton = Ox.Button({ self.$setPosterButton = Ox.Button({
style: 'symbol', disabled: true,
title: 'goToPoster', style: 'symbol',
tooltip: 'Go to Poster Frame', title: 'setPoster',
type: 'image' tooltip: 'Set Poster Frame',
}) type: 'image'
.css({float: 'left'}) })
.bindEvent({ .css({float: 'left'})
click: function() { .bindEvent({
setPosition(self.options.posterFrame); click: function() {
} self.$goToPosterButton.toggleDisabled();
}) self.$setPosterButton.toggleDisabled();
.appendTo(self.$videobar); self.$unlockPosterButton.toggleTitle();
}
})
.appendTo(self.$videobar);
self.$setPosterButton = Ox.Button({ self.$unlockPosterButton = Ox.Button({
disabled: true, style: 'symbol',
style: 'symbol', title: [
title: 'setPoster', {id: 'lock', title: 'lock'},
tooltip: 'Set Poster Frame', {id: 'unlock', title: 'unlock', selected: true}
type: 'image' ],
}) tooltip: ['Lock Poster Frame', 'Unlock Poster Frame'],
.css({float: 'left'}) type: 'image'
.bindEvent({ })
click: function() { .css({float: 'left'})
self.$goToPosterButton.toggleDisabled(); .bindEvent({
self.$setPosterButton.toggleDisabled(); click: function() {
self.$unlockPosterButton.toggleTitle(); self.$setPosterButton.toggleDisabled();
} }
}) })
.appendTo(self.$videobar); .appendTo(self.$videobar);
self.$unlockPosterButton = Ox.Button({ }
style: 'symbol',
title: [
{id: 'lock', title: 'lock'},
{id: 'unlock', title: 'unlock', selected: true}
],
tooltip: ['Lock Poster Frame', 'Unlock Poster Frame'],
type: 'image'
})
.css({float: 'left'})
.bindEvent({
click: function() {
self.$setPosterButton.toggleDisabled();
}
})
.appendTo(self.$videobar);
self.$clearButton = Ox.Button({ self.$clearButton = Ox.Button({
disabled: self.options.find === '', disabled: self.options.find === '',
@ -601,9 +601,7 @@ Ox.VideoEditor = function(options, self) {
], ],
max: 2, max: 2,
title: $('<img>').attr({ title: 'set',
src: Ox.UI.getImageURL('symbolSet')
}),
tooltip: 'Actions and Settings', tooltip: 'Actions and Settings',
type: 'image' type: 'image'
}) })

6
source/Ox.UI/js/Video/Ox.VideoPlayer.js
View file

@ -1150,7 +1150,7 @@ Ox.VideoPlayer = function(options, self) {
}; };
} else if (element == 'find') { } else if (element == 'find') {
css = { css = {
width: Math.min(216, self.width) + 'px' width: Math.min(216, self.width) + 'px' // 128 + 4 * 16 + 24
}; };
} else if (element == 'loadingIcon') { } else if (element == 'loadingIcon') {
css = { css = {
@ -1825,12 +1825,12 @@ Ox.VideoPlayer = function(options, self) {
}); });
setSize(self.$spaceBottom, getCSS('spaceBottom'), animate); setSize(self.$spaceBottom, getCSS('spaceBottom'), animate);
setSize(self.$find, getCSS('find'), animate, function() { setSize(self.$find, getCSS('find'), animate, function() {
var width = Math.min(128, self.width - 88); var width = Math.min(128, self.width - 88); // 4 * 16 + 24
self.$findInput.options({ self.$findInput.options({
width: width width: width
}); });
self.$findInput.children('input').css({ self.$findInput.children('input').css({
width: (width - 6) + 'px', width: (width - 12) + 'px',
}); });
}); });
setSize(self.$volume, getCSS('volume'), animate, function() { setSize(self.$volume, getCSS('volume'), animate, function() {