Options page: add link to Pontoon
In order to promote Pontoon (the translation platform), this change adds
a link in the options page.
Fixed: twpowertools:42
Change-Id: I4eb6b5a0d050782e4bc236b968c3c525d8e4ebc4
diff --git a/src/static/options/options.css b/src/static/options/options.css
index 6933e13..4ab69b3 100644
--- a/src/static/options/options.css
+++ b/src/static/options/options.css
@@ -7,19 +7,21 @@
max-width: 600px;
}
-.features-link, .experiments-link {
+.featured-links {
position: absolute;
top: 8px;
- width: 24px;
+ right: 8px;
+ display: flex;
+ flex-direction: row;
}
-.features-link {
- right: 8px;
+.featured-links > * {
+ width: 24px;
+ margin-left: 8px;
}
.experiments-link {
cursor: pointer;
- right: 40px;
}
.option {
diff --git a/src/static/options/options.html b/src/static/options/options.html
index d6be8d6..30a9b60 100644
--- a/src/static/options/options.html
+++ b/src/static/options/options.html
@@ -9,24 +9,35 @@
</head>
<body>
<main>
- <div class="experiments-link" hidden>
- <!--
- Material Design Icon - social/science
- - LICENSE: Apache License Version 2.0
- - Source: https://github.com/google/material-design-icons/
- - Author: Google LLC
- -->
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><rect fill="none" height="24" width="24"/></g><g><path d="M13,11.33L18,18H6l5-6.67V6h2 M15.96,4H8.04C7.62,4,7.39,4.48,7.65,4.81L9,6.5v4.17L3.2,18.4C2.71,19.06,3.18,20,4,20h16 c0.82,0,1.29-0.94,0.8-1.6L15,10.67V6.5l1.35-1.69C16.61,4.48,16.38,4,15.96,4L15.96,4z"/></g></svg>
+ <div class="featured-links">
+ <div class="experiments-link" hidden>
+ <!--
+ Material Design Icon - social/science
+ - LICENSE: Apache License Version 2.0
+ - Source: https://github.com/google/material-design-icons/
+ - Author: Google LLC
+ -->
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><rect fill="none" height="24" width="24"/></g><g><path d="M13,11.33L18,18H6l5-6.67V6h2 M15.96,4H8.04C7.62,4,7.39,4.48,7.65,4.81L9,6.5v4.17L3.2,18.4C2.71,19.06,3.18,20,4,20h16 c0.82,0,1.29-0.94,0.8-1.6L15,10.67V6.5l1.35-1.69C16.61,4.48,16.38,4,15.96,4L15.96,4z"/></g></svg>
+ </div>
+ <a href="https://avm99963-pontoon.herokuapp.com/projects/tw-power-tools/" target="_blank" rel="noreferrer noopener" class="pontoon-link">
+ <!--
+ Material Design Icon - action/translate
+ - LICENSE: Apache License Version 2.0
+ - Source: https://github.com/google/material-design-icons/
+ - Author: Google LLC
+ -->
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"/></svg>
+ </a>
+ <a href="https://gerrit.avm99963.com/plugins/gitiles/infinitegforums/+/master/docs/features.md" target="_blank" rel="noreferrer noopener" class="features-link">
+ <!--
+ Material Design Icon - action/help_outline
+ - LICENSE: Apache License Version 2.0
+ - Source: https://github.com/google/material-design-icons/
+ - Author: Google LLC
+ -->
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-4h2v2h-2zm1.61-9.96c-2.06-.3-3.88.97-4.43 2.79-.18.58.26 1.17.87 1.17h.2c.41 0 .74-.29.88-.67.32-.89 1.27-1.5 2.3-1.28.95.2 1.65 1.13 1.57 2.1-.1 1.34-1.62 1.63-2.45 2.88 0 .01-.01.01-.01.02-.01.02-.02.03-.03.05-.09.15-.18.32-.25.5-.01.03-.03.05-.04.08-.01.02-.01.04-.02.07-.12.34-.2.75-.2 1.25h2c0-.42.11-.77.28-1.07.02-.03.03-.06.05-.09.08-.14.18-.27.28-.39.01-.01.02-.03.03-.04.1-.12.21-.23.33-.34.96-.91 2.26-1.65 1.99-3.56-.24-1.74-1.61-3.21-3.35-3.47z"/></svg>
+ </a>
</div>
- <a href="https://gerrit.avm99963.com/plugins/gitiles/infinitegforums/+/master/docs/features.md" target="_blank" rel="noreferrer noopener" class="features-link">
- <!--
- Material Design Icon - action/help_outline
- - LICENSE: Apache License Version 2.0
- - Source: https://github.com/google/material-design-icons/
- - Author: Google LLC
- -->
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-4h2v2h-2zm1.61-9.96c-2.06-.3-3.88.97-4.43 2.79-.18.58.26 1.17.87 1.17h.2c.41 0 .74-.29.88-.67.32-.89 1.27-1.5 2.3-1.28.95.2 1.65 1.13 1.57 2.1-.1 1.34-1.62 1.63-2.45 2.88 0 .01-.01.01-.01.02-.01.02-.02.03-.03.05-.09.15-.18.32-.25.5-.01.03-.03.05-.04.08-.01.02-.01.04-.02.07-.12.34-.2.75-.2 1.25h2c0-.42.11-.77.28-1.07.02-.03.03-.06.05-.09.08-.14.18-.27.28-.39.01-.01.02-.03.03-.04.1-.12.21-.23.33-.34.96-.91 2.26-1.65 1.99-3.56-.24-1.74-1.61-3.21-3.35-3.47z"/></svg>
- </a>
<form>
<div class="option"><input type="checkbox" id="list"> <label for="list" data-i18n="list"></label></div>
<div class="option"><input type="checkbox" id="thread"> <label for="thread" data-i18n="thread"></label></div>