diff --git a/css/options.css b/css/options.css index 8026dea..d96d04f 100644 --- a/css/options.css +++ b/css/options.css @@ -132,7 +132,7 @@ code { background: #ececec; padding: 5px 8px; border-radius: 3px; } display: block; cursor: pointer; max-width: 400px; - height: 40px; + /* height: 40px; */ padding: 5px; margin: 0 0 20px 0; // Increase the bottom margin to account for the space of the image border-radius: 3px; @@ -156,7 +156,12 @@ code { background: #ececec; padding: 5px 8px; border-radius: 3px; } /* Add CSS styles for the image */ .s-label img { - display: block; - margin-top: 10px; + display: inline-block; /* Change display to inline-block */ + margin: 0 10px; /* Add horizontal margin */ + vertical-align: middle; /* Align it vertically in the middle */ object-fit: cover; +} + +.s-label .mdc-radio { + display: inline-block; /* Make radio buttons inline elements */ } \ No newline at end of file diff --git a/icons/multiple_instructions.jpg b/icons/multiple_instructions.jpg new file mode 100644 index 0000000..9c351ee Binary files /dev/null and b/icons/multiple_instructions.jpg differ diff --git a/options/options.js b/options/options.js index 891b598..d7ea3cf 100644 --- a/options/options.js +++ b/options/options.js @@ -38,12 +38,12 @@ chrome.runtime.onMessage.addListener((request) => { var state = { shortcut: {}, api: [ - {id: 'gpt', title: 'GPT (For in-depth translation)', image: null}, - {id: 'deepl', title: 'DeepL (For quick translation)', image: null} + {id: 'gpt', title: 'GPT (For in-depth translation)'}, + {id: 'deepl', title: 'DeepL (For quick translation)'} ], capture_mode: [ {id: 'single', title: 'Capture a single text bubble (for stability)'}, - {id: 'multiple', title: 'Capture multiple text bubbles (for convenience)'}, + {id: 'multiple', title: 'Capture multiple text bubbles (for convenience)', image: './icons/multiple_instructions.jpg'}, {id: 'screen', title: 'Capture the entire screen'} ], pronunciation: [ @@ -144,11 +144,6 @@ m.mount(document.querySelector('main'), { ), ), m('span', item.title), - // Conditionally render an image only when an image source is provided - item.image && m('img', { - src: item.image, - style: {width: '100px', height: '100px'} // Set a fixed size for the image - }) ) ) ), @@ -168,7 +163,12 @@ m.mount(document.querySelector('main'), { m('.mdc-radio__inner-circle'), ), ), - m('span', item.title) + m('span', item.title), + // Conditionally render an image only when an image source is provided + item.image && m('img', { + src: item.image, + style: {width: '550px'} // Set a fixed size for the image + }) ) ) ),