Implement theme admin UI to support previewing

LEARNER-2017
This commit is contained in:
Andy Armstrong
2017-07-21 20:42:38 -04:00
parent 2d0fc91136
commit 0f808cec78
41 changed files with 666 additions and 106 deletions

View File

@@ -312,8 +312,11 @@ TEMPLATES = [
# Options specific to this backend.
'OPTIONS': {
'loaders': (
'django.template.loaders.filesystem.Loader',
'django.template.loaders.app_directories.Loader',
# We have to use mako-aware template loaders to be able to include
# mako templates inside django templates (such as main_django.html).
'openedx.core.djangoapps.theming.template_loaders.ThemeTemplateLoader',
'edxmako.makoloader.MakoFilesystemLoader',
'edxmako.makoloader.MakoAppDirectoriesLoader',
),
'context_processors': (
'django.template.context_processors.request',

View File

@@ -3,7 +3,7 @@
// -----------------------------
// Bootstrap theme
@import 'bootstrap/theme';
@import 'cms/bootstrap/theme';
@import 'bootstrap/scss/bootstrap';
// Variables

View File

@@ -72,6 +72,60 @@
}
}
.page-banner {
max-width: $fg-max-width;
margin: 0 auto;
.user-messages {
padding-top: $baseline;
// Hack: force override the global important rule
// that courseware links don't have an underline.
a:hover {
color: $link-color;
text-decoration: underline !important;
}
}
.alert {
margin-bottom: $baseline !important;
padding: $baseline;
border: 1px solid;
.icon-alert {
margin-right: $baseline / 4;
}
&.alert-info {
color: $state-info-text;
background-color: $state-info-bg;
border-color: $state-info-border;
box-shadow: none;
}
&.alert-success {
color: $state-success-text;
background-color: $state-success-bg;
border-color: $state-success-border;
box-shadow: none;
}
&.alert-warning {
color: $state-warning-text;
background-color: $state-warning-bg;
border-color: $state-warning-border;
box-shadow: none;
}
&.alert-danger {
color: $state-danger-text;
background-color: $state-danger-bg;
border-color: $state-danger-border;
box-shadow: none;
}
}
}
.alert, .notification, .prompt {
// types - confirm

View File

@@ -241,6 +241,7 @@ $ui-action-primary-color-focus: $blue-s1 !default;
$ui-link-color: $blue-u2 !default;
$ui-link-color-focus: $blue-s1 !default;
$link-color: $ui-link-color;
// +Specific UI
// ====================
@@ -281,3 +282,23 @@ $action-primary-active-bg: #1AA1DE !default; // $m-blue
$very-light-text: $white !default;
$color-background-alternate: rgb(242, 248, 251) !default;
// ----------------------------
// #COLORS- Bootstrap-style
// ----------------------------
$state-success-text: $black !default;
$state-success-bg: #dff0d8 !default;
$state-success-border: darken($state-success-bg, 5%) !default;
$state-info-text: $black !default;
$state-info-bg: #d9edf7 !default;
$state-info-border: darken($state-info-bg, 7%) !default;
$state-warning-text: $black !default;
$state-warning-bg: #fcf8e3 !default;
$state-warning-border: darken($state-warning-bg, 5%) !default;
$state-danger-text: $black !default;
$state-danger-bg: #f2dede !default;
$state-danger-border: darken($state-danger-bg, 5%) !default;

View File

@@ -9,9 +9,11 @@
<%!
from django.utils.translation import ugettext as _
from openedx.core.djangoapps.util.user_messages import PageLevelMessages
from openedx.core.djangolib.js_utils import (
dump_js_escaped_json, js_escaped_string
)
from openedx.core.djangolib.markup import HTML
%>
<%page expression_filter="h"/>
@@ -75,17 +77,34 @@ from openedx.core.djangolib.js_utils import (
<!-- view -->
<div class="wrapper wrapper-view" dir="${static.dir_rtl()}">
<% online_help_token = self.online_help_token() if hasattr(self, 'online_help_token') else None %>
<%include file="widgets/header.html" args="online_help_token=online_help_token" />
<% online_help_token = self.online_help_token() if hasattr(self, 'online_help_token') else None %>
<%include file="widgets/header.html" args="online_help_token=online_help_token" />
<%
banner_messages = list(PageLevelMessages.user_messages(request))
%>
% if banner_messages:
<div class="page-banner">
<div class="user-messages">
% for message in banner_messages:
<div class="alert ${message.css_class}" role="alert">
<span class="icon icon-alert fa ${message.icon_class}" aria-hidden="true"></span>
${HTML(message.message_html)}
</div>
% endfor
</div>
</div>
% endif
<div id="page-alert">
<%block name="page_alert"></%block>
</div>
<main id="main" aria-label="Content" tabindex="-1">
<div id="content">
<%block name="content"></%block>
</div>
<div id="content" class="content">
<%block name="content"></%block>
</div>
</main>
% if user.is_authenticated():

View File

@@ -0,0 +1,13 @@
## mako
<%page expression_filter="h"/>
## Override the default styles_version to use Bootstrap
<%! main_css = "css/bootstrap/studio-main.css" %>
<%inherit file="../base.html" />
<%block name="title">${page_title if page_title else ''}</%block>
<%block name="content">
<%include file="/fragments/standalone-page-fragment.html" args="fragment=fragment"/>
</%block>

View File

@@ -0,0 +1,15 @@
<%! from openedx.core.djangolib.markup import HTML %>
<%block name="head_extra">
${HTML(fragment.head_html())}
</%block>
<%block name="footer_extra">
${HTML(fragment.foot_html())}
</%block>
<div class="wrapper-content wrapper">
<section class="content">
${HTML(fragment.body_html())}
</section>
</div>

View File

@@ -0,0 +1,10 @@
## mako
<%page expression_filter="h"/>
<%inherit file="../base.html" />
<%block name="title">${page_title if page_title else ''}</%block>
<%block name="content">
<%include file="/fragments/standalone-page-fragment.html" args="fragment=fragment"/>
</%block>

View File

@@ -0,0 +1,13 @@
## mako
<%page expression_filter="h"/>
## Override the default styles_version to the Pattern Library version (version 2)
<%! main_css = "style-main-v2" %>
<%inherit file="../base.html" />
<%block name="title">${page_title if page_title else ''}</%block>
<%block name="content">
<%include file="/fragments/standalone-page-fragment.html" args="fragment=fragment"/>
</%block>

View File

@@ -1,20 +1,9 @@
## Override the default styles_version to use Bootstrap
<%! main_css = "css/bootstrap/studio-main.css" %>
## mako
<%page expression_filter="h"/>
<%!
from openedx.core.djangoapps.util.user_messages import (
register_error_message,
register_info_message,
register_success_message,
register_warning_message,
)
%>
<%
register_info_message(request, _('This is a test message'))
%>
## Override the default styles_version to use Bootstrap
<%! main_css = "css/bootstrap/studio-main.css" %>
<%inherit file="/base.html" />
<%block name="title">Bootstrap Test Page</%block>

View File

@@ -64,6 +64,9 @@ urlpatterns = patterns(
# Darklang View to change the preview language (or dark language)
url(r'^update_lang/', include('openedx.core.djangoapps.dark_lang.urls', namespace='dark_lang')),
# URLs for managing theming
url(r'^theming/', include('openedx.core.djangoapps.theming.urls', namespace='theming')),
# For redirecting to help pages.
url(r'^help_token/', include('help_tokens.urls')),
)