Added theming support and default LMS theme with high contrast white-blue colors…

Added theming support and default LMS theme with high contrast white-blue colors and more spacing in tables

poll/poll.py

@@ -33,6 +33,7 @@ from xblock.fields import Scope, String, Dict, List, Boolean, Integer
 from xblock.fragment import Fragment
 from xblockutils.publish_event import PublishEventMixin
 from xblockutils.resources import ResourceLoader
+from xblockutils.settings import XBlockWithSettingsMixin, ThemableXBlockMixin
 
 HAS_EDX_ACCESS = False
 try:
@@ -45,9 +46,15 @@ except ImportError:
     pass
 
 
-class ResourceMixin(object):
+class ResourceMixin(XBlockWithSettingsMixin, ThemableXBlockMixin):
     loader = ResourceLoader(__name__)
 
+    block_settings_key = 'poll'
+    default_theme_config = {
+        'package': 'poll',
+        'locations': ["public/css/themes/lms.css"]
+    }
+
     @staticmethod
     def resource_string(path):
         """Handy helper for getting resources from our kit."""
@@ -64,9 +71,11 @@ class ResourceMixin(object):
         frag.add_css(self.resource_string(css))
         frag.add_javascript(self.resource_string(js))
         frag.initialize_js(js_init)
+        self.include_theme_files(frag)
         return frag
 
 
+@XBlock.wants('settings')
 class PollBase(XBlock, ResourceMixin, PublishEventMixin):
     """
     Base class for Poll-like XBlocks.

poll/public/css/themes/lms.css

+.themed-xblock.poll-block .poll-voting-thanks span {
+    /* default LMS colors - contrast 11.0 */
+    background-color: #ffffff;
+    color: #3c3c3c;
+}
+
+.themed-xblock.poll-block .poll-top-choice {
+    /* close to LMS color for links and menu items - contrast 5.5 with white and 4.6 with e5ebee*/
+    color: #0070a0;
+}
+
+.themed-xblock.poll-block .poll-answer-label {
+    vertical-align: middle;
+}
+
+.themed-xblock.poll-block .survey-table thead tr th {
+    font-size: 1em;
+}
+
+.themed-xblock.poll-block .survey-row td {
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+/* LMS have very specific css selector that sets ~1.5em bottom margin */
+.themed-xblock.poll-block table.survey-table .survey-row td p,
+.themed-xblock.poll-block ul.poll-answers li.poll-answer .poll-answer p,
+.themed-xblock.poll-block ul.poll-results li.poll-result .poll-answer-label p {
+    margin-bottom: 0;
+}
+
+.themed-xblock.poll-block ul.poll-results li.poll-spacer {
+    margin-bottom: 0;
+}
\ No newline at end of file

poll/public/html/poll.html

 {{ js_template|safe }}
-<div class="poll-block" data-private="{% if private_results %}1{% endif %}" data-can-vote="{% if can_vote %}1{% endif %}">
+<div class="poll-block themed-xblock" data-private="{% if private_results %}1{% endif %}" data-can-vote="{% if can_vote %}1{% endif %}">
 {# If no form is present, the Javascript will load the results instead. #}
 {% if private_results or not choice %}
   <h3 class="poll-header">{{display_name}}</h3>

poll/public/html/survey.html

 {{ js_template|safe }}
-<div class="poll-block" data-private="{% if private_results %}1{% endif %}" data-can-vote="{% if can_vote %}1{% endif %}">
+<div class="poll-block themed-xblock" data-private="{% if private_results %}1{% endif %}" data-can-vote="{% if can_vote %}1{% endif %}">
     {# If no form is present, the Javascript will load the results instead. #}
     {% if not choices or private_results %}
     <h3 class="poll-header">{{block_name}}</h3>