Fix styling on Book List (#675)

* use ui.button.book-list styles * switch from tables to flex to use whole width of window * fix conversion of dp to rem * use color from style for hover
sillsdev · Aug 27, 2024 · c12c5d1 · c12c5d1
1 parent 79052bf
commit c12c5d1
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 75 deletions.
diff --git a/convert/convertConfig.ts b/convert/convertConfig.ts
@@ -52,21 +52,11 @@ function parseStyles(stylesTag: Element, verbose: number) {
             const propValue = propertyTag.getAttribute('value');
             if (propName && propValue) {
                 // Check for sp values (Android-specific) and convert to rem values:
-                if (propValue.endsWith('sp')) {
-                    properties[propName] = changeSpToRem(propValue);
-                    if (verbose)
-                        console.log(
-                            'Parsing ' +
-                                propName +
-                                ' = ' +
-                                propValue +
-                                ' -> ' +
-                                properties[propName]
-                        );
-                } else {
-                    //Not a sp value
-                    properties[propName] = propValue;
-                }
+                properties[propName] = changeAndroidToRem(propValue);
+                if (verbose)
+                    console.log(
+                        'Parsing ' + propName + ' = ' + propValue + ' -> ' + properties[propName]
+                    );
             }
         }
         styles.push({
@@ -132,12 +122,34 @@ function removeCData(data: string) {
     return data.replace('<![CDATA[', '').replace(']]>', '');
 }
 
-function changeSpToRem(propValue: string) {
-    // Convert Android-specific sp values to rem values
-    const rootFontSize = 16;
-    const remValue = Number(propValue.replace('sp', '')) / rootFontSize;
-    const newPropValue = String(remValue) + 'rem';
-    return newPropValue;
+function changeAndroidToRem(propValue: string) {
+    const rootFontSize = 16; // Standard root font size for rem conversion
+
+    if (propValue.endsWith('sp')) {
+        const remValue = Number(propValue.replace('sp', '')) / rootFontSize;
+        return `${remValue}rem`;
+    } else if (propValue.endsWith('dp')) {
+        const remValue = Number(propValue.replace('dp', '')) / rootFontSize;
+        return `${remValue}rem`;
+    } else if (propValue.endsWith('px')) {
+        const remValue = Number(propValue.replace('px', '')) / rootFontSize;
+        return `${remValue}rem`;
+    } else if (propValue.endsWith('pt')) {
+        const pxValue = Number(propValue.replace('pt', '')) * (96 / 72); // 1pt = 1/72 inch, 96px/inch
+        const remValue = pxValue / rootFontSize;
+        return `${remValue}rem`;
+    } else if (propValue.endsWith('in')) {
+        const pxValue = Number(propValue.replace('in', '')) * 96; // 96px/inch
+        const remValue = pxValue / rootFontSize;
+        return `${remValue}rem`;
+    } else if (propValue.endsWith('mm')) {
+        const pxValue = Number(propValue.replace('mm', '')) * (96 / 25.4); // 1 inch = 25.4 mm
+        const remValue = pxValue / rootFontSize;
+        return `${remValue}rem`;
+    } else {
+        // If no recognized unit, return the original value unchanged
+        return propValue;
+    }
 }
 
 function convertFooter(markdown: string | undefined, appdef: Document): string | undefined {

diff --git a/src/lib/components/SelectList.svelte b/src/lib/components/SelectList.svelte
@@ -4,7 +4,7 @@ A component to display menu options in a list.
 -->
 <script lang="ts">
     import { createEventDispatcher } from 'svelte';
-    import { s, convertStyle } from '$lib/data/stores';
+    import { s, convertStyle, themeColors, theme } from '$lib/data/stores';
     export let options: App.GridGroup[] = [];
 
     const dispatch = createEventDispatcher();
@@ -18,63 +18,46 @@ A component to display menu options in a list.
         });
     }
 
-    // class=" menu p-0 cursor-pointer hover:bg-base-100 min-w-[16rem]"
+    let hovered = null;
+    $: hoverColor = $theme === 'Dark' ? '#444444' : $themeColors['ButtonSelectedColor'];
+    $: backgroundColor = $s['ui.button.book-list']['background-color'];
+
+    // Function to handle span touch
+    function handleHover(event) {
+        console.log('hovered:', event.target.id);
+        hovered = event.target.id;
+    }
+
+    // Function to handle span touch end
+    function handleHoverEnd() {
+        hovered = null;
+    }
+
+    $: rowStyle = convertStyle($s['ui.button.book-list']);
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 {#each options as group}
     {#if group.header}
-        <div style={convertStyle($s['ui.text.book-group-title'])}>{group.header}</div>
+        <div class="flex items-center" style={convertStyle($s['ui.text.book-group-title'])}>
+            {group.header}
+        </div>
     {/if}
-    <table>
-        {#each Array(group.cells.length) as _, ri}
-            <td>
-                {#each Array(group.cells.length) as _, ci}
-                    {#if ri * group.cells.length + ci < group.cells.length}
-                        <tr>
-                            <!-- svelte-ignore a11y-click-events-have-key-events -->
-                            <!-- svelte-ignore a11y-interactive-supports-focus -->
-                            <span
-                                on:click={() =>
-                                    handleClick(group.cells[ri * group.cells.length + ci])}
-                                class="menu p-0 cursor-pointer hover:bg-base-100 min-w-[16rem]"
-                                role="button"
-                            >
-                                {group.cells[ri * group.cells.length + ci].label}
-                            </span></tr
-                        >
-                    {/if}
-                {/each}
-            </td>
+    <!-- svelte-ignore a11y-mouse-events-have-key-events -->
+    <div class="flex flex-wrap" on:mouseover={handleHover} on:mouseout={handleHoverEnd}>
+        {#each group.cells as cell}
+            <!-- svelte-ignore a11y-interactive-supports-focus -->
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <div
+                on:click={() => handleClick(cell)}
+                id={cell.id}
+                class="menu ps-2 cursor-pointer min-w-[16rem] flex-grow flex items-center"
+                style={rowStyle}
+                style:background-color={hovered == cell.id ? hoverColor : backgroundColor}
+                role="button"
+            >
+                {cell.label}
+            </div>
         {/each}
-    </table>
+    </div>
 {/each}
-
-<style>
-    div {
-        padding: 5px;
-    }
-    table {
-        width: 100%;
-        margin-left: auto;
-        margin-right: auto;
-        padding: 0px;
-        border-collapse: unset;
-    }
-    tr {
-        width: 80%;
-        margin: 0px;
-        padding: 0px;
-    }
-    td {
-        margin: 0px;
-        position: relative;
-        border-radius: 2px;
-    }
-    span {
-        text-overflow: ''; /* Works on Firefox only */
-        overflow: hidden;
-        display: inline-block;
-        vertical-align: middle;
-        padding: 0.5em 0;
-    }
-</style>