Merge pull request #12840 from keymanapp/feat/windows/ui-layout-for-update-tab

feat(windows): UI layout for update tab 💽

windows/src/desktop/kmshell/main/Keyman.System.UpdateCheckStorage.pas

@@ -70,18 +70,13 @@ end;
 
 class function TUpdateCheckStorage.HasKeymanInstallFile(const data: TUpdateCheckResponse): Boolean;
 var
-  i : Integer;
-  fileName : string;
-  f: TSearchRec;
+  fileExtension: string;
 begin
-  Result := False;
-  for i := 0 to High(data.Packages) do
-  begin
-    fileName := data.Packages[i].FileName;
-    if FindFirst(fileName + '*.exe', 0, f) = 0 then
-      Result := True;
-    System.SysUtils.FindClose(f);
-  end;
+  fileExtension := LowerCase(ExtractFileExt(data.FileName));
+  if fileExtension = '.exe' then
+    Result := True
+  else
+    Result := False
 end;
 
 end.

windows/src/desktop/kmshell/main/UfrmMain.pas

@@ -825,6 +825,9 @@ begin
 end;
 
 procedure TfrmMain.Update_CheckNow;
+// TODO: epic-windows-update
+// Get an instance to the state machine and call handle check so the state can change to update
+// available.
 var UpdateCheck : TRemoteUpdateCheck;
 begin
   UpdateCheck := TRemoteUpdateCheck.Create(True);

windows/src/desktop/kmshell/xml/config.css

@@ -499,6 +499,20 @@ table tr
   padding: 1px 0 1px 10px;
 }
 
+.grid_container_update {
+  display: grid;
+  position: relative;
+  grid-template-columns: 50px 1fr 1fr 1fr;
+  margin: 10px 50px 10px 64px;
+  /* From https://geary.co/internal-borders-css-grid/ */
+  overflow: hidden;
+  gap: var(--gap);
+  --gap: 2em;
+  --line-offset: calc(var(--gap) / 2);
+  --line-thickness: 1px;
+  --line-color: black;
+}
+
 .grid_container.grid_disabled
 {
   opacity: 0.5;
@@ -508,11 +522,36 @@ table tr
 {
   position: relative;
   font-size: 12px;
-  margin: 0px;
   padding: 1px;
   margin: 0 0 0 5px;
 }
 
+.grid_item::before,
+.grid_item::after
+{
+  content: '';
+  position: absolute;
+  background-color: var(--line-color);
+  z-index: 1;
+}
+
+/* row borders */
+.grid_item::after
+{
+  inline-size: 100vw;
+  block-size: var(--line-thickness);
+  inset-inline-start: 0;
+  inset-block-start: calc(var(--line-offset) * -1);
+}
+
+/* column borders */
+.grid_item::before
+{
+  inline-size: var(--line-thickness);
+  block-size: 100vh;
+  inset-inline-start: calc(var(--line-offset) * -1);
+}
+
 .grid_item_title{
   font-weight: bold;
 }
@@ -1093,9 +1132,42 @@ th
   height: 16px;
 }
 
+.update_title
+{
+  background: url('keyman-title.png') 96px 13px no-repeat;
+  height: 60px;
+}
+
+.update_title img
+{
+  margin: 13px 0 0 10px;
+}
+
+.update_edition
+{
+  float: left;
+  font-size: 16px;
+  margin-left: 64px;
+}
+
+#update_status
+{
+  font-size: 13px;
+  margin-left: 64px;
+  margin-top: 30px;
+}
+
 #update_content {
   height: 100%;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  padding: 5px 10px 5px 10px;
+}
+
+.update_controls
+{
+  margin-left: 64px;
 }
 
 /* QRCodes */

windows/src/desktop/kmshell/xml/keyman_update.xsl

@@ -2,6 +2,8 @@
 
 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
   <xsl:template name="content_update">
+  <xsl:variable name="isNewKeymanVersionAvailable" select="boolean(/Keyman/Updates/Update/Keyman/NewVersion)"/>
+  <xsl:variable name="isNewKeyboardVersionAvailable" select="boolean(/Keyman/Updates/Update/Package/NewVersion)"/>
 
     <div class="header">
       <xsl:call-template name="header_helplinks" />
@@ -16,31 +18,47 @@
         </div>
 
         <div class="update_edition">
-          <xsl:value-of select="$locale/string[@name='S_Support_Version']"/>&#160;<xsl:value-of select="/Keyman/version-info/@versionWithTag" /><br />
+          <xsl:value-of select="$locale/string[@name='S_Support_Version']"/>&#160;<xsl:value-of select="/Keyman/version-info/@versionWithTag" />
         </div>
 
-        <div id="update_status">Updates are available which will be applied when Windows is next restarted:</div>
+        <div id="update_status">
+            <xsl:if test="$isNewKeymanVersionAvailable or $isNewKeyboardVersionAvailable">
+                Updates are available which will be applied when Windows is next restarted:
+            </xsl:if>
+            <xsl:if test="not($isNewKeymanVersionAvailable or $isNewKeyboardVersionAvailable)">
+                No updates are available.
+            </xsl:if>
+        </div>
 
-        <div id="update_details">
+        <div class="grid_container_update" id="update_details">
+            <div class='grid_item'>Select</div>
+            <div class='grid_item'><xsl:value-of select="$locale/string[@name='S_Update_ComponentHead']"/></div>
+            <div class='grid_item'><xsl:value-of select="$locale/string[@name='S_Update_OldVersionHead']"/></div>
+            <div class='grid_item'><xsl:value-of select="$locale/string[@name='S_Update_SizeHead']"/></div>
 
-          <table cellspacing="0" cellpadding="0" id="Updates">
-            <tr>
-              <th></th>
-              <th><xsl:value-of select="$locale/string[@name='S_Update_ComponentHead']"/></th>
-              <th><xsl:value-of select="$locale/string[@name='S_Update_OldVersionHead']"/></th>
-              <th><xsl:value-of select="$locale/string[@name='S_Update_SizeHead']"/></th>
-            </tr>
             <xsl:apply-templates select="/Keyman/Updates/Update" />
-          </table>
 
         </div>
 
-        <div id="update_controls">
-          <xsl:call-template name="button">
-            <xsl:with-param name="caption"><xsl:value-of select="$locale/string[@name='S_Button_Update_ApplyNow']"/></xsl:with-param>
-            <xsl:with-param name="command">keyman:update_applynow</xsl:with-param>
-            <xsl:with-param name="width">220px</xsl:with-param>
-          </xsl:call-template>
+        <div class="update_controls" id="update_controls">
+
+          <xsl:choose>
+            <xsl:when test="$isNewKeymanVersionAvailable or $isNewKeyboardVersionAvailable">
+              <xsl:call-template name="button">
+                <xsl:with-param name="caption"><xsl:value-of select="$locale/string[@name='S_Button_Update_ApplyNow']"/></xsl:with-param>
+                <xsl:with-param name="command">keyman:update_applynow</xsl:with-param>
+                <xsl:with-param name="width">220px</xsl:with-param>
+              </xsl:call-template>
+            </xsl:when>
+            <xsl:otherwise>
+              <xsl:call-template name="button">
+                <xsl:with-param name="caption"><xsl:value-of select="$locale/string[@name='S_Button_Update_ApplyNow']"/></xsl:with-param>
+                <xsl:with-param name="command"></xsl:with-param>
+                <xsl:with-param name="width">220px</xsl:with-param>
+                <xsl:with-param name="disabled">1</xsl:with-param>
+              </xsl:call-template>
+            </xsl:otherwise>
+          </xsl:choose>
 
           <xsl:call-template name="button">
             <xsl:with-param name="caption"><xsl:value-of select="$locale/string[@name='S_Button_Update_CheckNow']"/></xsl:with-param>
@@ -56,49 +74,49 @@
   </xsl:template>
 
   <xsl:template match="/Keyman/Updates/Update">
-    <tr>
-      <td class="UpdateCheckBox">
-				<input type="checkbox">
-					<xsl:attribute name="onclick">javascript:updateTick("<xsl:value-of select="index" />");</xsl:attribute>
-					<xsl:attribute name="id">Update_<xsl:value-of select="index" /></xsl:attribute>
-					<xsl:if test="not(@DefaultUnchecked)"><xsl:attribute name="checked">checked</xsl:attribute></xsl:if>
-					<xsl:attribute name="name">Update_<xsl:value-of select="index" /></xsl:attribute>
-				</input>
-        <xsl:if test="RequiresAdmin">
-          <span><xsl:attribute name="id">Update_<xsl:value-of select="index" />_RequiresAdmin</xsl:attribute></span>
-        </xsl:if>
-      </td>
+
+    <div class="UpdateCheckBox grid_item">
+      <input type="checkbox">
+        <xsl:attribute name="onclick">javascript:updateTick("<xsl:value-of select="index" />");</xsl:attribute>
+        <xsl:attribute name="id">Update_<xsl:value-of select="index" /></xsl:attribute>
+        <xsl:if test="not(@DefaultUnchecked)"><xsl:attribute name="checked">checked</xsl:attribute></xsl:if>
+        <xsl:attribute name="name">Update_<xsl:value-of select="index" /></xsl:attribute>
+      </input>
+      <xsl:if test="RequiresAdmin">
+        <span><xsl:attribute name="id">Update_<xsl:value-of select="index" />_RequiresAdmin</xsl:attribute></span>
+      </xsl:if>
+    </div>
     <xsl:choose>
       <xsl:when test="Package/Text != ''">
-        <td class='component'>
+        <div class='grid_item'>
           <label>
             <xsl:attribute name="for">Update_<xsl:value-of select="index"/></xsl:attribute>
             <xsl:value-of select="Package/Text"/>
           </label>
-        </td>
-        <td>
+        </div>
+        <div class='grid_item'>
           <xsl:value-of select="Package/OldVersion"/>
-        </td>
-        <td>
+        </div>
+        <div class='grid_item'>
           <xsl:value-of select="Package/DownloadSize"/>
-        </td>
+        </div>
       </xsl:when>
       <xsl:when test="Keyman/DownloadURL != ''">
-        <td>
+        <div class='grid_item'>
           <label>
             <xsl:attribute name="for">Update_<xsl:value-of select="index"/></xsl:attribute>
             <xsl:value-of select="Keyman/Text"/>
           </label>
-        </td>
-        <td>
+        </div>
+        <div class='grid_item'>
           <xsl:value-of select="Keyman/OldVersion"/>
-        </td>
-        <td>
+        </div>
+        <div class='grid_item'>
           <xsl:value-of select="Keyman/DownloadSize"/>
-        </td>
+        </div>
       </xsl:when>
       <xsl:otherwise>
-        <td>
+        <div class='grid_item'>
           <div id="DownloadFrom">
             <xsl:value-of select="$locale/string[@name='S_Update_DownloadFrom']"/>
           </div>
@@ -107,13 +125,12 @@
               <xsl:value-of select="/Keyman/DownloadURL"/>
             </a>
           </div>
-        </td>
-        <td>
+        </div>
+        <div class='grid_item'>
           <xsl:value-of select="Keyman/DownloadVersion"/>
-        </td>
+        </div>
       </xsl:otherwise>
     </xsl:choose>
-    </tr>
   </xsl:template>
 
 </xsl:stylesheet>