From a10078260a73ae0de2b7a1544fb3931387756681 Mon Sep 17 00:00:00 2001 From: Steven Miers Date: Sun, 1 Feb 2015 17:14:22 -0600 Subject: [PATCH] VRFS-2722 : Styling and logic necessary to display long labels on backing and other tracks. --- web/app/assets/javascripts/fakeJamClient.js | 4 +-- web/app/assets/javascripts/session.js | 27 ++++++++++++------ .../stylesheets/client/session.css.scss | 28 +++++++++++++------ web/app/views/clients/_session.html.slim | 3 +- 4 files changed, 41 insertions(+), 21 deletions(-) diff --git a/web/app/assets/javascripts/fakeJamClient.js b/web/app/assets/javascripts/fakeJamClient.js index 406e4b7b0..45fb1299e 100644 --- a/web/app/assets/javascripts/fakeJamClient.js +++ b/web/app/assets/javascripts/fakeJamClient.js @@ -787,8 +787,8 @@ function getBackingTrackList() { return {backing_tracks: [ - {name:"foobar.mp3", size:4283}, - {name:"foo.mp3",size:3257} + {name:"This is a really long name for a song dude.mp3", size:4283}, + {name:"foo.mp3",size:325783838} ]}; } diff --git a/web/app/assets/javascripts/session.js b/web/app/assets/javascripts/session.js index c6f8ae71c..2477cdf7d 100644 --- a/web/app/assets/javascripts/session.js +++ b/web/app/assets/javascripts/session.js @@ -515,12 +515,21 @@ if ($('.session-livetracks .track').length === 0) { $('.session-livetracks .when-empty').show(); } + if ($('.session-recordings .track').length === 0) { $('.session-recordings .when-empty').show(); $('.session-recording-name-wrapper').hide(); $('.session-recordings .recording-controls').hide(); + } else { + $('.session-recordings .when-empty').hide(); + $('.session-recording-name-wrapper').show(); + $('.session-recordings .recording-controls').show(); } - } + + // Handle long labels: + $(".track-label").dotdotdot() + $(".session-recording-name").dotdotdot() + } // renderSession function _initDialogs() { configureTrackDialog.initialize(); @@ -877,13 +886,17 @@ if(adhocTrackMixers.length > 0) { logger.warn("some tracks are open that we don't know how to show") } + + } function renderBackingTracks(backingTrackMixers) { var backingTrack = sessionModel.backingTrack() var backingTrackPath = backingTrack ? backingTrack.path : null - + var name = backingTrackPath + console.log("Opening backing track ", backingTrackPath, backingTrack) + // pluck the 1st mixer, and assume that all other mixers in this group are of the same type (between JamTrack vs Peer) // if it's a locally opened track (MediaTrackGroup), then we can say this person is the opener var isOpener = backingTrackMixers[0].group_id == ChannelGroupIds.MediaTrackGroup; @@ -892,10 +905,9 @@ // using the server's info in conjuction with the client's, draw the recording tracks if(backingTrackPath && backingTrackMixers.length > 0) { var backingTrack = {path: backingTrackPath} - var name = sessionModel.getCurrentSession().backing_track_path + //backingTrackPath sessionModel.getCurrentSession().backing_track_path $('.session-recording-name').text(name); - var noCorrespondingTracks = false; var mixer = backingTrackMixers[0] var preMasteredClass = ""; @@ -1119,7 +1131,7 @@ var trackData = { trackId: "MS" + oneOfTheTracks.id, clientId: oneOfTheTracks.client_id, - name: "Volume & Sound", + name: "Metronome", instrumentIcon: photoUrl, avatar: instrumentIcon, latency: "good", @@ -1662,10 +1674,7 @@ function _addRecordingTrack(trackData) { var parentSelector = '#session-recordedtracks-container'; var $destination = $(parentSelector); - $('.session-recordings .when-empty').hide(); - $('.session-recording-name-wrapper').show(); - $('.session-recordings .recording-controls').show(); - + var template = $('#template-session-track').html(); var newTrack = $(context.JK.fillTemplate(template, trackData)); $destination.append(newTrack); diff --git a/web/app/assets/stylesheets/client/session.css.scss b/web/app/assets/stylesheets/client/session.css.scss index a037f7e19..6c3823b6f 100644 --- a/web/app/assets/stylesheets/client/session.css.scss +++ b/web/app/assets/stylesheets/client/session.css.scss @@ -119,8 +119,21 @@ .session-recording-name-wrapper{ position:relative; - white-space:nowrap; - display:none; + white-space:normal; + display:none; + + .session-recording-name { + position:relative; + margin-top:9px; + margin-bottom:8px; + font-size:16px; + height: 22px; + min-height: 22px; + max-height: 22px; + display: inline-block; + width:60%; + text-overflow:ellipsis; + } .session-add { margin-top:9px; @@ -135,13 +148,6 @@ } } - .session-recording-name { - width:60%; - overflow:hidden; - margin-top:9px; - margin-bottom:8px; - font-size:16px; - } } @@ -210,6 +216,9 @@ table.vu td { position: absolute; text-align:center; width: 55px; + height: 15px; + min-height: 11px; + max-height: 33px; max-width: 55px; white-space:normal; top: 3px; @@ -217,6 +226,7 @@ table.vu td { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; + text-overflow:ellipsis; } .track-close { diff --git a/web/app/views/clients/_session.html.slim b/web/app/views/clients/_session.html.slim index 19e33b0b9..a096216a9 100644 --- a/web/app/views/clients/_session.html.slim +++ b/web/app/views/clients/_session.html.slim @@ -108,7 +108,8 @@ script#template-session-track[type="text/template"] .session-track.track client-id="{clientId}" track-id="{trackId}" .track-vu-left.mixer-id="{vuMixerId}_vul" .track-vu-right.mixer-id="{vuMixerId}_vur" - .track-label="{name}" + .track-label + span.name-text="{name}" #div-track-close.track-close.op30 track-id="{trackId}" =image_tag("content/icon_closetrack.png", {width: 12, height: 12}) div class="{avatarClass}"