ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix Select icon in conversations dropdown 

refs: CNVS-29785

This was fixed before in https://gerrit.instructure.com/39153
but it broke again and never got caught because
node-sass let the @extend fail silently even though
it couldn't find the css it was trying to @extend.
(since the sheet that has the icons is loaded in
common and conversations is loaded in its own sheet,
you can't @extend something that is not already in the
bundle your rendering)

I filed a new ticket that is a clone of the original:
fixes: CNVS-29766

here's the commit message of the original bug:
    fixes CNVS-14436

    This fixes the icon not showing up correctly in the conversations
    dropdown

    Test Plan:

    - Go to Inbox
    - Click on "All Courses"
    - Make sure a checkmark icon shows on the selected course
    - Also click on "Compose a Message"
    - Make sure the checkmark also appears in the Courses dropdown here

Change-Id: I3c0c753fdc1020366d9fbe2cb823f8eb268c4eb9
Reviewed-on: https://gerrit.instructure.com/81511
Reviewed-by: Brent Burgoyne <bburgoyne@instructure.com>
Tested-by: Jenkins
QA-Review: August Thornton <august@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
This commit is contained in:
Ryan Shaw 2016-06-02 16:50:05 -06:00
parent cf2f5e00d0
commit 7ebf11afef
3 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/stylesheets/components/_canvas-icons.scss
View File

@ -590,3 +590,10 @@ h1, h2, h3, h4, .h1, .h2, .h3, .h4, p {
.icon-x:before { content: "\f1b1"; }
.icon-zipped:before { content: "\f1b2"; }
// conversations_new uses bootstrap-select to show a dropdown picker of which
// course to show messages for, bootstrap-select adds the markup <i class="icon-ok...>
// to designate which item in the menu is selected. we want that to use our .icon-check
// icon, but since we don't control the markup it adds, we can't tell it to use .icon-check
// instead, we just have .icon-ok copy .icon-check's styles here
.icon-ok {@extend .icon-check}

3
app/stylesheets/pages/conversations/_conversations_new.scss
View File

@ -584,9 +584,6 @@ h2.subject {
}
i.icon-ok:before {
// this is why we need the component loaded into the compiler sheet
// TODO: fix it so we're not using bootstrap.js and their classes
@extend .icon-check:before;
vertical-align: baseline;
}

7
public/fonts/icons/_canvas-icons.scss
View File

@ -404,3 +404,10 @@ h1, h2, h3, h4, .h1, .h2, .h3, .h4, p {
<%= glyphs %>
// conversations_new uses bootstrap-select to show a dropdown picker of which
// course to show messages for, bootstrap-select adds the markup <i class="icon-ok...>
// to designate which item in the menu is selected. we want that to use our .icon-check
// icon, but since we don't control the markup it adds, we can't tell it to use .icon-check
// instead, we just have .icon-ok copy .icon-check's styles here
.icon-ok {@extend .icon-check}