Skip to content

E
edx-platform
Commit 6d87443a by Greg Price
Options

Update discussion tab sidebar header 

The home button is removed, the search box is always displayed, and many
visual adjustments are made, along with a large amount of refactoring.

Originally reviewed in #4211
parent 05d8eeec
Showing with 452 additions and 387 deletions
common/static/coffee/src/discussion/utils.coffee
......@@ -93,6 +93,10 @@ class @DiscussionUtil
"notifications_status" : "/notification_prefs/status/"
}[name]
@ignoreEnterKey: (event) =>
if event.which == 13
event.preventDefault()
@activateOnSpace: (event, func) ->
if event.which == 32
event.preventDefault()
......
common/test/acceptance/pages/lms/discussion.py
......@@ -353,12 +353,7 @@ class DiscussionTabHomePage(CoursePage, DiscussionPageMixin):
return self.q(css=".discussion-body section.home-header").present
def perform_search(self, text="dummy"):
self.q(css=".discussion-body .sidebar .search").first.click()
EmptyPromise(
lambda: self.q(css=".discussion-body .sidebar .search.is-open").present,
"waiting for search input to be available"
).fulfill()
self.q(css="#search-discussions").fill(text + chr(10))
self.q(css=".forum-nav-search-input").fill(text + chr(10))
EmptyPromise(
self.is_ajax_finished,
"waiting for server to return result"
......
lms/static/sass/discussion/_discussion.scss
......@@ -595,299 +595,6 @@ body.discussion {
box-shadow: none;
line-height: 1.4;
.sidebar {
@include box-sizing(border-box);
float: left;
border: 1px solid #aaa;
border-right: 1px solid #bcbcbc;
border-radius: 3px;
width: 31%;
height: 550px;
background: #f6f6f6;
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.browse-search {
position: relative;
display: block;
border-bottom: 1px solid #a3a3a3;
border-radius: 3px 0 0 0;
height: 60px;
.home, .browse,
.search {
@include linear-gradient(top, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
@include transition(all .2s ease-out);
position: relative;
float: left;
width: 20%;
height: 100%;
background-color: #dedede;
&:hover, &:focus {
background-color: $white;
}
}
.icon {
@include transition(all .2s ease-out);
z-index: 100;
display: inline-block;
width: 100%;
color: #aeaeae;
text-align: center;
font-size: 28px;
line-height: 60px;
opacity: 1;
}
.home {
border-radius: 3px 0 0 0;
box-shadow: -1px 0 0 #aaa inset;
cursor: pointer;
}
.home-icon {
width: 100%;
height: 100%;
display: block;
}
.browse {
border-radius: 3px 0 0 0;
box-shadow: -1px 0 0 #aaa inset;
&.is-open {
width:60%;
.browse-topic-drop-btn {
visibility: visible;
}
.browse-topic-drop-icon {
visibility: hidden;
}
&.is-dropped {
.browse-topic-drop-btn {
span {
color: $white;
text-shadow: none;
}
border-color: #4b4b4b;
}
}
}
&.is-dropped {
.browse-topic-drop-btn {
background-color: #616161;
}
}
}
.search {
cursor: pointer;
border-radius: 0 3px 0 0;
&.is-open {
cursor: auto;
width: 60%;
.home {
width:0%;
}
.post-search {
padding: 0 $baseline/2;
max-width: 1000px;
}
.post-search-field {
cursor: text;
pointer-events: auto;
&::-webkit-input-placeholder,
&:-moz-placeholder,
&:-ms-input-placeholder {
opacity: 1.0;
}
}
}
}
.browse-topic-drop-btn {
@include transition(none);
position: absolute;
top: -1px;
left: -1px;
display: block;
visibility: hidden;
overflow: hidden;
width: 100%;
height: 100%;
border: 1px solid transparent;
text-align: center;
span {
font-size: 14px;
font-weight: 700;
line-height: 58px;
color: #333;
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
.drop-arrow {
font-size: 16px;
}
}
.browse-topic-drop-icon {
display: block;
visibility: visible;
@include transition(none);
}
.browse-topic-drop-menu-wrapper {
display: none;
position: absolute;
top: 60px;
left: -1px;
z-index: 9999;
width: 100%;
background: #797979;
border: 1px solid #4b4b4b;
border-left: none;
border-radius: 0 0 3px 3px;
box-shadow: 1px 0 0 #4b4b4b inset;
.browse-topic-drop-menu {
max-height: 400px;
overflow-y: scroll;
}
ul {
position: inline;
}
> li:first-child a {
border-top: none;
}
a {
display: block;
padding: 0 $baseline;
border-top: 1px solid #5f5f5f;
font-size: 12px;
font-weight: 700;
line-height: 22px;
color: $white;
@include clearfix;
@include transition(none);
&.hidden {
display: none;
}
&:hover, &:focus {
background-color: #636363;
}
.board-name {
float: left;
width: 80%;
margin: 13px 0;
color: $white;
}
.unread {
float: right;
padding: 0 5px;
margin-top: 13px;
font-size: 11px;
line-height: 22px;
border-radius: 2px;
@include linear-gradient(top, #4c4c4c, #5a5a5a);
}
}
li li {
a {
padding-left: 44px;
background: url(../images/nested-icon.png) no-repeat 22px 14px;
}
}
li li li {
a {
padding-left: 68px;
background: url(../images/nested-icon.png) no-repeat 46px 14px;
}
}
}
.browse-topic-drop-search {
padding: $baseline/2;
}
.browse-topic-drop-search-input {
width: 100%;
height: 30px;
padding: 0 15px;
@include 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, $white);
font-size: 11px;
line-height: 16px;
color: #333;
}
.post-search {
width: 100%;
max-width: 30px;
margin: auto;
@include box-sizing(border-box);
@include transition(all .2s linear 0s);
}
.post-search-field {
display: block;
width: 100%;
height: 30px;
padding: 0 0 0 30px;
margin: 14px auto;
@include box-sizing(border-box);
border: 1px solid #acacac;
border-radius: 30px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset, 0 1px 0 rgba(255, 255, 255, .5);
background: url(../images/search-icon.png) no-repeat 7px center #fff;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 13px;
line-height: 20px;
color: #333;
cursor: pointer;
pointer-events: none;
@include transition(all .2s ease-out 0s);
&::-webkit-input-placeholder,
&:-moz-placeholder,
&:-ms-input-placeholder {
opacity: 0.0;
@include transition(opacity .2s linear 0s);
}
&:focus {
border-color: #4697c1;
}
}
}
.bottom-post-status {
padding: 30px;
font-size: 20px;
......
lms/static/sass/discussion/elements/_navigation.scss
.forum-nav {
@include box-sizing(border-box);
float: left;
border: 1px solid #aaa;
border-radius: 3px;
}
// ------
// Header
// ------
.forum-nav-header {
@include box-sizing(border-box);
display: table;
border-bottom: 1px solid $gray-l2;
background-color: $gray-l3;
}
.forum-nav-browse {
@include box-sizing(border-box);
display: table-cell;
vertical-align: middle;
width: 50%;
padding: ($baseline/4);
&:hover, &:focus, &.is-active {
background-color: $gray-l5;
}
.icon {
margin-right: ($baseline/4);
}
}
.forum-nav-browse-current {
@include font-size(12);
}
.forum-nav-browse-drop-arrow {
margin-left: ($baseline/4);
}
.forum-nav-search {
@include box-sizing(border-box);
display: table-cell;
position: relative;
vertical-align: middle;
width: 50%;
padding: ($baseline/4);
}
.forum-nav-search .icon {
@include font-size(12);
position: absolute;
margin-top: -6px;
top: 50%;
right: ($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding
}
.forum-nav-search-input {
width: 100%;
}
// -----------
// Browse menu
// -----------
.forum-nav-browse-menu-wrapper {
overflow-y: scroll;
border-bottom: 1px solid $gray-l3;
background: $gray-l5;
}
.forum-nav-browse-filter {
position: relative;
border-bottom: 1px solid $gray-l2;
padding: ($baseline/4);
}
.forum-nav-browse-filter .icon {
@include font-size(12);
position: absolute;
margin-top: -6px;
top: 50%;
right: ($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding
}
.forum-nav-browse-filter-input {
width: 100%;
}
.forum-nav-browse-title .icon {
margin-right: ($baseline/2);
}
// -------------------
// Sort and filter bar
// -------------------
......
lms/static/sass/discussion/utilities/_shame.scss
// -------------------
// navigation - header
// -------------------
// Override global a rules
.forum-nav-browse {
color: $black !important;
}
// Override global label rules
.forum-nav-search label {
margin-bottom: 0;
}
// Override global input rules
.forum-nav-search-input {
box-shadow: none !important;
border: 1px solid $gray-l2 !important;
border-radius: 3px !important;
height: auto !important;
padding-left: ($baseline/4) !important;
padding-right: ($baseline/2 + 12px) !important; // Leave room for icon
font-size: 12px !important;
}
// Firefox does not compute the correct containing box for absolute positioning
// of .forum-nav-search .icon, so there's an extra div to make it happy
.forum-nav-search-ff-position-fix {
position: relative;
}
// The sidebar class does a lot of things that we don't want in the thread list;
// the following rules contain styling that is necessary and would otherwise
// reside in elements/_navigation.scss if the sidebar styling did not make the
// !important directive necessary.
.forum-nav {
width: 31% !important;
}
// ------------------------
// navigation - browse menu
// ------------------------
// Override global a rules
.forum-nav-browse-title {
color: inherit !important;
}
// Override global label rules
.forum-nav-browse-filter label {
margin-bottom: 0;
}
// Override global input rules
.forum-nav-browse-filter-input {
box-shadow: none !important;
border-radius: 3px !important;
height: auto !important;
padding-left: ($baseline/4) !important;
padding-right: ($baseline/2 + 12px) !important; // Leave room for icon
font-size: 12px !important;
}
// The sidebar class does a lot of things that we don't want in the thread list;
// the following rules contain styling that is necessary and would otherwise
// reside in elements/_navigation.scss if the sidebar styling did not make the
// !important directive necessary.
.forum-nav-browse-title {
border-bottom: 1px solid $gray-l3 !important;
padding: ($baseline/2) ($baseline/2) !important;
&:hover, &:focus {
background: $forum-color-active-thread !important;
}
}
.forum-nav-browse-submenu {
padding-left: $baseline !important;
}
// --------------------------------
// navigation - sort and filter bar
// --------------------------------
......
lms/templates/discussion/_filter_dropdown.html
......@@ -12,41 +12,43 @@
</%def>
<%def name="render_entry(entries, entry)">
<li><a href="#" class="drop-menu-entry"><span class="board-name" data-discussion_id='${json.dumps(entries[entry])}' cohorted = "${str(entries[entry]['is_cohorted']).lower()}">${entry}</span></a></li>
<li
class="forum-nav-browse-menu-item"
data-discussion-id='${json.dumps(entries[entry])}'
data-cohorted="${str(entries[entry]['is_cohorted']).lower()}"
>
<a href="#" class="forum-nav-browse-title">${entry}</a>
</li>
</%def>
<%def name="render_category(categories, category)">
<li>
<a href="#" class="drop-menu-parent-category"><span class="board-name">${category}</span></a>
<ul>
<li class="forum-nav-browse-menu-item">
<a href="#" class="forum-nav-browse-title">${category}</a>
<ul class="forum-nav-browse-submenu">
${render_dropdown(categories[category])}
</ul>
</li>
</%def>
<div class="browse-topic-drop-menu-wrapper">
<div class="browse-topic-drop-search">
<label class="sr" for="browse-topic">${_("Filter Topics")}</label>
<input type="text" id="browse-topic" class="browse-topic-drop-search-input" placeholder="${_('filter topics')}">
</div>
<ul class="browse-topic-drop-menu">
<li>
<a href="#" class="drop-menu-meta-category">
<span class="board-name" data-discussion_id='#all'>${_("Show All Discussions")}</span>
</a>
<div class="forum-nav-browse-menu-wrapper" style="display: none">
<form class="forum-nav-browse-filter">
<label>
<span class="sr">${_("Filter Topics")}</span>
<input type="text" class="forum-nav-browse-filter-input" placeholder="${_("filter topics")}">
<i class="icon icon-filter"></i>
</label>
</form>
<ul class="forum-nav-browse-menu">
<li class="forum-nav-browse-menu-item forum-nav-browse-menu-all">
<a href="#" class="forum-nav-browse-title">${_("All Discussions")}</a>
</li>
%if flag_moderator:
<li>
<a href="#">
<span class="board-name" data-discussion_id='#flagged'><i class="icon-flag" style="padding-right:5px;"></i>${_("Show Flagged Discussions")}</span>
</a>
<li class="forum-nav-browse-menu-item forum-nav-browse-menu-flagged">
<a href="#" class="forum-nav-browse-title"><i class="icon icon-flag"></i>${_("Flagged Discussions")}</a>
</li>
%endif
<li>
<a href="#" class="drop-menu-meta-category">
<span class="board-name" data-discussion_id='#following'><i class="icon-star" style="padding-right:5px;"></i>${_("Posts I'm Following")}</span>
</a>
<li class="forum-nav-browse-menu-item forum-nav-browse-menu-following">
<a href="#" class="forum-nav-browse-title"><i class="icon icon-star"></i>${_("Posts I'm Following")}</a>
</li>
${render_dropdown(category_map)}
</ul>
......
lms/templates/discussion/_thread_list_template.html
<%! from django.utils.translation import ugettext as _ %>
<script type="text/template" id="thread-list-template">
<div class="browse-search">
<div class="home">
<a href="#" class="home-icon">
<i class="icon icon-home"></i>
<span class="sr">${_("Discussion Home")}</span>
</a>
</div>
<div class="browse is-open">
<a href="#" class="browse-topic-drop-icon">
<i class="icon icon-reorder"></i>
<span class="sr">${_("Discussion Topics")}</span>
</a>
<a href="#" class="browse-topic-drop-btn" aria-haspopup="true" aria-owns="browse-topic-drop-menu">
<span class="sr">${_("Discussion topics; current selection is: ")}</span>
<span class="current-board">${_("Show All Discussions")}</span>
<span class="drop-arrow" aria-hidden="true">▾</span>
</a>
</div>
<%include file="_filter_dropdown.html" />
<div class="search">
<form class="post-search">
<label class="sr" for="search-discussions">${_("Search")}</label>
<input type="text" id="search-discussions" placeholder="${_("Search all discussions")}" class="post-search-field">
</form>
</div>
<div class="forum-nav-header">
<a href="#" class="forum-nav-browse" aria-haspopup="true">
## There is no whitespace between these because the front-end JS code
## needs to precisely compute the available width for forum-nav-
## browse-current in order to do truncation of topic names.
<i class="icon icon-reorder"></i><span class="sr">${_("Discussion topics; current selection is: ")}</span><span class="forum-nav-browse-current">${_("All Discussions")}</span><span class="forum-nav-browse-drop-arrow">▾</span>
</a>
<form class="forum-nav-search">
<div class="forum-nav-search-ff-position-fix">
<label>
<span class="sr">${_("Search")}</span>
<input class="forum-nav-search-input" type="text" placeholder="${_("Search all posts")}">
<i class="icon icon-search"></i>
</label>
</div>
</form>
</div>
<div class="forum-nav-refine-bar">
%if is_course_cohorted and is_moderator:
<span class="forum-nav-filter-cohort">
<select class="forum-nav-filter-cohort-control">
<option value="all">${_("View all cohorts")}</option>
%for c in cohorts:
<option value="${c['id']}">${_("View as {cohort_name}").format(cohort_name=c['name'])}</option>
%endfor
</select>
%endif
<%include file="_filter_dropdown.html" />
<div class="forum-nav-thread-list-wrapper">
<div class="forum-nav-refine-bar">
%if is_course_cohorted and is_moderator:
<span class="forum-nav-filter-cohort">
<select class="forum-nav-filter-cohort-control">
<option value="all">${_("View all cohorts")}</option>
%for c in cohorts:
<option value="${c['id']}">${_("View as {cohort_name}").format(cohort_name=c['name'])}</option>
%endfor
</select>
</span>
%endif
<span class="forum-nav-sort">
<select class="forum-nav-sort-control">
## Translators: This is a menu option for sorting forum threads
<option value="date">${_("by recent activity")}</option>
## Translators: This is a menu option for sorting forum threads
<option value="comments">${_("by most activity")}</option>
## Translators: This is a menu option for sorting forum threads
<option value="votes">${_("by most votes")}</option>
</select>
</span>
<span class="forum-nav-sort">
<select class="forum-nav-sort-control">
## Translators: This is a menu option for sorting forum threads
<option value="date">${_("by recent activity")}</option>
## Translators: This is a menu option for sorting forum threads
<option value="comments">${_("by most activity")}</option>
## Translators: This is a menu option for sorting forum threads
<option value="votes">${_("by most votes")}</option>
</select>
</span>
</div>
<div class="search-alerts"></div>
<ul class="forum-nav-thread-list"></ul>
</div>
<div class="search-alerts"></div>
<ul class="forum-nav-thread-list"></ul>
</script>
lms/templates/discussion/index.html
......@@ -37,7 +37,7 @@
data-user-cohort-id="${user_cohort}"
data-course-settings="${course_settings}">
<div class="discussion-body">
<div class="sidebar"></div>
<div class="sidebar forum-nav"></div>
<div class="discussion-column">
</div>
</div>
......
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