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 159 additions and 27 deletions
lms/envs/dev.py
...@@ -15,7 +15,7 @@ TEMPLATE_DEBUG = True ...@@ -15,7 +15,7 @@ TEMPLATE_DEBUG = True
MITX_FEATURES['DISABLE_START_DATES'] = True MITX_FEATURES['DISABLE_START_DATES'] = True
MITX_FEATURES['ENABLE_SQL_TRACKING_LOGS'] = 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 MITX_FEATURES['SUBDOMAIN_BRANDING'] = True
WIKI_ENABLED = True WIKI_ENABLED = True
......
lms/static/js/discussions-temp.js
...@@ -12,6 +12,8 @@ var $sidebarWidthStyles; ...@@ -12,6 +12,8 @@ var $sidebarWidthStyles;
var $formTopicDropBtn; var $formTopicDropBtn;
var $formTopicDropMenu; var $formTopicDropMenu;
var $postListWrapper; var $postListWrapper;
var $dropFilter;
var $topicFilter;
var sidebarWidth; var sidebarWidth;
var sidebarHeight; var sidebarHeight;
var sidebarHeaderHeight; var sidebarHeaderHeight;
...@@ -28,14 +30,16 @@ $(document).ready(function() { ...@@ -28,14 +30,16 @@ $(document).ready(function() {
$browse = $('.browse-search .browse'); $browse = $('.browse-search .browse');
$search = $('.browse-search .search'); $search = $('.browse-search .search');
$searchField = $('.post-search-field'); $searchField = $('.post-search-field');
$topicDrop = $('.board-drop-menu'); $topicDrop = $('.browse-topic-drop-menu-wrapper');
$currentBoard = $('.current-board'); $currentBoard = $('.current-board');
$tooltip = $('<div class="tooltip"></div>'); $tooltip = $('<div class="tooltip"></div>');
$newPost = $('.new-post-article'); $newPost = $('.new-post-article');
$sidebar = $('.sidebar'); $sidebar = $('.sidebar');
$postListWrapper = $('.post-list-wrapper'); $postListWrapper = $('.post-list-wrapper');
$formTopicDropBtn = $('.new-post-article .topic-drop-btn'); $formTopicDropBtn = $('.new-post-article .form-topic-drop-btn');
$formTopicDropMenu = $('.new-post-article .topic-drop-menu'); $formTopicDropMenu = $('.new-post-article .form-topic-drop-menu-wrapper');
// $dropFilter = $('.browse-topic-drop-search-input');
// $topicFilter = $('.topic-drop-search-input');
$sidebarWidthStyles = $('<style></style>'); $sidebarWidthStyles = $('<style></style>');
$body.append($sidebarWidthStyles); $body.append($sidebarWidthStyles);
...@@ -44,7 +48,7 @@ $(document).ready(function() { ...@@ -44,7 +48,7 @@ $(document).ready(function() {
$browse.bind('click', showTopicDrop); $browse.bind('click', showTopicDrop);
$search.bind('click', showSearch); $search.bind('click', showSearch);
$topicDrop.bind('click', setTopic); // $topicDrop.bind('click', setTopic);
$formTopicDropBtn.bind('click', showFormTopicDrop); $formTopicDropBtn.bind('click', showFormTopicDrop);
$formTopicDropMenu.bind('click', setFormTopic); $formTopicDropMenu.bind('click', setFormTopic);
$('.new-post-btn').bind('click', newPost); $('.new-post-btn').bind('click', newPost);
...@@ -57,12 +61,55 @@ $(document).ready(function() { ...@@ -57,12 +61,55 @@ $(document).ready(function() {
'click': hideTooltip '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('resize', updateSidebarDimensions);
$(window).bind('scroll', updateSidebarCoordinates); $(window).bind('scroll', updateSidebarCoordinates);
updateSidebarCoordinates(); updateSidebarCoordinates();
updateSidebarDimensions(); 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) { function showTooltip(e) {
var tooltipText = $(this).attr('data-tooltip'); var tooltipText = $(this).attr('data-tooltip');
$tooltip.html(tooltipText); $tooltip.html(tooltipText);
...@@ -123,6 +170,11 @@ function showTopicDrop(e) { ...@@ -123,6 +170,11 @@ function showTopicDrop(e) {
e.preventDefault(); e.preventDefault();
$browse.addClass('is-dropped'); $browse.addClass('is-dropped');
if(!$topicDrop[0]) {
$topicDrop = $('.browse-topic-drop-menu-wrapper');
}
$topicDrop.show(); $topicDrop.show();
$browse.unbind('click', showTopicDrop); $browse.unbind('click', showTopicDrop);
$browse.bind('click', hideTopicDrop); $browse.bind('click', hideTopicDrop);
...@@ -132,6 +184,10 @@ function showTopicDrop(e) { ...@@ -132,6 +184,10 @@ function showTopicDrop(e) {
} }
function hideTopicDrop(e) { function hideTopicDrop(e) {
if(e.target == $('.browse-topic-drop-search-input')[0]) {
return;
}
$browse.removeClass('is-dropped'); $browse.removeClass('is-dropped');
$topicDrop.hide(); $topicDrop.hide();
$body.unbind('click', hideTopicDrop); $body.unbind('click', hideTopicDrop);
...@@ -139,11 +195,20 @@ function hideTopicDrop(e) { ...@@ -139,11 +195,20 @@ function hideTopicDrop(e) {
} }
function setTopic(e) { function setTopic(e) {
if(e.target == $('.browse-topic-drop-search-input')[0]) {
return;
}
var $item = $(e.target).closest('a'); var $item = $(e.target).closest('a');
var boardName = $item.find('.board-name').html(); 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; boardName = $(this).siblings('a').find('.board-name').html() + ' / ' + boardName;
}); });
if(!$currentBoard[0]) {
$currentBoard = $('.current-board');
}
$currentBoard.html(boardName); $currentBoard.html(boardName);
var fontSize = 16; var fontSize = 16;
...@@ -181,6 +246,10 @@ function showFormTopicDrop(e) { ...@@ -181,6 +246,10 @@ function showFormTopicDrop(e) {
} }
function hideFormTopicDrop(e) { function hideFormTopicDrop(e) {
if(e.target == $('.topic-drop-search-input')[0]) {
return;
}
$formTopicDropBtn.removeClass('is-dropped'); $formTopicDropBtn.removeClass('is-dropped');
$formTopicDropMenu.hide(); $formTopicDropMenu.hide();
$body.unbind('click', hideFormTopicDrop); $body.unbind('click', hideFormTopicDrop);
...@@ -189,12 +258,15 @@ function hideFormTopicDrop(e) { ...@@ -189,12 +258,15 @@ function hideFormTopicDrop(e) {
} }
function setFormTopic(e) { function setFormTopic(e) {
if(e.target == $('.topic-drop-search-input')[0]) {
return;
}
$formTopicDropBtn.removeClass('is-dropped'); $formTopicDropBtn.removeClass('is-dropped');
hideFormTopicDrop(); hideFormTopicDrop(e);
var $item = $(e.target); var $item = $(e.target);
var boardName = $item.html(); 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; boardName = $(this).siblings('a').html() + ' / ' + boardName;
}); });
$formTopicDropBtn.html(boardName + ' <span class="drop-arrow">▾</span>'); $formTopicDropBtn.html(boardName + ' <span class="drop-arrow">▾</span>');
...@@ -202,6 +274,7 @@ function setFormTopic(e) { ...@@ -202,6 +274,7 @@ function setFormTopic(e) {
function updateSidebarCoordinates(e) { function updateSidebarCoordinates(e) {
scrollTop = $(window).scrollTop(); scrollTop = $(window).scrollTop();
sidebarXOffset = $('.discussion-column').offset().top;
var marginTop = scrollTop + SIDEBAR_PADDING > sidebarXOffset ? scrollTop + SIDEBAR_PADDING - sidebarXOffset : 0; var marginTop = scrollTop + SIDEBAR_PADDING > sidebarXOffset ? scrollTop + SIDEBAR_PADDING - sidebarXOffset : 0;
......
lms/static/sass/_discussion.scss
...@@ -92,7 +92,7 @@ body.discussion { ...@@ -92,7 +92,7 @@ body.discussion {
text-shadow: none; text-shadow: none;
} }
.topic-drop { .form-topic-drop {
position: relative; position: relative;
ul { ul {
...@@ -102,7 +102,7 @@ body.discussion { ...@@ -102,7 +102,7 @@ body.discussion {
} }
} }
.topic-drop-btn { .form-topic-drop-btn {
position: relative; position: relative;
z-index: 10000; z-index: 10000;
@include white-button; @include white-button;
...@@ -117,7 +117,7 @@ body.discussion { ...@@ -117,7 +117,7 @@ body.discussion {
} }
} }
.topic-drop-menu { .form-topic-drop-menu-wrapper {
display: none; display: none;
position: absolute; position: absolute;
top: 40px; top: 40px;
...@@ -128,6 +128,11 @@ body.discussion { ...@@ -128,6 +128,11 @@ body.discussion {
background: #737373; background: #737373;
border: 1px solid #333; border: 1px solid #333;
box-shadow: 0 2px 50px rgba(0, 0, 0, .4); box-shadow: 0 2px 50px rgba(0, 0, 0, .4);
}
.form-topic-drop-menu {
max-height: 400px;
overflow-y: scroll;
a { a {
display: block; display: block;
...@@ -156,6 +161,25 @@ body.discussion { ...@@ -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 { .right-column {
...@@ -330,16 +354,16 @@ body.discussion { ...@@ -330,16 +354,16 @@ body.discussion {
box-shadow: -1px 0 0 #aaa inset; box-shadow: -1px 0 0 #aaa inset;
&.is-open { &.is-open {
.board-drop-btn span { .browse-topic-drop-btn span {
opacity: 1; opacity: 1;
} }
.board-drop-icon { .browse-topic-drop-icon {
opacity: 0; opacity: 0;
} }
&.is-dropped { &.is-dropped {
.board-drop-btn { .browse-topic-drop-btn {
span { span {
color: #fff; color: #fff;
...@@ -352,13 +376,13 @@ body.discussion { ...@@ -352,13 +376,13 @@ body.discussion {
} }
&.is-dropped { &.is-dropped {
.board-drop-btn { .browse-topic-drop-btn {
background-color: #616161; background-color: #616161;
} }
} }
&.is-dropped { &.is-dropped {
.board-drop-icon { .browse-topic-drop-icon {
background-position: 0 -16px; background-position: 0 -16px;
} }
} }
...@@ -388,7 +412,7 @@ body.discussion { ...@@ -388,7 +412,7 @@ body.discussion {
} }
} }
.board-drop-btn { .browse-topic-drop-btn {
display: block; display: block;
position: absolute; position: absolute;
top: -1px; top: -1px;
...@@ -417,7 +441,7 @@ body.discussion { ...@@ -417,7 +441,7 @@ body.discussion {
} }
} }
.board-drop-icon { .browse-topic-drop-icon {
display: block; display: block;
position: absolute; position: absolute;
top: 21px; top: 21px;
...@@ -428,10 +452,10 @@ body.discussion { ...@@ -428,10 +452,10 @@ body.discussion {
margin-left: -12px; margin-left: -12px;
background: url(../images/browse-icon.png) no-repeat; background: url(../images/browse-icon.png) no-repeat;
opacity: 1; opacity: 1;
@include transition(opacity .2s); @include transition(none);
} }
.board-drop-menu { .browse-topic-drop-menu-wrapper {
display: none; display: none;
position: absolute; position: absolute;
top: 60px; top: 60px;
...@@ -442,6 +466,11 @@ body.discussion { ...@@ -442,6 +466,11 @@ body.discussion {
border: 1px solid #4b4b4b; border: 1px solid #4b4b4b;
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
.browse-topic-drop-menu {
max-height: 400px;
overflow-y: scroll;
}
> li:first-child a { > li:first-child a {
border-top: none; border-top: none;
} }
...@@ -486,6 +515,25 @@ body.discussion { ...@@ -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 { .post-search {
width: 100%; width: 100%;
max-width: 30px; max-width: 30px;
......
lms/templates/discussion/_filter_dropdown.html
...@@ -21,6 +21,11 @@ ...@@ -21,6 +21,11 @@
</li> </li>
</%def> </%def>
<ul class="board-drop-menu"> <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)} ${render_dropdown(category_map)}
</ul> </ul>
</div>
\ No newline at end of file
lms/templates/discussion/single_thread.html
...@@ -74,9 +74,13 @@ ...@@ -74,9 +74,13 @@
<form class="new-post-form"> <form class="new-post-form">
<div class="left-column"> <div class="left-column">
<label>Create new post in:</label> <label>Create new post in:</label>
<div class="topic-drop"> <div class="form-topic-drop">
<a href="#" class="topic-drop-btn">Homework / Week 1 <span class="drop-arrow">▾</span></a> <a href="#" class="form-topic-drop-btn">Homework / Week 1 <span class="drop-arrow">▾</span></a>
<ul class="topic-drop-menu"> <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="#">All</a></li>
<li><a href="#">Following</a></li> <li><a href="#">Following</a></li>
<li><a href="#">General</a></li> <li><a href="#">General</a></li>
...@@ -95,6 +99,7 @@ ...@@ -95,6 +99,7 @@
</li> </li>
</ul> </ul>
</div> </div>
</div>
<div class="options"> <div class="options">
<input type="checkbox" name="follow" id="new-post-follow" checked><label for="new-post-follow">follow this post</label> <input type="checkbox" name="follow" id="new-post-follow" checked><label for="new-post-follow">follow this post</label>
<br> <br>
...@@ -129,8 +134,8 @@ ...@@ -129,8 +134,8 @@
<script type="text/template" id="thread-list-template"> <script type="text/template" id="thread-list-template">
<div class="browse-search"> <div class="browse-search">
<div class="browse is-open"> <div class="browse is-open">
<a href="#" class="board-drop-icon"></a> <a href="#" class="browse-topic-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-btn"><span class="current-board">Homework / Week 1</span> <span class="drop-arrow">▾</span></a>
</div> </div>
<%include file="_filter_dropdown.html" /> <%include file="_filter_dropdown.html" />
<div class="search"> <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