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 ...@@ -93,6 +93,10 @@ class @DiscussionUtil
"notifications_status" : "/notification_prefs/status/" "notifications_status" : "/notification_prefs/status/"
}[name] }[name]
@ignoreEnterKey: (event) =>
if event.which == 13
event.preventDefault()
@activateOnSpace: (event, func) -> @activateOnSpace: (event, func) ->
if event.which == 32 if event.which == 32
event.preventDefault() event.preventDefault()
......
common/test/acceptance/pages/lms/discussion.py
...@@ -353,12 +353,7 @@ class DiscussionTabHomePage(CoursePage, DiscussionPageMixin): ...@@ -353,12 +353,7 @@ class DiscussionTabHomePage(CoursePage, DiscussionPageMixin):
return self.q(css=".discussion-body section.home-header").present return self.q(css=".discussion-body section.home-header").present
def perform_search(self, text="dummy"): def perform_search(self, text="dummy"):
self.q(css=".discussion-body .sidebar .search").first.click() self.q(css=".forum-nav-search-input").fill(text + chr(10))
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))
EmptyPromise( EmptyPromise(
self.is_ajax_finished, self.is_ajax_finished,
"waiting for server to return result" "waiting for server to return result"
......
lms/static/sass/discussion/_discussion.scss
...@@ -595,299 +595,6 @@ body.discussion { ...@@ -595,299 +595,6 @@ body.discussion {
box-shadow: none; box-shadow: none;
line-height: 1.4; 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 { .bottom-post-status {
padding: 30px; padding: 30px;
font-size: 20px; 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 // 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 // navigation - sort and filter bar
// -------------------------------- // --------------------------------
......
lms/templates/discussion/_filter_dropdown.html
...@@ -12,41 +12,43 @@ ...@@ -12,41 +12,43 @@
</%def> </%def>
<%def name="render_entry(entries, entry)"> <%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>
<%def name="render_category(categories, category)"> <%def name="render_category(categories, category)">
<li> <li class="forum-nav-browse-menu-item">
<a href="#" class="drop-menu-parent-category"><span class="board-name">${category}</span></a> <a href="#" class="forum-nav-browse-title">${category}</a>
<ul> <ul class="forum-nav-browse-submenu">
${render_dropdown(categories[category])} ${render_dropdown(categories[category])}
</ul> </ul>
</li> </li>
</%def> </%def>
<div class="browse-topic-drop-menu-wrapper"> <div class="forum-nav-browse-menu-wrapper" style="display: none">
<div class="browse-topic-drop-search"> <form class="forum-nav-browse-filter">
<label class="sr" for="browse-topic">${_("Filter Topics")}</label> <label>
<input type="text" id="browse-topic" class="browse-topic-drop-search-input" placeholder="${_('filter topics')}"> <span class="sr">${_("Filter Topics")}</span>
</div> <input type="text" class="forum-nav-browse-filter-input" placeholder="${_("filter topics")}">
<ul class="browse-topic-drop-menu"> <i class="icon icon-filter"></i>
<li> </label>
<a href="#" class="drop-menu-meta-category"> </form>
<span class="board-name" data-discussion_id='#all'>${_("Show All Discussions")}</span> <ul class="forum-nav-browse-menu">
</a> <li class="forum-nav-browse-menu-item forum-nav-browse-menu-all">
<a href="#" class="forum-nav-browse-title">${_("All Discussions")}</a>
</li> </li>
%if flag_moderator: %if flag_moderator:
<li> <li class="forum-nav-browse-menu-item forum-nav-browse-menu-flagged">
<a href="#"> <a href="#" class="forum-nav-browse-title"><i class="icon icon-flag"></i>${_("Flagged Discussions")}</a>
<span class="board-name" data-discussion_id='#flagged'><i class="icon-flag" style="padding-right:5px;"></i>${_("Show Flagged Discussions")}</span>
</a>
</li> </li>
%endif %endif
<li> <li class="forum-nav-browse-menu-item forum-nav-browse-menu-following">
<a href="#" class="drop-menu-meta-category"> <a href="#" class="forum-nav-browse-title"><i class="icon icon-star"></i>${_("Posts I'm Following")}</a>
<span class="board-name" data-discussion_id='#following'><i class="icon-star" style="padding-right:5px;"></i>${_("Posts I'm Following")}</span>
</a>
</li> </li>
${render_dropdown(category_map)} ${render_dropdown(category_map)}
</ul> </ul>
......
lms/templates/discussion/_thread_list_template.html
<%! from django.utils.translation import ugettext as _ %> <%! from django.utils.translation import ugettext as _ %>
<script type="text/template" id="thread-list-template"> <script type="text/template" id="thread-list-template">
<div class="browse-search"> <div class="forum-nav-header">
<div class="home"> <a href="#" class="forum-nav-browse" aria-haspopup="true">
<a href="#" class="home-icon"> ## There is no whitespace between these because the front-end JS code
<i class="icon icon-home"></i> ## needs to precisely compute the available width for forum-nav-
<span class="sr">${_("Discussion Home")}</span> ## browse-current in order to do truncation of topic names.
</a> <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>
</div> </a>
<div class="browse is-open"> <form class="forum-nav-search">
<a href="#" class="browse-topic-drop-icon"> <div class="forum-nav-search-ff-position-fix">
<i class="icon icon-reorder"></i> <label>
<span class="sr">${_("Discussion Topics")}</span> <span class="sr">${_("Search")}</span>
</a> <input class="forum-nav-search-input" type="text" placeholder="${_("Search all posts")}">
<a href="#" class="browse-topic-drop-btn" aria-haspopup="true" aria-owns="browse-topic-drop-menu"> <i class="icon icon-search"></i>
<span class="sr">${_("Discussion topics; current selection is: ")}</span> </label>
<span class="current-board">${_("Show All Discussions")}</span> </div>
<span class="drop-arrow" aria-hidden="true">▾</span> </form>
</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> </div>
<div class="forum-nav-refine-bar"> <%include file="_filter_dropdown.html" />
%if is_course_cohorted and is_moderator: <div class="forum-nav-thread-list-wrapper">
<span class="forum-nav-filter-cohort"> <div class="forum-nav-refine-bar">
<select class="forum-nav-filter-cohort-control"> %if is_course_cohorted and is_moderator:
<option value="all">${_("View all cohorts")}</option> <span class="forum-nav-filter-cohort">
%for c in cohorts: <select class="forum-nav-filter-cohort-control">
<option value="${c['id']}">${_("View as {cohort_name}").format(cohort_name=c['name'])}</option> <option value="all">${_("View all cohorts")}</option>
%endfor %for c in cohorts:
</select> <option value="${c['id']}">${_("View as {cohort_name}").format(cohort_name=c['name'])}</option>
%endif %endfor
</select>
</span>
%endif
<span class="forum-nav-sort"> <span class="forum-nav-sort">
<select class="forum-nav-sort-control"> <select class="forum-nav-sort-control">
## Translators: This is a menu option for sorting forum threads ## Translators: This is a menu option for sorting forum threads
<option value="date">${_("by recent activity")}</option> <option value="date">${_("by recent activity")}</option>
## Translators: This is a menu option for sorting forum threads ## Translators: This is a menu option for sorting forum threads
<option value="comments">${_("by most activity")}</option> <option value="comments">${_("by most activity")}</option>
## Translators: This is a menu option for sorting forum threads ## Translators: This is a menu option for sorting forum threads
<option value="votes">${_("by most votes")}</option> <option value="votes">${_("by most votes")}</option>
</select> </select>
</span> </span>
</div>
<div class="search-alerts"></div>
<ul class="forum-nav-thread-list"></ul>
</div> </div>
<div class="search-alerts"></div>
<ul class="forum-nav-thread-list"></ul>
</script> </script>
lms/templates/discussion/index.html
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
data-user-cohort-id="${user_cohort}" data-user-cohort-id="${user_cohort}"
data-course-settings="${course_settings}"> data-course-settings="${course_settings}">
<div class="discussion-body"> <div class="discussion-body">
<div class="sidebar"></div> <div class="sidebar forum-nav"></div>
<div class="discussion-column"> <div class="discussion-column">
</div> </div>
</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