Skip to content

Commit

Permalink
Merge pull request binford2k#369 from marrero984/new_sidebar
Browse files Browse the repository at this point in the history 
New sidebar
  • Loading branch information
@binford2k
binford2k committed Dec 16, 2015
2 parents 62fc974 + 6a53325 commit f5e5398
Show file tree
Hide file tree
Showing 8 changed files with 162 additions and 105 deletions.
Binary file removed public/css/fast.png
View file
Binary file not shown.
Binary file removed public/css/grippy-close.png
View file
Binary file not shown.
Binary file removed public/css/grippy.png
View file
Binary file not shown.
99 changes: 56 additions & 43 deletions public/css/showoff.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -351,75 +351,88 @@ img#disconnected {
/**********************************
*** Sidebar styling ***
**********************************/

#feedbackWrapper {
float: left;
height: 100%;
#hamburger {
position: fixed;
background-color: #dfdfdf;
opacity: 0.98;
z-index: 2147483647; /* max, see http://www.puidokas.com/max-z-index/ */
padding: 4px 8px;
opacity: .2;
border-radius: .1em;
transition: all .2s;
z-index: 2147483647;
float: left;
}

#feedbackSidebar {
height: 100%;
width: 200px;
font-size: .75em;
background: transparent url(grippy-close.png) no-repeat right center;
display: none;
#hamburger:hover {
opacity: 1;
background-color: #1abc9c;
color: #ffffff;
}

#feedbackSidebar img#feedbackActivity {
position: absolute;
right: 3px;
top: 3px;
#feedbackSidebar,
.submenu {
display: none;
}

#feedbackHandle {
.sideMenu {
position: absolute;
height: 100%;
width: 9px;
background: transparent url(grippy.png) no-repeat center;
width: 240px;
padding-top: 24px;
background-color: #f2f2f2;
box-shadow:0 0 25px rgba(0,0,0,0.35);
overflow: auto;
z-index: 2147483647;
}

#feedbackSidebar div.row {
.sideMenu textarea {
min-height: 80px;
width: 90%;
margin: 8px;
border-color: #dddddd;
border-radius: .3em;
}

.sideMenu p {
text-align: center;
margin: 5px 0;
padding: 5px 0;
margin: 0;
}

#feedbackWrapper h4 {
text-align: left;
margin-left: 3px;
.sideMenu i {
margin-right: 8px;
}
#feedbackSidebar span.buttonWrapper {
height: 60px;
width: 85px;
padding: 5px;

.buttonWrapper {
display: inline-block;
}
#feedbackSidebar span.buttonWrapper button {
margin: 44px auto 0 auto;
line-height: 48px;
width: 100%;
padding: 0 16px;
font-weight: bold;
}

#feedbackSidebar span.buttonWrapper.slower {
background: transparent url(slow.png) no-repeat center top;
.buttonWrapper:hover {
background-color: #333333;
color: #ffffff;
cursor: pointer;
}

#feedbackSidebar span.buttonWrapper.faster {
background: transparent url(fast.png) no-repeat center top;
.buttonWrapper.split {
float: left;
width: 50%;
line-height: 30px;
margin: 12px 0;
padding: 0;
text-align: center;
}

#feedbackSidebar textarea {
height: 85px;
width: 85%;
.buttonWrapper.split i {
margin-right: 0;
}

#feedbackSidebar div.row > button {
width: 90%;
margin: auto 5%;
.submenu {
background-color: #cccccc;
}

/* End Sidebar styling */

.fg-menu-container {
z-index: 2147483647; /* max, see http://www.puidokas.com/max-z-index/ */
}
Expand Down
Binary file removed public/css/slow.png
View file
Binary file not shown.
Binary file removed public/css/spinner.gif
View file
Binary file not shown.
72 changes: 53 additions & 19 deletions public/js/showoff.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ function setupPreso(load_slides, prefix) {
loadSlides(loadSlidesBool, loadSlidesPrefix)

loadKeyDictionaries();
setupSideMenu();

doDebugStuff()

Expand All @@ -71,25 +72,6 @@ function setupPreso(load_slides, prefix) {
// Better would be dynamic calculations, but this is enough for now.
$(window).resize(function(){location.reload();});

$("#feedbackWrapper").hover(
function() {
$('#feedbackSidebar').show();
toggleKeybinding();
},
function() {
$('#feedbackSidebar').hide();
toggleKeybinding();
}
);

$("#paceSlower").click(function() { sendPace('slower'); });
$("#paceFaster").click(function() { sendPace('faster'); });
$("#askQuestion").click(function() { askQuestion( $("textarea#question").val()) });
$("#sendFeedback").click(function() {
sendFeedback($( "input:radio[name=rating]:checked" ).val(), $("textarea#feedback").val())
});
$("#editSlide").click(function() { editSlide(); });

// Open up our control socket
if(mode.track) {
connectControlChannel();
Expand Down Expand Up @@ -213,6 +195,58 @@ function zoom()
}
}

function setupSideMenu() {
$("#hamburger").click(function() {
$('#feedbackSidebar').toggle();
toggleKeybinding();
});

$('#fileDownloads').click(function() {
closeMenu();
window.open('/download');
})

$("#paceSlower").click(function() {
sendPace('slower');
});

$("#paceFaster").click(function() {
sendPace('faster');
});

$('#questionToggle').click(function() {
$('#questionSubmenu').toggle();
});
$("#askQuestion").click(function() {
askQuestion( $("#question").val());
$('#questionSubmenu').hide();
closeMenu();
});

$('#feedbackToggle').click(function() {
$('#feedbackSubmenu').toggle();
});
$("#sendFeedback").click(function() {
sendFeedback($( "input:radio[name=rating]:checked" ).val(), $("#feedback").val());
$('#feedbackSubmenu').hide();
closeMenu();
});

$("#editSlide").click(function() {
editSlide();
closeMenu();
});

$('#closeMenu').click(function() {
closeMenu();
});

function closeMenu() {
$('#feedbackSidebar').hide();
toggleKeybinding('on');
}
}

function setupMenu() {
$('#navmenu').hide();

Expand Down
96 changes: 53 additions & 43 deletions views/index.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,51 +10,61 @@
<a tabindex="0" href="#search-engines" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="navmenu"><span class="ui-icon ui-icon-triangle-1-s"></span>slides</a>
<div id="navigation" class="hidden"></div>

<% if @feedback then %>
<div id="feedbackWrapper">
<div id="feedbackSidebar">
<img id="feedbackActivity" src="<%= @asset_path %>/css/spinner.gif" />
<h3>Live Interaction</h3>
<div class="row">
<h4>The presenter should...</h4>
<span class="buttonWrapper slower"><button id="paceSlower">Slow Down</button></span>
<span class="buttonWrapper faster"><button id="paceFaster">Speed Up</button></span>
</div>
<div class="row">
<textarea id="question" placeholder="Ask a question..."></textarea>
<button id="askQuestion">Ask a Question</button>
</div>
<hr />
<h3>Material Feedback</h3>
<div class="row">
<h4>This slide is...</h4>
Terrible
<input type="radio" name="rating" value="1"></input>
<input type="radio" name="rating" value="2"></input>
<input type="radio" name="rating" value="3"></input>
<input type="radio" name="rating" value="4"></input>
<input type="radio" name="rating" value="5"></input>
Awesome
<textarea id="feedback" placeholder="Why...?"></textarea>
<button id="sendFeedback">Send Feedback</button>
</div>
<br>
<div class="row">
<button id="fileDownloads" onclick="window.open('/download');">File Downloads</button>
<% if @edit then %>
<button id="editSlide">Edit Current Slide</button>
<% end %>
</div>
<hr />

<div class="row">
<p>Press <code>?</code> for help.</p>
<p>All features are anonymous</p>
</div>
<i id="hamburger" class="fa fa-bars fa-2x"></i>
<div id="feedbackSidebar" class="sideMenu">
<!-- <div id="tableOfContents" class="buttonWrapper">Table of Contents</div> -->
<div id="fileDownloads" class="buttonWrapper"><i class="fa fa-download"></i> Downloads</div>
<hr>

<% if @feedback then %>
<p>The presenter should...</p>
<div id="paceSlower" class="buttonWrapper split">
<i class="fa fa-minus"></i>
<br>Slow Down
</div>
<div id="paceFaster" class="buttonWrapper split">
<i class="fa fa-plus"></i>
<br>Speed Up
</div>
<div id="feedbackHandle"></div>

<hr>
<div id="questionToggle" class="buttonWrapper"><i class="fa fa-hand-stop-o"></i> Ask a Question</div>
<div id="questionSubmenu" class="submenu">
<textarea id="question" placeholder="Ask a question..."></textarea>
<div id="askQuestion" class="buttonWrapper">Ask</div>
</div>

<div id="feedbackToggle" class="buttonWrapper"><i class="fa fa-envelope"></i> Send Feedback</div>
<div id="feedbackSubmenu" class="submenu">
<p>This slide is...</p>
<small>
Terrible
<input type="radio" name="rating" value="1"></input>
<input type="radio" name="rating" value="2"></input>
<input type="radio" name="rating" value="3"></input>
<input type="radio" name="rating" value="4"></input>
<input type="radio" name="rating" value="5"></input>
Awesome
</small>
<textarea id="feedback" placeholder="Why...?"></textarea>
<div id="sendFeedback" class="buttonWrapper">Send</div>
</div>

<br>
<% if @edit then %>
<div id="editSlide" class="buttonWrapper">Edit Current Slide</div>
<% end %>
<hr>
<% end %>

<div id="closeMenu" class="buttonWrapper"><i class="fa fa-close"></i> Close</div>
<hr>

<small>
<p>Press <code>?</code> for help.</p>
<p>All features are anonymous</p>
</small>
</div>
<% end %>

<%= erb :help %>

Expand Down

0 comments on commit f5e5398

Please sign in to comment.