palette/views/brand_configs/show.mustache

<%
# Copyright (C) 2015 - present Instructure, Inc.
#
# This file is part of Canvas.
#
# Canvas is free software: you can redistribute it and/or modify it under
# the terms of the GNU Affero General Public License as published by the Free
# Software Foundation, version 3 of the License.
#
# Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
# A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
# details.
#
# You should have received a copy of the GNU Affero General Public License along
# with this program. If not, see <http://www.gnu.org/licenses/>.
%>

<%
  js_bundle :theme_preview
  css_bundle :theme_preview
%>

<h1 class="theme-preview__page-header">{{#t}}Welcome to the Canvas Theme Editor{{/t}}</h1>
<p>
  <%= t do %>
    This sample page includes common UI elements in Canvas to help you build your custom branding. Once you start making changes to the color values and images in the left sidebar, you will see a <b>Preview Your Changes</b> button. Click it to refresh this page and see how your changes look.
    <% end %>
</p>
<p>
  <%= t do %>
    <em>Important note: Educational institutions have an obligation to make their content as accessible as possible. Instructure recommends at least a 3:1 text-to-background-color ratio to keep your text readable. Easily test your contrast ratios with the
    <%= link_to "WebAIM Color Contrast Checker", "http://webaim.org/resources/contrastchecker/" %></em>.
  <% end %>
</p>
<br />
<div class="content-box">
  <div class="grid-row">
    <div class="col-xs-7">
      <p style="margin-top: 0;">Set Canvas' default text color using the <b>Main Text Color</b> field in Theme Editor. Check this text after you change it to see your edits.</p>
      <div class="ic-Form-group">
        <div class="ic-Form-control">
          <label for="theme-preview-input-1" class="ic-Label">{{#t}}Text input{{/t}}</label>
          <input type="text" id="theme-preview-input-1" class="ic-Input" ></input>
        </div>
        <div class="ic-Form-control">
          <label for="theme-preview-input-3" class="ic-Label">{{#t}}Select input{{/t}}</label>
          <select id="theme-preview-input-3" class="ic-Input">
            <option>{{#t}}Option 1{{/t}}</option>
            <option>{{#t}}Option 2{{/t}}</option>
            <option>{{#t}}Option 3{{/t}}</option>
            <option>{{#t}}Option 4{{/t}}</option>
          </select>
        </div>
        <div class="ic-Form-control">
          <label class="ic-Label">{{#t}}Progress/loading bar{{/t}}</label>
          <div class="progress-bar__bar-container">
            <div class="progress-bar__bar" style="width: 70%;"></div>
          </div>
        </div>
        <div class="ic-Form-control">
          <!-- start super toggle -->
          <label class="ic-Super-toggle--ui-switch" for="theme-preview-input-8">
            <div class="ic-Label">{{#t}}Switch-style checkbox{{/t}}</div>
            <input type="checkbox" id="theme-preview-input-8" class="ic-Super-toggle__input">
            <div class="ic-Super-toggle__container" aria-hidden="true" data-checked="Option A is selected" data-unchecked="Option B is selected">
              <div class="ic-Super-toggle__option--LEFT">
                <i class="icon-muted"></i>
              </div>
              <div class="ic-Super-toggle__switch"></div>
              <div class="ic-Super-toggle__option--RIGHT">
                <i class="icon-unmuted"></i>
              </div>
             </div>
           </label>
          <!-- end super toggle -->
        </div>
        <div class="ic-Checkbox-group">
          <div class="ic-Form-control ic-Form-control--checkbox">
            <input type="checkbox" id="theme-preview-input-4" checked>
            <label class="ic-Label" for="theme-preview-input-4">{{#t}}Regular-style checkbox{{/t}}</label>
          </div>
        </div>
        <div class="ic-Form-control ic-Form-control--radio">
          <div class="ic-Radio">
            <input id="theme-preview-input-5" type="radio" value="hoodie" name="demo-radio-horiz-group-2" checked>
            <label for="theme-preview-input-5" class="ic-Label">{{#t}}Radio button option 1{{/t}}</label>
          </div>
          <div class="ic-Radio">
            <input id="theme-preview-input-6" type="radio" value="frisbee" name="demo-radio-horiz-group-2">
            <label for="theme-preview-input-6" class="ic-Label">{{#t}}Radio button option 2{{/t}}</label>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-4 off-xs-1">
      <div>
        <button type="button" class="Button Button--primary Button--block">{{#t}}Primary color button{{/t}}</button>
        <div class="content-box-mini">
          <button type="button" class="Button Button--primary Button--block" disabled>{{#t}}Primary color button disabled{{/t}}</button>
        </div>
        <div class="content-box-mini">
          <button type="button" class="Button Button--secondary Button--block">{{#t}}Secondary color button{{/t}}</button>
        </div>
        <div class="content-box-mini">
          <button type="button" class="Button Button--secondary Button--block" disabled>{{#t}}Secondary color button disabled{{/t}}</button>
        </div>
        <div class="al-dropdown__container">
          <a class="al-trigger Button Button--block" role="button" href="#">
            {{#t}}Click to test dropdown{{/t}}
            <i class="icon-mini-arrow-down"></i>
          </a>
          <ul class="al-options" role="menu" tabindex="0" aria-hidden="true" aria-expanded="false">
            <li>
              <a href="#" class="icon-edit" tabindex="-1" role="menuitem">{{#t}}Dropdown option 1{{/t}}</a>
            </li>
            <li>
              <a href="#" class="icon-trash" tabindex="-1" role="menuitem">{{#t}}Dropdown option 2{{/t}}</a>
            </li>
          </ul>
        </div>
        <div class="content-box">
          <ul>
            <li><a href="#">{{#t}}Link number 1{{/t}}</a></li>
            <li><a href="#">{{#t}}Link number 2{{/t}}</a></li>
            <li><a href="#">{{#t}}Link number 3{{/t}}</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<ul class="ig-list" id="cond_group_1">
  <li>
    <div class="ig-row">
      <div class="ig-row__layout">
        <div class="ig-type-icon" aria-hidden="true">
          <i class="icon-assignment"></i>
        </div>
        <div class="ig-info">
          <a href="#" class="ig-title">
            {{#t}}An Assignment Name{{/t}}
          </a>
          <div class="ig-details">
            <div class="ig-details__item"><b>Due</b> Nov 4</div>
            <div class="ig-details__item"><b>Available</b> Nov 1</div>
            <div class="ig-details__item">10 pts</div>
          </div>
        </div>
        <div class="ig-admin">
          <span
            class="publish-icon publish-icon-publish"
            data-tooltip=""
            title="Publish"
            role="button"
            tabindex="0">
            <i class="icon-unpublish"></i>
            <span class="publish-text" tabindex="-1">
              &nbsp;{{#t}}Publish{{/t}}
            </span>
            <span class="screenreader-only accessible_label">
              {{#t}}Unpublished. Click to publish.{{/t}}
            </span>
          </span>
          <div class="inline-block">
            <a class="al-trigger al-trigger-gray" href="#" role="button">
              <i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
              
            </a>
            <ul class="al-options">
              <li><a href="#">{{#t}}Edit{{/t}}</a></li>
              <li><a href="#">{{#t}}Delete{{/t}}</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div class="ig-row ig-published">
      <div class="ig-row__layout">
        <div class="ig-type-icon" aria-hidden="true">
          <i class="icon-assignment"></i>
        </div>
        <div class="ig-info">
          <a href="#" class="ig-title">
            {{#t}}Another Assignment Name{{/t}}
          </a>
          <div class="ig-details">
            <div class="ig-details__item"><b>Due</b> June 20</div>
            <div class="ig-details__item"><b>Available</b> May 1</div>
            <div class="ig-details__item">100 pts</div>
          </div>
        </div>
        <div class="ig-admin">
          <span
            class="publish-icon publish-icon-publish"
            data-tooltip=""
            title="Publish"
            role="button"
            tabindex="0">
              <i class="icon-unpublish"></i>
              <span class="publish-text" tabindex="-1">
                &nbsp;{{#t}}Publish{{/t}}
              </span>
              <span class="screenreader-only accessible_label">
                {{#t}}Unpublished. Click to publish.{{/t}}
              </span>
            </span>
          <div class="inline-block">
            <a class="al-trigger al-trigger-gray" href="#" role="button">
              <i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
              
            </a>
            <ul class="al-options">
              <li><a href="#">{{#t}}Edit{{/t}}</a></li>
              <li><a href="#">{{#t}}Delete{{/t}}</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>
<div class="content-box">
  <div class="ic-app-nav-toggle-and-crumbs ic-app-nav-toggle-and-crumbs--theme-preview">
    <button type="button" aria-hidden="true" class="Button Button--link ic-app-course-nav-toggle">
      <i class="icon-hamburger"></i>
    </button>
    <div class="ic-app-crumbs">
      <nav aria-label="breadcrumbs" id="breadcrumbs" role="navigation">
        <ul>
          <li class="home">
            <a href="#">
              <span class="ellipsible">
                <i class="icon-home" title="My Dashboard"></i>
              </span>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="ellipsible">{{#t}}Breadcrumb 1{{/t}}</span>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="ellipsible">{{#t}}Breadcrumb 2{{/t}}</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
  <div class="content-box">
    <div class="grid-row">
      <div class="col-xs-3">
        <div class="list-view">
          <nav aria-label="context" role="navigation">
            <ul>
              <li><a href="#">{{#t}}Context nav link{{/t}}</a></li>
              <li><a class="active" href="#">{{#t}}Context nav link active{{/t}}</a></li>
              <li><a href="#">{{#t}}Context nav link{{/t}}</a></li>
              <li><a href="#">{{#t}}Context nav link{{/t}}</a></li>
              <li><a href="#">{{#t}}Context nav link{{/t}}</a></li>
            </ul>
          </nav>
        </div>
      </div>
      <div class="col-xs-8 off-xs-1">
        <table class="ic-Table ic-Table--hover-row">
          <thead>
            <tr>
              <th>{{#t}}Name{{/t}}</th>
              <th>{{#t}}Email address{{/t}}</th>
              <th>{{#t}}More information{{/t}}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><a href="#">Joe Bloggs</a></td>
              <td>jbloggs1980@gmail.com</td>
              <td>{{#t}}Hover over me{{/t}}</td>
            </tr>
            <tr>
              <td><a href="#">Jane Doe</a></td>
              <td>jane-doe-11@hotmail.com</td>
              <td>{{#t}}Hover over me{{/t}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<div class="grid-row">
  <div class="col-xs-12 col-lg-7">
    <div class="content-box-mini">
      <div id="theme-preview-tabs">
        <ul>
          <li><a href="#tabs-1">{{#t}}Tab 1{{/t}}</a></li>
          <li><a href="#tabs-2">{{#t}}Tab 2{{/t}}</a></li>
          <li><a href="#tabs-3">{{#t}}Tab 3{{/t}}</a></li>
        </ul>
        <div id="tabs-1">{{#t}}Tab 1 content{{/t}}</div>
        <div id="tabs-2">{{#t}}Tab 2 content{{/t}}</div>
        <div id="tabs-3">{{#t}}Tab 3 content{{/t}}</div>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-lg-4 off-lg-1">
    <div class="content-box-mini">
      <div class="accordion ui-accordion--mini" id="theme-preview-accordion">
        <h3><a href="#">{{#t}}Accordion Section 1{{/t}}</a></h3>
        <div>
          <div class="pad-box-mini">
            {{#t}}Content for Section 1{{/t}}
          </div>
        </div>
        <h3><a href="#">{{#t}}Accordion Section 2{{/t}}</a></h3>
        <div>
          <div class="pad-box-mini">
            {{#t}}Content for Section 2{{/t}}
          </div>
        </div>
        <h3><a href="#">{{#t}}Accordion Section 3{{/t}}</a></h3>
        <div>
          <div class="pad-box-mini">
            {{#t}}Content for Section 3{{/t}}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="content-box">
  <h3 id="login-preview">
    {{#t}}Login{{/t}}
  </h3>
  <div class="ic-login--theme-preview">
    <iframe id="login-preview-iframe" src="<%= canvas_login_url(previewing_from_themeeditor: true) %>" title="{{#t}}Login{{/t}}" ></iframe>
  </div>
</div>