Skip to content

E
edx-platform
Commit b167e0f7 by Tom Giannattasio
Options

added filter drop; tweaked sidebar coordinate settings to accommodate new post

parent faabb01d
Showing with 178 additions and 46 deletions
lms/envs/dev.py
......@@ -15,7 +15,7 @@ TEMPLATE_DEBUG = True
MITX_FEATURES['DISABLE_START_DATES'] = True
MITX_FEATURES['ENABLE_SQL_TRACKING_LOGS'] = True
MITX_FEATURES['SUBDOMAIN_COURSE_LISTINGS'] = True
MITX_FEATURES['SUBDOMAIN_COURSE_LISTINGS'] = False
MITX_FEATURES['SUBDOMAIN_BRANDING'] = True
WIKI_ENABLED = True
......
lms/static/coffee/src/discussion/views/discussion_thread_list_view.coffee
......@@ -38,7 +38,7 @@ class @DiscussionThreadListView extends Backbone.View
@$(".browse").removeClass('is-open')
setTimeout (-> @$(".post-search-field").focus()), 200
toggleTopicDrop: =>
toggleTopicDrop: =>
@$(".browse").toggleClass('is-dropped')
if @$(".browse").hasClass('is-dropped')
@$(".board-drop-menu").show()
......
lms/static/js/discussions-temp.js
......@@ -12,6 +12,8 @@ var $sidebarWidthStyles;
var $formTopicDropBtn;
var $formTopicDropMenu;
var $postListWrapper;
var $dropFilter;
var $topicFilter;
var sidebarWidth;
var sidebarHeight;
var sidebarHeaderHeight;
......@@ -28,14 +30,16 @@ $(document).ready(function() {
$browse = $('.browse-search .browse');
$search = $('.browse-search .search');
$searchField = $('.post-search-field');
$topicDrop = $('.board-drop-menu');
$topicDrop = $('.browse-topic-drop-menu-wrapper');
$currentBoard = $('.current-board');
$tooltip = $('<div class="tooltip"></div>');
$newPost = $('.new-post-article');
$sidebar = $('.sidebar');
$postListWrapper = $('.post-list-wrapper');
$formTopicDropBtn = $('.new-post-article .topic-drop-btn');
$formTopicDropMenu = $('.new-post-article .topic-drop-menu');
$formTopicDropBtn = $('.new-post-article .form-topic-drop-btn');
$formTopicDropMenu = $('.new-post-article .form-topic-drop-menu-wrapper');
// $dropFilter = $('.browse-topic-drop-search-input');
// $topicFilter = $('.topic-drop-search-input');
$sidebarWidthStyles = $('<style></style>');
$body.append($sidebarWidthStyles);
......@@ -44,7 +48,7 @@ $(document).ready(function() {
$browse.bind('click', showTopicDrop);
$search.bind('click', showSearch);
$topicDrop.bind('click', setTopic);
// $topicDrop.bind('click', setTopic);
$formTopicDropBtn.bind('click', showFormTopicDrop);
$formTopicDropMenu.bind('click', setFormTopic);
$('.new-post-btn').bind('click', newPost);
......@@ -57,12 +61,55 @@ $(document).ready(function() {
'click': hideTooltip
});
$body.delegate('.browse-topic-drop-btn', 'click', showTopicDrop);
$body.delegate('.browse-topic-drop-search-input', 'keyup', filterDrop);
$body.delegate('.form-topic-drop-search-input', 'keyup', filterDrop);
$body.delegate('.browse-topic-drop-menu-wrapper', 'click', setTopic);
$(window).bind('resize', updateSidebarDimensions);
$(window).bind('scroll', updateSidebarCoordinates);
updateSidebarCoordinates();
updateSidebarDimensions();
});
function filterDrop(e) {
var $drop = $(e.target).parents('.form-topic-drop-menu-wrapper, .browse-topic-drop-menu-wrapper');
var queries = $(this).val().split(' ');
var $items = $drop.find('a');
if(queries.length == 0) {
$items.show();
return;
}
$items.hide();
$items.each(function(i) {
var thisText = $(this).not('.urnread').text();
$(this).parents('ul').siblings('a').not('.unread').each(function(i) {
thisText = thisText + ' ' + $(this).text();
});
var test = true;
var terms = thisText.split(' ');
for(var i = 0; i < queries.length; i++) {
if(thisText.toLowerCase().search(queries[i].toLowerCase()) == -1) {
test = false;
}
}
if(test) {
$(this).show();
// show children
$(this).parent().find('a').show();
// show parents
$(this).parents('ul').siblings('a').show();
}
});
}
function showTooltip(e) {
var tooltipText = $(this).attr('data-tooltip');
$tooltip.html(tooltipText);
......@@ -123,6 +170,11 @@ function showTopicDrop(e) {
e.preventDefault();
$browse.addClass('is-dropped');
if(!$topicDrop[0]) {
$topicDrop = $('.browse-topic-drop-menu-wrapper');
}
$topicDrop.show();
$browse.unbind('click', showTopicDrop);
$browse.bind('click', hideTopicDrop);
......@@ -132,6 +184,10 @@ function showTopicDrop(e) {
}
function hideTopicDrop(e) {
if(e.target == $('.browse-topic-drop-search-input')[0]) {
return;
}
$browse.removeClass('is-dropped');
$topicDrop.hide();
$body.unbind('click', hideTopicDrop);
......@@ -139,11 +195,20 @@ function hideTopicDrop(e) {
}
function setTopic(e) {
if(e.target == $('.browse-topic-drop-search-input')[0]) {
return;
}
var $item = $(e.target).closest('a');
var boardName = $item.find('.board-name').html();
$item.parents('ul').not('.board-drop-menu').each(function(i) {
$item.parents('ul').not('.browse-topic-drop-menu').each(function(i) {
boardName = $(this).siblings('a').find('.board-name').html() + ' / ' + boardName;
});
if(!$currentBoard[0]) {
$currentBoard = $('.current-board');
}
$currentBoard.html(boardName);
var fontSize = 16;
......@@ -181,6 +246,10 @@ function showFormTopicDrop(e) {
}
function hideFormTopicDrop(e) {
if(e.target == $('.topic-drop-search-input')[0]) {
return;
}
$formTopicDropBtn.removeClass('is-dropped');
$formTopicDropMenu.hide();
$body.unbind('click', hideFormTopicDrop);
......@@ -189,12 +258,15 @@ function hideFormTopicDrop(e) {
}
function setFormTopic(e) {
if(e.target == $('.topic-drop-search-input')[0]) {
return;
}
$formTopicDropBtn.removeClass('is-dropped');
hideFormTopicDrop();
hideFormTopicDrop(e);
var $item = $(e.target);
var boardName = $item.html();
$item.parents('ul').not('.topic-drop-menu').each(function(i) {
$item.parents('ul').not('.form-topic-drop-menu').each(function(i) {
boardName = $(this).siblings('a').html() + ' / ' + boardName;
});
$formTopicDropBtn.html(boardName + ' <span class="drop-arrow">▾</span>');
......@@ -202,6 +274,7 @@ function setFormTopic(e) {
function updateSidebarCoordinates(e) {
scrollTop = $(window).scrollTop();
sidebarXOffset = $('.discussion-column').offset().top;
var marginTop = scrollTop + SIDEBAR_PADDING > sidebarXOffset ? scrollTop + SIDEBAR_PADDING - sidebarXOffset : 0;
......
lms/static/sass/_discussion.scss
......@@ -92,7 +92,7 @@ body.discussion {
text-shadow: none;
}
.topic-drop {
.form-topic-drop {
position: relative;
ul {
......@@ -102,7 +102,7 @@ body.discussion {
}
}
.topic-drop-btn {
.form-topic-drop-btn {
position: relative;
z-index: 10000;
@include white-button;
......@@ -117,7 +117,7 @@ body.discussion {
}
}
.topic-drop-menu {
.form-topic-drop-menu-wrapper {
display: none;
position: absolute;
top: 40px;
......@@ -128,6 +128,11 @@ body.discussion {
background: #737373;
border: 1px solid #333;
box-shadow: 0 2px 50px rgba(0, 0, 0, .4);
}
.form-topic-drop-menu {
max-height: 400px;
overflow-y: scroll;
a {
display: block;
......@@ -156,6 +161,25 @@ body.discussion {
}
}
}
.form-topic-drop-search {
padding: 10px;
}
.form-topic-drop-search-input {
width: 100%;
height: 30px;
padding: 0 15px;
box-sizing: border-box;
border-radius: 30px;
border: 1px solid #333;
box-shadow: 0 1px 3px rgba(0, 0, 0, .25) inset;
background: -webkit-linear-gradient(top, #eee, #fff);
font-size: 11px;
line-height: 16px;
color: #333;
outline: 0;
}
}
.right-column {
......@@ -330,16 +354,16 @@ body.discussion {
box-shadow: -1px 0 0 #aaa inset;
&.is-open {
.board-drop-btn span {
.browse-topic-drop-btn span {
opacity: 1;
}
.board-drop-icon {
.browse-topic-drop-icon {
opacity: 0;
}
&.is-dropped {
.board-drop-btn {
.browse-topic-drop-btn {
span {
color: #fff;
......@@ -352,13 +376,13 @@ body.discussion {
}
&.is-dropped {
.board-drop-btn {
.browse-topic-drop-btn {
background-color: #616161;
}
}
&.is-dropped {
.board-drop-icon {
.browse-topic-drop-icon {
background-position: 0 -16px;
}
}
......@@ -388,7 +412,7 @@ body.discussion {
}
}
.board-drop-btn {
.browse-topic-drop-btn {
display: block;
position: absolute;
top: -1px;
......@@ -417,7 +441,7 @@ body.discussion {
}
}
.board-drop-icon {
.browse-topic-drop-icon {
display: block;
position: absolute;
top: 21px;
......@@ -428,10 +452,10 @@ body.discussion {
margin-left: -12px;
background: url(../images/browse-icon.png) no-repeat;
opacity: 1;
@include transition(opacity .2s);
@include transition(none);
}
.board-drop-menu {
.browse-topic-drop-menu-wrapper {
display: none;
position: absolute;
top: 60px;
......@@ -442,6 +466,11 @@ body.discussion {
border: 1px solid #4b4b4b;
border-radius: 0 0 3px 3px;
.browse-topic-drop-menu {
max-height: 400px;
overflow-y: scroll;
}
> li:first-child a {
border-top: none;
}
......@@ -486,6 +515,25 @@ body.discussion {
}
}
.browse-topic-drop-search {
padding: 10px;
}
.browse-topic-drop-search-input {
width: 100%;
height: 30px;
padding: 0 15px;
box-sizing: border-box;
border-radius: 30px;
border: 1px solid #333;
box-shadow: 0 1px 3px rgba(0, 0, 0, .25) inset;
background: -webkit-linear-gradient(top, #eee, #fff);
font-size: 11px;
line-height: 16px;
color: #333;
outline: 0;
}
.post-search {
width: 100%;
max-width: 30px;
......
lms/templates/discussion/_filter_dropdown.html
......@@ -21,6 +21,11 @@
</li>
</%def>
<ul class="board-drop-menu">
${render_dropdown(category_map)}
</ul>
<div class="browse-topic-drop-menu-wrapper">
<div class="browse-topic-drop-search">
<input type="text" class="browse-topic-drop-search-input" placeholder="filter topics">
</div>
<ul class="browse-topic-drop-menu">
${render_dropdown(category_map)}
</ul>
</div>
\ No newline at end of file
lms/templates/discussion/single_thread.html
......@@ -74,26 +74,31 @@
<form class="new-post-form">
<div class="left-column">
<label>Create new post in:</label>
<div class="topic-drop">
<a href="#" class="topic-drop-btn">Homework / Week 1 <span class="drop-arrow">▾</span></a>
<ul class="topic-drop-menu">
<li><a href="#">All</a></li>
<li><a href="#">Following</a></li>
<li><a href="#">General</a></li>
<li>
<a href="#">Homework</a>
<ul>
<li><a href="#">Week 1</a></li>
<li>
<a href="#">Week 2</a>
<ul>
<li><a href="#">Problem 1</a></li>
<li><a href="#">Problem 2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="form-topic-drop">
<a href="#" class="form-topic-drop-btn">Homework / Week 1 <span class="drop-arrow">▾</span></a>
<div class="form-topic-drop-menu-wrapper">
<div class="form-topic-drop-search">
<input type="text" class="form-topic-drop-search-input" placeholder="filter topics">
</div>
<ul class="form-topic-drop-menu">
<li><a href="#">All</a></li>
<li><a href="#">Following</a></li>
<li><a href="#">General</a></li>
<li>
<a href="#">Homework</a>
<ul>
<li><a href="#">Week 1</a></li>
<li>
<a href="#">Week 2</a>
<ul>
<li><a href="#">Problem 1</a></li>
<li><a href="#">Problem 2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="options">
<input type="checkbox" name="follow" id="new-post-follow" checked><label for="new-post-follow">follow this post</label>
......@@ -129,8 +134,8 @@
<script type="text/template" id="thread-list-template">
<div class="browse-search">
<div class="browse is-open">
<a href="#" class="board-drop-icon"></a>
<a href="#" class="board-drop-btn"><span class="current-board">Homework / Week 1</span> <span class="drop-arrow">▾</span></a>
<a href="#" class="browse-topic-drop-icon"></a>
<a href="#" class="browse-topic-drop-btn"><span class="current-board">Homework / Week 1</span> <span class="drop-arrow">▾</span></a>
</div>
<%include file="_filter_dropdown.html" />
<div class="search">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment