mirror of
https://github.com/keymanapp/keyman.git
synced 2026-09-10 01:27:43 +00:00
feat(windows): add CSS Grid WIP
This commit is contained in:
Ross
parent
50f41ba069
commit
dbe0d78a06
3 changed files with 251 additions and 172 deletions
|
|
@ -428,6 +428,71 @@ table tr
|
|||
margin: 0 8px 0 0;
|
||||
}
|
||||
|
||||
/* grid styles */
|
||||
.grid-container {
|
||||
display: grid;
|
||||
position: relative;
|
||||
grid-template-columns: max-content 250px ;
|
||||
}
|
||||
|
||||
.grid_item
|
||||
{
|
||||
position: relative;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
margin: 0px;
|
||||
padding: 5px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.grid_debug_text::before
|
||||
{
|
||||
content: 'Name:';
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Just for testing layout */
|
||||
.grid_item::before {
|
||||
/* content: 'Name:';
|
||||
position:relative;
|
||||
*/
|
||||
/* font-size: 25px;
|
||||
font-weight: bold;
|
||||
top: 10px;
|
||||
left: 15px;*/
|
||||
|
||||
}
|
||||
|
||||
|
||||
.grid_item_text
|
||||
{
|
||||
content: 'blah detail';
|
||||
position: relative;
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
|
||||
margin: 0px;
|
||||
background: #f0f0ff;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.grid_col_span_2
|
||||
{
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
|
||||
.grid_rows_hide{
|
||||
grid-template-rows: minmax(11px, auto) minmax(11px, auto) minmax(11px, auto) repeat(10, 0px);
|
||||
|
||||
}
|
||||
|
||||
.grid_rows_hide [data-hide] {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Keyboard Styles */
|
||||
.keyboard_header
|
||||
{
|
||||
|
|
@ -1052,4 +1117,4 @@ th
|
|||
white-space: normal;
|
||||
font-size: 12pt;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -200,6 +200,14 @@ document.addEventListener("DOMContentLoaded", windowResize);
|
|||
return false;
|
||||
}
|
||||
|
||||
function advanced_detail(event,n) {
|
||||
var k = document.getElementById('list_'+n);
|
||||
$(k).toggleClass('expanded');
|
||||
k.focus();
|
||||
save_state();
|
||||
return false;
|
||||
}
|
||||
|
||||
var loading_state = false;
|
||||
|
||||
function save_state() {
|
||||
|
|
@ -313,4 +321,4 @@ function showKeyboardLink(id) {
|
|||
function hideKeyboardLink(id) {
|
||||
var e = document.getElementById('qrcode-'+id);
|
||||
e.className='qrcode';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -127,185 +127,191 @@
|
|||
<div class="list_expand">
|
||||
<xsl:attribute name="id">list_expand_keyboard_<xsl:value-of select="id"/></xsl:attribute>
|
||||
</div>
|
||||
<div style="float:right">
|
||||
<div style="float: left; padding: 1px 3px 1px 0px;">
|
||||
<a class="hotkey" tabindex="-1">
|
||||
<xsl:attribute name="href">keyman:hotkey_set?index=hotkey_lang_<xsl:value-of select="position()-1"/></xsl:attribute>
|
||||
<xsl:attribute name="onmouseover">this.style.cursor='hand';</xsl:attribute>
|
||||
<xsl:choose>
|
||||
<xsl:when test="hotkey"><xsl:value-of select="hotkey"/></xsl:when>
|
||||
<xsl:otherwise><xsl:value-of select="$locale/string[@name='S_Hotkey_None']"/></xsl:otherwise>
|
||||
</xsl:choose>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<xsl:choose>
|
||||
<xsl:when test="//KeymanPackageContentKeyboardsInstalled/KeymanKeyboardInstalled[id=current()/id]">
|
||||
<div class="list_close">
|
||||
<xsl:attribute name="id">list_close_keyboard_<xsl:value-of select="id"/></xsl:attribute>
|
||||
<xsl:attribute name="onmousedown">location.href='keyman:package_uninstall?id=<xsl:value-of select="$package_id"/>';event.cancelBubble=true;return false;</xsl:attribute>
|
||||
</div>
|
||||
<div class="list_help">
|
||||
<xsl:attribute name="id">list_help_keyboard_<xsl:value-of select="id"/></xsl:attribute>
|
||||
<xsl:attribute name="onmousedown">location.href='keyman:package_welcome?id=<xsl:value-of select="$package_id" />';event.cancelBubble=true;return false;</xsl:attribute>
|
||||
</div>
|
||||
</xsl:when>
|
||||
<xsl:otherwise>
|
||||
<div class="list_close">
|
||||
<xsl:attribute name="id">list_close_keyboard_<xsl:value-of select="id"/></xsl:attribute>
|
||||
<xsl:attribute name="onmousedown">location.href='keyman:keyboard_uninstall?id=<xsl:value-of select="$id"/>';event.cancelBubble=true;return false;</xsl:attribute>
|
||||
</div>
|
||||
</xsl:otherwise>
|
||||
</xsl:choose>
|
||||
|
||||
<div style="clear:both"></div>
|
||||
</div>
|
||||
<div class="list_detail">
|
||||
<xsl:attribute name="id">list_detail_keyboard_<xsl:value-of select="id"/></xsl:attribute>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="list-languages">
|
||||
<div class="list-languages-title"><xsl:value-of select="$locale/string[@name='S_Caption_Languages']"/></div>
|
||||
<div>
|
||||
<xsl:apply-templates select="KeymanKeyboardLanguagesInstalled/KeymanKeyboardLanguageInstalled[isinstalled]" />
|
||||
<div class='list-languages-add'>
|
||||
<xsl:call-template name="button">
|
||||
<xsl:with-param name="caption"><xsl:value-of select="$locale/string[@name='S_Languages_Install']"/></xsl:with-param>
|
||||
<xsl:with-param name="command">keyman:keyboardlanguage_install?id=<xsl:value-of select="id"/></xsl:with-param>
|
||||
</xsl:call-template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="keyboard_options">
|
||||
<xsl:if test="//KeymanPackageContentKeyboardsInstalled/KeymanKeyboardInstalled[id=current()/id] and ../../options">
|
||||
<a><xsl:attribute name="href">keyman:keyboard_options?id=<xsl:value-of select="id" /></xsl:attribute><div class="keyboard_options_link"><xsl:value-of select="$locale/string[@name='S_Menu_Options']"/></div></a>
|
||||
</xsl:if>
|
||||
</div>
|
||||
<div class="keyboard_table">
|
||||
<table style="font-size: 11px;">
|
||||
<xsl:if test="id">
|
||||
<tr><td class="table_header"><xsl:value-of select="$locale/string[@name='S_Caption_Filename']"/></td>
|
||||
<td>
|
||||
<span><xsl:value-of select="id"/>.kmx</span>
|
||||
</td></tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="version">
|
||||
<tr><td class="table_header"><xsl:value-of select="$locale/string[@name='S_Caption_KeyboardVersion']"/></td>
|
||||
<td>
|
||||
<span><xsl:value-of select="version"/></span>
|
||||
</td></tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="$singlekeyboardpackage = '1'">
|
||||
<tr><td class="table_header"><xsl:value-of select="$locale/string[@name='S_Caption_Package']"/></td>
|
||||
<td>
|
||||
<span><xsl:value-of select="../../name"/></span>
|
||||
</td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="//KeymanPackageContentKeyboardsInstalled/KeymanKeyboardInstalled[id=current()/id]">
|
||||
<tr><td class="table_header"><xsl:value-of select="$locale/string[@name='S_Caption_Version']"/></td>
|
||||
<td>
|
||||
<span><xsl:value-of select="../../detail[@name='version']"/></span>
|
||||
</td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="//KeymanPackageContentKeyboardsInstalled/KeymanKeyboardInstalled[id=current()/id]/../../Fonts"><!-- I2216 -->
|
||||
<tr>
|
||||
<td class="table_header"><xsl:value-of select="$locale/string[@name='S_Caption_Fonts']" /></td>
|
||||
<td>
|
||||
<xsl:for-each select="//KeymanPackageContentKeyboardsInstalled/KeymanKeyboardInstalled[id=current()/id]/../../Fonts/Font">
|
||||
<xsl:value-of select="name"/>
|
||||
<xsl:if test="position() != last()">, </xsl:if>
|
||||
</xsl:for-each>
|
||||
</td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="encodings">
|
||||
<tr><td class="table_header"><xsl:value-of select="$locale/string[@name='S_Caption_Encodings']"/></td>
|
||||
<td>
|
||||
<xsl:for-each select="encodings/encoding">
|
||||
<xsl:value-of select="."/>
|
||||
<xsl:if test="position() != last()">, </xsl:if>
|
||||
</xsl:for-each>
|
||||
</td></tr>
|
||||
</xsl:if>
|
||||
<tr>
|
||||
<td class="table_header"><xsl:value-of select="$locale/string[@name='S_Caption_LayoutType']"/></td>
|
||||
<td>
|
||||
<xsl:choose>
|
||||
<xsl:when test="layoutpositional"><xsl:value-of select="$locale/string[@name='S_LayoutType_Positional']"/></xsl:when>
|
||||
<xsl:otherwise><xsl:value-of select="$locale/string[@name='S_LayoutType_Mnemonic']"/></xsl:otherwise>
|
||||
</xsl:choose>
|
||||
</td>
|
||||
</tr>
|
||||
<tr><td class="table_header"><xsl:value-of select="$locale/string[@name='S_Caption_OnScreenKeyboard']"/></td>
|
||||
<td>
|
||||
<xsl:choose>
|
||||
<xsl:when test="../../usage"><xsl:value-of select="$locale/string[@name='S_OnScreenKeyboard_Custom']"/></xsl:when>
|
||||
<xsl:when test="visualkeyboard"><xsl:value-of select="$locale/string[@name='S_OnScreenKeyboard_Installed']"/></xsl:when>
|
||||
<xsl:otherwise><xsl:value-of select="$locale/string[@name='S_OnScreenKeyboard_NotInstalled']"/></xsl:otherwise>
|
||||
</xsl:choose>
|
||||
</td></tr>
|
||||
<tr>
|
||||
<td class="table_header"><xsl:value-of select="$locale/string[@name='S_Caption_Documentation']"/></td>
|
||||
<td>
|
||||
<xsl:choose>
|
||||
<xsl:when test="../../welcome"><xsl:value-of select="$locale/string[@name='S_Documentation_Installed']"/></xsl:when>
|
||||
<xsl:otherwise><xsl:value-of select="$locale/string[@name='S_Documentation_NotInstalled']"/></xsl:otherwise>
|
||||
</xsl:choose>
|
||||
</td>
|
||||
</tr>
|
||||
<xsl:if test="message">
|
||||
<tr><td class="table_header"><xsl:value-of select="$locale/string[@name='S_Caption_Message']"/></td>
|
||||
<td>
|
||||
<xsl:value-of select="message"/>
|
||||
</td></tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="copyright">
|
||||
<tr><td class="table_header"><xsl:value-of select="$locale/string[@name='S_Caption_Copyright']"/></td>
|
||||
<td>
|
||||
<xsl:value-of select="copyright"/>
|
||||
</td></tr>
|
||||
</xsl:if>
|
||||
|
||||
<xsl:if test="$singlekeyboardpackage = '1' or //KeymanPackageContentKeyboardsInstalled/KeymanKeyboardInstalled[id=current()/id]">
|
||||
<tr>
|
||||
<td class="table_header" colspan="2">
|
||||
<div class="grid-container" id="keyboard_grid">
|
||||
<xsl:if test="id">
|
||||
<div class="grid_item">
|
||||
<xsl:value-of select="$locale/string[@name='S_Caption_Filename']"/>
|
||||
</div>
|
||||
<div class="grid_item">
|
||||
<xsl:value-of select="id"/>.kmx
|
||||
</div>
|
||||
</xsl:if>
|
||||
<xsl:if test="version">
|
||||
<div class="grid_item">
|
||||
<xsl:value-of select="$locale/string[@name='S_Caption_KeyboardVersion']"/>
|
||||
</div>
|
||||
<div class="grid_item">
|
||||
<xsl:value-of select="version"/>
|
||||
</div>
|
||||
</xsl:if>
|
||||
<xsl:if test="$singlekeyboardpackage = '1'">
|
||||
<div class="grid_item">
|
||||
<xsl:value-of select="$locale/string[@name='S_Caption_Package']"/>
|
||||
</div>
|
||||
<div class="grid_item">
|
||||
<xsl:value-of select="../../name"/>
|
||||
</div>
|
||||
</xsl:if>
|
||||
<!--- The following rows will have the data-hide attribute -->
|
||||
<div class="grid_item" data-hide="">
|
||||
<xsl:value-of select="$locale/string[@name='S_Caption_Languages']"/>
|
||||
</div>
|
||||
<div class="grid_item" data-hide="">
|
||||
<xsl:apply-templates select="KeymanKeyboardLanguagesInstalled/KeymanKeyboardLanguageInstalled[isinstalled]" />
|
||||
<div class='list-languages-add'>
|
||||
<xsl:call-template name="button">
|
||||
<xsl:with-param name="caption"><xsl:value-of select="$locale/string[@name='S_Languages_Install']"/></xsl:with-param>
|
||||
<xsl:with-param name="command">keyman:keyboardlanguage_install?id=<xsl:value-of select="id"/></xsl:with-param>
|
||||
</xsl:call-template>
|
||||
</div>
|
||||
</div>
|
||||
<xsl:if test="//KeymanPackageContentKeyboardsInstalled/KeymanKeyboardInstalled[id=current()/id]">
|
||||
<div class="grid_item" data-hide="">
|
||||
<xsl:value-of select="$locale/string[@name='S_Caption_Version']"/>
|
||||
</div>
|
||||
<div class="grid_item">
|
||||
<xsl:value-of select="../../detail[@name='version']"/>
|
||||
</div>
|
||||
</xsl:if>
|
||||
|
||||
<xsl:call-template name="button">
|
||||
<xsl:with-param name="caption"><xsl:value-of select="$locale/string[@name='S_Keyboard_Share']"/></xsl:with-param>
|
||||
<xsl:with-param name="command">javascript:showKeyboardLink('<xsl:value-of select="../../id" />')</xsl:with-param>
|
||||
</xsl:call-template>
|
||||
<xsl:if test="//KeymanPackageContentKeyboardsInstalled/KeymanKeyboardInstalled[id=current()/id]/../../Fonts"><!-- I2216 -->
|
||||
<div class="grid_item" data-hide="">
|
||||
<xsl:value-of select="$locale/string[@name='S_Caption_Fonts']" />
|
||||
</div>
|
||||
<div class="grid_item" data-hide="">
|
||||
<xsl:for-each select="//KeymanPackageContentKeyboardsInstalled/KeymanKeyboardInstalled[id=current()/id]/../../Fonts/Font">
|
||||
<xsl:value-of select="name"/>
|
||||
<xsl:if test="position() != last()">, </xsl:if>
|
||||
</xsl:for-each>
|
||||
</div>
|
||||
</xsl:if>
|
||||
<xsl:if test="encodings">
|
||||
<div class="grid_item" data-hide="">
|
||||
<xsl:value-of select="$locale/string[@name='S_Caption_Encodings']"/>
|
||||
</div>
|
||||
<div class="grid_item" data-hide="">
|
||||
<xsl:for-each select="encodings/encoding">
|
||||
<xsl:value-of select="."/>
|
||||
<xsl:if test="position() != last()">, </xsl:if>
|
||||
</xsl:for-each>
|
||||
</div>
|
||||
</xsl:if>
|
||||
<div class="grid_item" data-hide="">
|
||||
<xsl:value-of select="$locale/string[@name='S_Caption_LayoutType']"/>
|
||||
</div>
|
||||
<div class="grid_item" data-hide="">
|
||||
<xsl:choose>
|
||||
<xsl:when test="layoutpositional"><xsl:value-of select="$locale/string[@name='S_LayoutType_Positional']"/></xsl:when>
|
||||
<xsl:otherwise><xsl:value-of select="$locale/string[@name='S_LayoutType_Mnemonic']"/></xsl:otherwise>
|
||||
</xsl:choose>
|
||||
</div>
|
||||
|
||||
<div class='qrcode'>
|
||||
<xsl:attribute name='id'>qrcode-<xsl:value-of select="../../id" /></xsl:attribute>
|
||||
<div class='qrcode-back'>
|
||||
<xsl:attribute name="onclick">return hideKeyboardLink('<xsl:value-of select="../../id" />')</xsl:attribute>
|
||||
</div>
|
||||
<div class='qrcode-popup'>
|
||||
<div>
|
||||
<xsl:attribute name='id'>qrcode-img-<xsl:value-of select="../../id" /></xsl:attribute>
|
||||
</div>
|
||||
<div class='qrcode-caption'>
|
||||
<xsl:value-of select="$locale/string[@name='S_Keyboard_Share_QRCode']"/>
|
||||
<a>
|
||||
<xsl:attribute name="href">keyman:link?url=<xsl:value-of select="/Keyman/keyman-com" />/go/keyboard/<xsl:value-of select="../../id" />/share</xsl:attribute>
|
||||
<xsl:value-of select="$locale/string[@name='S_Keyboard_Share_Link']"/>
|
||||
</a>
|
||||
<xsl:value-of select="$locale/string[@name='S_Keyboard_Share_LinkSuffix']"/>
|
||||
</div>
|
||||
<script>new QRCode(document.getElementById("qrcode-img-<xsl:value-of select="../../id"/>"), {
|
||||
text: '<xsl:value-of select="/Keyman/keyman-com" />/go/keyboard/<xsl:value-of select="../../id"/>/share',
|
||||
width: 256,
|
||||
height: 256
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<div class="grid_item" data-hide="">
|
||||
<xsl:value-of select="$locale/string[@name='S_Caption_OnScreenKeyboard']"/>
|
||||
</div>
|
||||
<div class="grid_item" data-hide="">
|
||||
<xsl:choose>
|
||||
<xsl:when test="../../usage"><xsl:value-of select="$locale/string[@name='S_OnScreenKeyboard_Custom']"/></xsl:when>
|
||||
<xsl:when test="visualkeyboard"><xsl:value-of select="$locale/string[@name='S_OnScreenKeyboard_Installed']"/></xsl:when>
|
||||
<xsl:otherwise><xsl:value-of select="$locale/string[@name='S_OnScreenKeyboard_NotInstalled']"/></xsl:otherwise>
|
||||
</xsl:choose>
|
||||
</div>
|
||||
<div class="grid_item" data-hide="">
|
||||
<xsl:value-of select="$locale/string[@name='S_Caption_Documentation']"/>
|
||||
</div>
|
||||
<div class="grid_item" data-hide="">
|
||||
<xsl:choose>
|
||||
<xsl:when test="../../welcome"><xsl:value-of select="$locale/string[@name='S_Documentation_Installed']"/></xsl:when>
|
||||
<xsl:otherwise><xsl:value-of select="$locale/string[@name='S_Documentation_NotInstalled']"/></xsl:otherwise>
|
||||
</xsl:choose>
|
||||
</div>
|
||||
|
||||
<xsl:if test="message">
|
||||
<div class="grid_item" data-hide="">
|
||||
<xsl:value-of select="$locale/string[@name='S_Caption_Message']"/>
|
||||
</div>
|
||||
<div class="grid_item" data-hide="">
|
||||
<xsl:value-of select="message"/>
|
||||
</div>
|
||||
</xsl:if>
|
||||
<xsl:if test="copyright">
|
||||
<div class="grid_item" data-hide="">
|
||||
<xsl:value-of select="$locale/string[@name='S_Caption_Copyright']"/>
|
||||
</div>
|
||||
<div class="grid_item" data-hide="">
|
||||
<xsl:value-of select="copyright"/>
|
||||
</div>
|
||||
</xsl:if>
|
||||
|
||||
|
||||
|
||||
<div class="keyboard_options grid_col_span_2">
|
||||
<xsl:call-template name="button">
|
||||
<xsl:with-param name="caption">Help</xsl:with-param>
|
||||
<xsl:with-param name="command">keyman:keyboardlanguage_install?id=<xsl:value-of select="id"/></xsl:with-param>
|
||||
</xsl:call-template>
|
||||
|
||||
|
||||
<xsl:if test="//KeymanPackageContentKeyboardsInstalled/KeymanKeyboardInstalled[id=current()/id] and ../../options">
|
||||
<xsl:call-template name="button">
|
||||
<xsl:with-param name="caption"><xsl:value-of select="$locale/string[@name='S_Menu_Options']"/></xsl:with-param>
|
||||
<xsl:with-param name="command">keyman:keyboard_options?id=<xsl:value-of select="id"/></xsl:with-param>
|
||||
</xsl:call-template>
|
||||
</xsl:if>
|
||||
|
||||
<xsl:call-template name="button">
|
||||
<xsl:with-param name="caption">Disable</xsl:with-param>
|
||||
<xsl:with-param name="command">keyman:keyboardlanguage_install?id=<xsl:value-of select="id"/></xsl:with-param>
|
||||
</xsl:call-template>
|
||||
<xsl:call-template name="button">
|
||||
<xsl:with-param name="caption">Uninstall</xsl:with-param>
|
||||
<xsl:with-param name="command">keyman:keyboardlanguage_install?id=<xsl:value-of select="id"/></xsl:with-param>
|
||||
</xsl:call-template>
|
||||
|
||||
</div>
|
||||
|
||||
</div> <!---end keyboard details grid container -->
|
||||
|
||||
<!--- comment insert QR code here -->
|
||||
|
||||
<div class='qrcode'>
|
||||
<xsl:attribute name='id'>qrcode-<xsl:value-of select="../../id" /></xsl:attribute>
|
||||
<div>
|
||||
<xsl:attribute name='id'>qrcode-img-<xsl:value-of select="../../id" /></xsl:attribute>
|
||||
</div>
|
||||
<div class='qrcode-caption'>
|
||||
<xsl:value-of select="$locale/string[@name='S_Keyboard_Share_QRCode']"/>
|
||||
<a>
|
||||
<xsl:attribute name="href">keyman:link?url=<xsl:value-of select="/Keyman/keyman-com" />/go/keyboard/<xsl:value-of select="../../id" />/share</xsl:attribute>
|
||||
<xsl:value-of select="$locale/string[@name='S_Keyboard_Share_Link']"/>
|
||||
</a>
|
||||
<xsl:value-of select="$locale/string[@name='S_Keyboard_Share_LinkSuffix']"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--- end qr commment -->
|
||||
<div style="clear:both"> </div>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
<div style="clear:both"> </div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -324,4 +330,4 @@
|
|||
</div>
|
||||
</xsl:template>
|
||||
|
||||
</xsl:stylesheet>
|
||||
</xsl:stylesheet>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue