Various improvements for chords on the mainview.

openlp/core/lib/__init__.py

@@ -282,12 +282,12 @@ def check_item_selected(list_widget, message):
     return True
 
 
-def clean_tags(text, chords=False):
+def clean_tags(text, remove_chords=False):
     """
     Remove Tags from text for display
 
     :param text: Text to be cleaned
-    :param chords: Clean ChordPro tags
+    :param remove_chords: Clean ChordPro tags
     """
     text = text.replace('<br>', '\n')
     text = text.replace('{br}', '\n')
@@ -296,7 +296,7 @@ def clean_tags(text, chords=False):
         text = text.replace(tag['start tag'], '')
         text = text.replace(tag['end tag'], '')
     # Remove ChordPro tags
-    if chords:
+    if remove_chords:
         text = re.sub(r'\[.+?\]', r'', text)
     return text
 
@@ -322,14 +322,21 @@ def expand_chords(text):
     """
     text_lines = text.split('{br}')
     expanded_text_lines = []
+    chords_on_last_line = False
     for line in text_lines:
         # If a ChordPro is detected in the line, replace it with a html-span tag and wrap the line in a span tag.
         if '[' in line and ']' in line:
-            new_line = '<span class="chordline">'
+            if chords_on_last_line:
-            new_line += re.sub(r'(.*?)\[(.+?)\](.*?)', r'\1<span class="chord" style="display:inline"><span><strong>\2</strong></span></span>\3', line)
+                new_line = '<span class="chordline">'
+            else:
+                new_line = '<span class="chordline firstchordline">'
+                chords_on_last_line = True
+            new_line += re.sub(r'(.*?)\[(.+?)\](.*?)',
+                               r'\1<span class="chord"><span><strong>\2</strong></span></span>\3', line)
             new_line += '</span>'
             expanded_text_lines.append(new_line)
         else:
+            chords_on_last_line = False
             expanded_text_lines.append(line)
     return '{br}'.join(expanded_text_lines)
 
@@ -371,7 +378,7 @@ from .plugin import PluginStatus, StringContent, Plugin
 from .pluginmanager import PluginManager
 from .settingstab import SettingsTab
 from .serviceitem import ServiceItem, ServiceItemType, ItemCapabilities
-from .htmlbuilder import build_html, build_lyrics_format_css, build_lyrics_outline_css
+from .htmlbuilder import build_html, build_lyrics_format_css, build_lyrics_outline_css, build_chords_css
 from .imagemanager import ImageManager
 from .renderer import Renderer
 from .mediamanageritem import MediaManagerItem

openlp/core/lib/htmlbuilder.py

@@ -444,32 +444,8 @@ HTML_SRC = Template("""
         position: relative;
         top: -0.3em;
     }
-    #chords {
+    /* Chords css */${chords_css}
-      /*font-size: 20pt;
+
-      color: gray;
-      background-color: gray;
-      color: white;
-      cursor: pointer;*/
-    }
-    .chordline {
-      line-height: 2.0;
-    }
-    .chordline1 {
-      line-height: 1.0
-    }
-    .chordline span.chord span {
-      position: relative;
-    }
-    .chordline span.chord span strong {
-      position: absolute;
-      top: -1em;
-      left: 0;
-      font-size: 75%;
-      font-weight: normal;
-      line-height: normal;
-      /*font: 30pt sans-serif;
-      color: yellow;*/
-    }
     </style>
     <script>
         var timer = null;
@@ -618,6 +594,26 @@ LYRICS_FORMAT_SRC = Template("""
     height: ${height}px;${font_style}${font_weight}
     """)
 
+CHORDS_FORMAT = Template("""
+    .chordline {
+      line-height: ${chord_line_height};
+    }
+    .chordline span.chord span {
+      position: relative;
+    }
+    .chordline span.chord span strong {
+      position: absolute;
+      top: -0.8em;
+      left: 0;
+      font-size: 75%;
+      font-weight: normal;
+      line-height: normal;
+      display: ${chords_display};
+    }
+    .firstchordline {
+        line-height: ${first_chord_line_height};
+    }""")
+
 
 def build_html(item, screen, is_live, background, image=None, plugins=None):
     """
@@ -662,7 +658,8 @@ def build_html(item, screen, is_live, background, image=None, plugins=None):
                                js_additions=js_additions,
                                bg_image=bgimage_src,
                                image=image_src,
-                               html_additions=html_additions)
+                               html_additions=html_additions,
+                               chords_css=build_chords_css())
 
 
 def webkit_version():
@@ -794,3 +791,16 @@ def build_footer_css(item, height):
     return FOOTER_SRC.substitute(left=item.footer.x(), bottom=bottom, width=item.footer.width(),
                                  family=theme.font_footer_name, size=theme.font_footer_size,
                                  color=theme.font_footer_color, space=whitespace)
+
+
+def build_chords_css():
+    if Settings().value('songs/mainview chords'):
+        chord_line_height = '2.0em'
+        chords_display = 'inline'
+        first_chord_line_height = '2.1em'
+    else:
+        chord_line_height = '1.0em'
+        chords_display = 'none'
+        first_chord_line_height = '1.0em'
+    return CHORDS_FORMAT.substitute(chord_line_height=chord_line_height, chords_display=chords_display,
+                                    first_chord_line_height=first_chord_line_height)

openlp/core/lib/renderer.py

@@ -26,7 +26,7 @@ from PyQt5 import QtGui, QtCore, QtWebKitWidgets
 
 from openlp.core.common import Registry, RegistryProperties, OpenLPMixin, RegistryMixin, Settings
 from openlp.core.lib import FormattingTags, ImageSource, ItemCapabilities, ScreenList, ServiceItem, expand_tags, \
-    build_lyrics_format_css, build_lyrics_outline_css
+    build_lyrics_format_css, build_lyrics_outline_css, build_chords_css
 from openlp.core.common import ThemeLevel
 from openlp.core.ui import MainDisplay
 
@@ -381,10 +381,10 @@ class Renderer(OpenLPMixin, RegistryMixin, RegistryProperties):
                 return main.offsetHeight;
             }
             </script><style>*{margin: 0; padding: 0; border: 0;}
-            #main {position: absolute; top: 0px; %s %s}</style></head><body>
+            #main {position: absolute; top: 0px; %s %s} %s</style></head><body>
             <div id="main"></div></body></html>""" % \
             (build_lyrics_format_css(theme_data, self.page_width, self.page_height),
-             build_lyrics_outline_css(theme_data))
+             build_lyrics_outline_css(theme_data), build_chords_css())
         self.web.setHtml(html)
         self.empty_height = self.web_frame.contentsSize().height()
 

openlp/core/lib/serviceitem.py

@@ -263,7 +263,7 @@ class ServiceItem(RegistryProperties):
                     new_frame = {
                         'title': clean_tags(page),
                         'text': clean_tags(page.rstrip(), True),
-                        'chords_text': expand_chords(clean_tags(page.rstrip(), False)),
+                        'chords_text': clean_tags(expand_chords(page.rstrip()), False),
                         'html': html_data.replace(' ', ' '),
                         'verseTag': verse_tag,
                     }

openlp/plugins/remotes/html/css/chords.css

@@ -68,15 +68,21 @@
   line-height: 1.0
 }
 
+.firstchordline {
+  line-height: 2.1em;
+}
+
 .chordline span.chord span {
   position: relative;
 }
 
 .chordline span.chord span strong {
   position: absolute;
-  top: -1em;
+  top: -0.8em;
   left: 0;
-  font: 30pt sans-serif;
+  font-size: 30pt;
+  font-weight: normal;
+  line-height: normal;
   color: yellow;
 }
 

openlp/plugins/remotes/html/js/chords.js

@@ -177,8 +177,8 @@ window.OpenLP = {
     // Then leave a blank line between following verses
     var transposeValue = getTransposeValue(OpenLP.currentSlides[0].text.split("\n")[0]);
     var chordclass=/class="[a-z\s]*chord[a-z\s]*"\s*style="display:\s?none"/g;
-    var chordclassshow='class="chord" style="display:inline"';
+    var chordclassshow='class="chord"';
-    var regchord=/<span class="chord" style="display:inline"><span><strong>([\(\w#b♭\+\*\d/\)-]+)<\/strong><\/span><\/span>([\u0080-\uFFFF,\w]*)([\u0080-\uFFFF,\w,\s,\.,\,,\!,\?,\;,\:,\|,\",\',\-,\_]*)(<br>)?/g;
+    var regchord=/<span class="chord"><span><strong>([\(\w#b♭\+\*\d/\)-]+)<\/strong><\/span><\/span>([\u0080-\uFFFF,\w]*)([\u0080-\uFFFF,\w,\s,\.,\,,\!,\?,\;,\:,\|,\",\',\-,\_]*)(<br>)?/g;
     var replaceChords=function(mstr,$1,$2,$3,$4) {
       var v='', w='';
         var $1len = 0, $2len = 0, slimchars='fiíIÍjlĺľrtť.,;/ ()|"\'!:\\';
@@ -203,7 +203,7 @@ window.OpenLP = {
       } else {
         if (!$2 && $3.charAt(0) == ' ') {for (c = 0; c < $1len; c++) {w += '&nbsp;';}}
       }
-      return $.grep(['<span class="chord" style="display:inline"><span><strong>', $1, '</strong></span>', $2, w, $3, '</span>', $4], Boolean).join('');
+      return $.grep(['<span class="chord"><span><strong>', $1, '</strong></span>', $2, w, $3, '</span>', $4], Boolean).join('');
     };
     $("#verseorder span").removeClass("currenttag");
     $("#tag" + OpenLP.currentTags[OpenLP.currentSlide]).addClass("currenttag");