GNOME.org
 

[yelp-xsl] mal2html-ui: Close button on ui:overlay & Esc to close

commit f0cfe2782364680d9cb8a01f82a71caca3a45c03
Author: Shaun McCance <shaunm gnome org>
Date:   Fri Nov 2 11:45:05 2012 -0400

    mal2html-ui: Close button on ui:overlay & Esc to close

 xslt/common/domains/yelp-xsl.pot    |   99 ++++++++++++++++++----------------
 xslt/common/domains/yelp-xsl.xml.in |    5 ++
 xslt/mallard/html/mal2html-page.xsl |   45 ++++++++++++++--
 xslt/mallard/html/mal2html-ui.xsl   |   14 ++++-
 4 files changed, 109 insertions(+), 54 deletions(-)
---
diff --git a/xslt/common/domains/yelp-xsl.pot b/xslt/common/domains/yelp-xsl.pot
index e422f87..0f967d2 100644
--- a/xslt/common/domains/yelp-xsl.pot
+++ b/xslt/common/domains/yelp-xsl.pot
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
-"POT-Creation-Date: 2012-09-29 10:35-0400\n"
+"POT-Creation-Date: 2012-11-02 11:42-0400\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL ADDRESS>\n"
 "Language-Team: LANGUAGE <LL li org>\n"
@@ -108,131 +108,136 @@ msgstr ""
 msgid "Candidate"
 msgstr ""
 
-#. Default title for a colophon section.
+#. Accessible title for an close button.
 #: yelp-xsl.xml.in:130(msg/msgstr)
+msgid "Close"
+msgstr ""
+
+#. Default title for a colophon section.
+#: yelp-xsl.xml.in:135(msg/msgstr)
 msgid "Colophon"
 msgstr ""
 
 #. Title for license information when it's a CC license.
-#: yelp-xsl.xml.in:135(msg/msgstr)
+#: yelp-xsl.xml.in:140(msg/msgstr)
 msgid "Creative Commons"
 msgstr ""
 
 #. Default title for a dedication section.
-#: yelp-xsl.xml.in:140(msg/msgstr)
+#: yelp-xsl.xml.in:145(msg/msgstr)
 msgid "Dedication"
 msgstr ""
 
 #. Revision status of a document or page. Most content has been
 #. written, but revisions are still happening.
 #. 
-#: yelp-xsl.xml.in:148(msg/msgstr)
+#: yelp-xsl.xml.in:153(msg/msgstr)
 msgid "Draft"
 msgstr ""
 
 #. Title for a list of editors.
-#: yelp-xsl.xml.in:153(msg/msgstr)
+#: yelp-xsl.xml.in:158(msg/msgstr)
 msgid "Edited By"
 msgstr ""
 
 #. Revision status of a document or page. A senior member of the
 #. documentation team has reviewed and approved.
 #. 
-#: yelp-xsl.xml.in:161(msg/msgstr)
+#: yelp-xsl.xml.in:166(msg/msgstr)
 msgid "Final"
 msgstr ""
 
 #. Default title for a glossary.
-#: yelp-xsl.xml.in:166(msg/msgstr)
+#: yelp-xsl.xml.in:171(msg/msgstr)
 msgid "Glossary"
 msgstr ""
 
 #. Accessible title for an important note.
-#: yelp-xsl.xml.in:171(msg/msgstr)
+#: yelp-xsl.xml.in:176(msg/msgstr)
 msgid "Important"
 msgstr ""
 
 #. Revision status of a document or page. Work has begun, but
 #. not all content has been written.
 #. 
-#: yelp-xsl.xml.in:179(msg/msgstr)
+#: yelp-xsl.xml.in:184(msg/msgstr)
 msgid "Incomplete"
 msgstr ""
 
 #. Default title for an index of terms in a book.
-#: yelp-xsl.xml.in:184(msg/msgstr)
+#: yelp-xsl.xml.in:189(msg/msgstr)
 msgid "Index"
 msgstr ""
 
 #. Default title for a DocBook legal notice.
-#: yelp-xsl.xml.in:189(msg/msgstr)
+#: yelp-xsl.xml.in:194(msg/msgstr)
 msgid "Legal"
 msgstr ""
 
 #. Generic title for license information when it's not a known license.
 #. 
-#: yelp-xsl.xml.in:196(msg/msgstr)
+#: yelp-xsl.xml.in:201(msg/msgstr)
 msgid "License"
 msgstr ""
 
 #. Title for a list of maintainers.
-#: yelp-xsl.xml.in:201(msg/msgstr)
+#: yelp-xsl.xml.in:206(msg/msgstr)
 msgid "Maintained By"
 msgstr ""
 
 #. Automatic heading above a list of guide links.
-#: yelp-xsl.xml.in:206(msg/msgstr)
+#: yelp-xsl.xml.in:211(msg/msgstr)
 msgid "More Information"
 msgstr ""
 
 #. Link text for a link to the next page in a series.
-#: yelp-xsl.xml.in:211(msg/msgstr)
+#: yelp-xsl.xml.in:216(msg/msgstr)
 msgid "Next"
 msgstr ""
 
 #. Accessible title for a note.
-#: yelp-xsl.xml.in:216(msg/msgstr)
+#: yelp-xsl.xml.in:221(msg/msgstr)
 msgid "Note"
 msgstr ""
 
 #. Title for a list contributors other than authors, editors, translators,
 #. or other types we have specific lists for.
 #. 
-#: yelp-xsl.xml.in:224(msg/msgstr)
+#: yelp-xsl.xml.in:229(msg/msgstr)
 msgid "Other Credits"
 msgstr ""
 
 #. Revision status of a document or page. Content was once current,
 #. but needs to be updated to reflect software updates.
 #. 
-#: yelp-xsl.xml.in:232(msg/msgstr)
+#: yelp-xsl.xml.in:237(msg/msgstr)
 msgid "Outdated"
 msgstr ""
 
 #. Tooltip on play/pause buttons for audio and video objects.
-#: yelp-xsl.xml.in:237(msg/msgstr)
+#: yelp-xsl.xml.in:242(msg/msgstr)
 msgid "Pause"
 msgstr ""
 
 #. Tooltip on play/pause buttons for audio and video objects.
-#: yelp-xsl.xml.in:242(msg/msgstr)
+#: yelp-xsl.xml.in:247(msg/msgstr)
 msgid "Play"
 msgstr ""
 
 #. Link text for a link to the previous page in a series.
-#: yelp-xsl.xml.in:247(msg/msgstr)
+#: yelp-xsl.xml.in:252(msg/msgstr)
 msgid "Previous"
 msgstr ""
 
 #. Revision status of a document or page. Content has been written
 #. and should be reviewed by other team members.
 #. 
-#: yelp-xsl.xml.in:255(msg/msgstr)
+#: yelp-xsl.xml.in:260(msg/msgstr)
 msgid "Ready for review"
 msgstr ""
 
 #. Automatic heading above a list of see-also links.
-#: yelp-xsl.xml.in:260(msg/msgstr)
+#: yelp-xsl.xml.in:265(msg/msgstr)
 msgid "See Also"
 msgstr ""
 
@@ -240,52 +245,52 @@ msgstr ""
 #. This is used a tooltip on a link to shrink images back down after
 #. they've been expanded to full size.
 #. 
-#: yelp-xsl.xml.in:269(msg/msgstr)
+#: yelp-xsl.xml.in:274(msg/msgstr)
 msgid "Scale images down"
 msgstr ""
 
 #. Accessible title for a sidebar note.
-#: yelp-xsl.xml.in:274(msg/msgstr)
+#: yelp-xsl.xml.in:279(msg/msgstr)
 msgid "Sidebar"
 msgstr ""
 
 #. Revision status of a document or page. No content has been written yet.
 #. 
-#: yelp-xsl.xml.in:281(msg/msgstr)
+#: yelp-xsl.xml.in:286(msg/msgstr)
 msgid "Stub"
 msgstr ""
 
 #. Default title for a refsynopsisdiv element. This is the common section
 #. title found in most UNIX man pages.
 #. 
-#: yelp-xsl.xml.in:289(msg/msgstr)
+#: yelp-xsl.xml.in:294(msg/msgstr)
 msgid "Synopsis"
 msgstr ""
 
 #. Accessible title for a tip.
-#: yelp-xsl.xml.in:294(msg/msgstr)
+#: yelp-xsl.xml.in:299(msg/msgstr)
 msgid "Tip"
 msgstr ""
 
 #. Title for a list of translators.
-#: yelp-xsl.xml.in:299(msg/msgstr)
+#: yelp-xsl.xml.in:304(msg/msgstr)
 msgid "Translated By"
 msgstr ""
 
 #. Figures can automatically scale images down to fit the page width.
 #. This is used a tooltip on a link to expand images to full size.
 #. 
-#: yelp-xsl.xml.in:307(msg/msgstr)
+#: yelp-xsl.xml.in:312(msg/msgstr)
 msgid "View images at normal size"
 msgstr ""
 
 #. Accessible title for a warning.
-#: yelp-xsl.xml.in:312(msg/msgstr)
+#: yelp-xsl.xml.in:317(msg/msgstr)
 msgid "Warning"
 msgstr ""
 
 #. Title for a list of authors.
-#: yelp-xsl.xml.in:317(msg/msgstr)
+#: yelp-xsl.xml.in:322(msg/msgstr)
 msgid "Written By"
 msgstr ""
 
@@ -298,7 +303,7 @@ msgstr ""
 #. 
 #. <biblioentry.label/> - The term being defined by the glossary entry
 #. 
-#: yelp-xsl.xml.in:333(msg/msgstr)
+#: yelp-xsl.xml.in:338(msg/msgstr)
 msgid "View the bibliography entry <biblioentry.label/>."
 msgstr ""
 
@@ -320,7 +325,7 @@ msgstr ""
 #. 
 #. <biblioentry.label/> - The text content of the bibliography label
 #. 
-#: yelp-xsl.xml.in:356(msg/msgstr)
+#: yelp-xsl.xml.in:361(msg/msgstr)
 msgid "[<biblioentry.label/>]"
 msgstr ""
 
@@ -336,7 +341,7 @@ msgstr ""
 #. <citation.label/> - The text content of the citation element, possibly
 #.                     as a link to an entry in the bibliography
 #. 
-#: yelp-xsl.xml.in:373(msg/msgstr)
+#: yelp-xsl.xml.in:378(msg/msgstr)
 msgid "[<citation.label/>]"
 msgstr ""
 
@@ -364,7 +369,7 @@ msgstr ""
 #. <comment.name/> - The name of the person making the comment
 #. <comment.date/> - The date the comment was made
 #. 
-#: yelp-xsl.xml.in:402(msg/msgstr)
+#: yelp-xsl.xml.in:407(msg/msgstr)
 msgid "from <comment.name/> on <comment.date/>"
 msgstr ""
 
@@ -391,7 +396,7 @@ msgstr ""
 #. 
 #. <comment.name/> - The name of the person making the comment
 #. 
-#: yelp-xsl.xml.in:430(msg/msgstr)
+#: yelp-xsl.xml.in:435(msg/msgstr)
 msgid "from <comment.name/>"
 msgstr ""
 
@@ -403,7 +408,7 @@ msgstr ""
 #. <copyright.years/> - The years the copyrightable material was made
 #. <copyright.name/>  - The person or entity that holds the copyright
 #. 
-#: yelp-xsl.xml.in:443(msg/msgstr)
+#: yelp-xsl.xml.in:448(msg/msgstr)
 msgid "Â <copyright.years/> <copyright.name/>"
 msgstr ""
 
@@ -414,7 +419,7 @@ msgstr ""
 #. 
 #. <string/> - The linked-to email address
 #. 
-#: yelp-xsl.xml.in:455(msg/msgstr)
+#: yelp-xsl.xml.in:460(msg/msgstr)
 msgid "Send email to â<string/>â."
 msgstr ""
 
@@ -425,7 +430,7 @@ msgstr ""
 #. 
 #. <glossterm/> - The term being defined by the glossary entry
 #. 
-#: yelp-xsl.xml.in:467(msg/msgstr)
+#: yelp-xsl.xml.in:472(msg/msgstr)
 msgid "Read the definition for â<glossterm/>â."
 msgstr ""
 
@@ -445,7 +450,7 @@ msgstr ""
 #. 
 #. <glosssee/> - The actual link or links of the cross reference
 #. 
-#: yelp-xsl.xml.in:488(msg/msgstr)
+#: yelp-xsl.xml.in:493(msg/msgstr)
 msgid "See <glosssee/>."
 msgstr ""
 
@@ -466,7 +471,7 @@ msgstr ""
 #. 
 #. <glosssee/> - The actual link or links of the cross reference
 #. 
-#: yelp-xsl.xml.in:510(msg/msgstr)
+#: yelp-xsl.xml.in:515(msg/msgstr)
 msgid "See also <glosssee/>."
 msgstr ""
 
@@ -477,7 +482,7 @@ msgstr ""
 #. 
 #. <node/> - The text content of the quote element
 #. 
-#: yelp-xsl.xml.in:522(msg/msgstr)
+#: yelp-xsl.xml.in:527(msg/msgstr)
 msgid "â<node/>â"
 msgstr ""
 
@@ -488,7 +493,7 @@ msgstr ""
 #. 
 #. <node/> - The text content of the quote element
 #. 
-#: yelp-xsl.xml.in:534(msg/msgstr)
+#: yelp-xsl.xml.in:539(msg/msgstr)
 msgid "â<node/>â"
 msgstr ""
 
@@ -502,7 +507,7 @@ msgstr ""
 #. 
 #. <seeie/> - The actual link or links of the cross reference
 #. 
-#: yelp-xsl.xml.in:549(msg/msgstr)
+#: yelp-xsl.xml.in:554(msg/msgstr)
 msgid "See <seeie/>."
 msgstr ""
 
@@ -516,7 +521,7 @@ msgstr ""
 #. 
 #. <seeie/> - The actual link or links of the cross reference
 #. 
-#: yelp-xsl.xml.in:564(msg/msgstr)
+#: yelp-xsl.xml.in:569(msg/msgstr)
 msgid "See also <seeie/>."
 msgstr ""
 
diff --git a/xslt/common/domains/yelp-xsl.xml.in b/xslt/common/domains/yelp-xsl.xml.in
index 27f357b..df607b5 100644
--- a/xslt/common/domains/yelp-xsl.xml.in
+++ b/xslt/common/domains/yelp-xsl.xml.in
@@ -125,6 +125,11 @@ reviewed, and it awaiting a final approval.
 <msgstr>Candidate</msgstr>
 </msg>
 
+<msg id="Close">
+<its:locNote>Accessible title for an close button.</its:locNote>
+<msgstr>Close</msgstr>
+</msg>
+
 <msg id="Colophon">
 <its:locNote>Default title for a colophon section.</its:locNote>
 <msgstr>Colophon</msgstr>
diff --git a/xslt/mallard/html/mal2html-page.xsl b/xslt/mallard/html/mal2html-page.xsl
index 6b66a68..7e3b2b9 100644
--- a/xslt/mallard/html/mal2html-page.xsl
+++ b/xslt/mallard/html/mal2html-page.xsl
@@ -936,9 +936,10 @@ div.ui-overlay {
   width: 100%;
   z-index: 10;
 }
-div.ui-overlay > div.contents {
+div.ui-overlay > div.inner {
+  text-align: </xsl:text><xsl:value-of select="$right"/><xsl:text>;
   display: inline-block;
-  padding: 8px;
+  padding: 0 8px 8px 8px;
   background-color: </xsl:text><xsl:value-of select="$color.gray_background"/><xsl:text>;
   border: solid 1px </xsl:text><xsl:value-of select="$color.text_light"/><xsl:text>;
   box-shadow: 0 2px 4px </xsl:text><xsl:value-of select="$color.text_light"/><xsl:text>;
@@ -946,6 +947,30 @@ div.ui-overlay > div.contents {
   -webkit-border-radius: 6px;
   border-radius: 6px;
 }
+div.ui-overlay > div.inner > div.contents {
+  text-align: </xsl:text><xsl:value-of select="$left"/><xsl:text>;
+  margin-top: -8px;
+}
+a.ui-overlay-close {
+  display: inline-block;
+  width: 12px; height: 12px;
+  font-size: 12px; line-height: 12px;
+  position: relative;
+  top: -8px;
+  </xsl:text><xsl:value-of select="$right"/><xsl:text>: -16px;
+  padding: 1px 2px 3px 2px;
+  text-align: center;
+  border: none;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  background-color: </xsl:text><xsl:value-of select="$color.text_light"/><xsl:text>;
+  color: </xsl:text><xsl:value-of select="$color.background"/><xsl:text>;
+}
+a.ui-overlay-close:hover {
+  text-decoration: none;
+  border: none;
+}
 
 div.ui-tile {
   display: inline-block;
@@ -1308,27 +1333,37 @@ $(document).ready(function () {
   $('a.ui-overlay').each(function () {
     $(this).click(function () {
       var overlay = $(this).parent('div').children('div.ui-overlay');
-      var contents = overlay.children('div.contents');
+      var inner = overlay.children('div.inner');
+      var close = inner.children('a.ui-overlay-close');
       var screen = $('div.ui-screen');
       if (screen.length == 0) {
         screen = $('<div class="ui-screen"></div>');
         $('body').append(screen);
       }
       var hideoverlay = function () {
+        $(document).unbind('keydown.yelp-ui-overlay');
+        close.unbind('click');
         screen.unbind('click');
         screen.fadeOut('slow');
         overlay.unbind('click');
         overlay.slideUp('fast');
+        return false;
       };
       screen.click(hideoverlay);
+      close.click(hideoverlay);
+      $(document).bind('keydown.yelp-ui-overlay', function (event) {
+        if (event.which == 27) {
+          hideoverlay();
+        }
+      });
       overlay.click(function (event) {
         var target = event.target;
         do {
-          if (target == contents[0]) {
+          if (target == inner[0]) {
             break;
           }
         } while (target = target.parentNode);
-        if (target != contents[0]) {
+        if (target != inner[0]) {
           hideoverlay();
           return false;
         }
diff --git a/xslt/mallard/html/mal2html-ui.xsl b/xslt/mallard/html/mal2html-ui.xsl
index 1c553d6..7a177ca 100644
--- a/xslt/mallard/html/mal2html-ui.xsl
+++ b/xslt/mallard/html/mal2html-ui.xsl
@@ -540,8 +540,18 @@ ${node} element.
       </span>
     </a>
     <div class="ui-overlay">
-      <div class="contents">
-        <xsl:apply-templates mode="mal2html.block.mode" select="$media"/>
+      <div class="inner">
+        <a href="#" class="ui-overlay-close">
+          <xsl:attribute name="title">
+            <xsl:call-template name="l10n.gettext">
+              <xsl:with-param name="msgid" select="'Close'"/>
+            </xsl:call-template>
+          </xsl:attribute>
+          <xsl:text>â</xsl:text>
+        </a>
+        <div class="contents">
+          <xsl:apply-templates mode="mal2html.block.mode" select="$media"/>
+        </div>
       </div>
     </div>
   </div>
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]