lee/Exiled-Exchange-2
1
0
Fork 0
mirror of https://github.com/Kvan7/Exiled-Exchange-2.git synced 2026-09-25 22:25:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

fontSize

Browse Source
This commit is contained in:
Alexander Drozdov
2020-06-25 22:08:13 +03:00
parent 6d0c2e2f53
commit c2cf259bb4
19 changed files with 103 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ipc/types.ts
+2
View File
@@ -25,6 +25,7 @@ export interface Config {
stashScroll: boolean
subdomain: string
widgets: Widget[]
fontSize: number
}
interface Widget {
@@ -81,6 +82,7 @@ export const defaultConfig: Config = {
searchStatRange: 10,
stashScroll: true,
subdomain: 'us',
fontSize: 16,
widgets: [
// --- REQUIRED ---
{
src/main/SettingsWindow.ts
+5 -3
View File
@@ -2,6 +2,7 @@ import path from 'path'
import { BrowserWindow, dialog } from 'electron'
import { PoeWindow } from './PoeWindow'
import { isInteractable } from './overlay-window'
import { config } from './config'
let settingsWindow: BrowserWindow | undefined
@@ -29,14 +30,15 @@ export function createWindow () {
}
settingsWindow = new BrowserWindow({
width: 800,
height: 600,
width: 50 * config.get('fontSize'),
height: 37.5 * config.get('fontSize'),
icon: path.join(__static, 'icon.png'),
fullscreenable: false,
frame: false,
backgroundColor: '#2d3748', // gray-800
webPreferences: {
nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION as any
nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION as any,
defaultFontSize: config.get('fontSize')
}
})
src/main/builtin-browser.ts
+4 -3
View File
@@ -3,8 +3,9 @@ import * as ipc from '@/ipc/ipc-event'
import { DPR, overlayWindow, handleExtraCommands } from './overlay-window'
import { PoeWindow } from './PoeWindow'
import { logger } from './logger'
import { config } from './config'
const WIDTH_96DPI = 460
const WIDTH_96DPI = 460 / 16
let browserViewExternal: BrowserView | undefined
@@ -12,7 +13,7 @@ export function setupBuiltinBrowser () {
ipcMain.on(ipc.SHOW_BROWSER, (e, opts: ipc.IpcShowBrowser) => {
logger.debug('Show', { source: 'builtin-browser', opts })
if (!browserViewExternal) {
browserViewExternal = new BrowserView()
browserViewExternal = new BrowserView({ webPreferences: { zoomFactor: config.get('fontSize') / 16 } })
// hopefully someday this will enable subpixel AA
// browserViewExternal.setBackgroundColor('#2d3748') // gray-800
browserViewExternal.webContents.on('before-input-event', handleExtraCommands)
@@ -22,7 +23,7 @@ export function setupBuiltinBrowser () {
let browserBounds = {
x: 0,
y: 0,
width: PoeWindow.bounds!.width - Math.floor(WIDTH_96DPI * DPR),
width: PoeWindow.bounds!.width - Math.floor(WIDTH_96DPI * DPR * config.get('fontSize')),
height: PoeWindow.bounds!.height
}
if (process.platform === 'win32') {
src/main/config.ts
+4
View File
@@ -42,6 +42,10 @@ export const config = (() => {
}
}
if (typeof config.get('fontSize') !== 'number') {
config.set('fontSize', defaultConfig.fontSize)
}
return config
})()
src/main/overlay-window.ts
+2 -1
View File
@@ -31,7 +31,8 @@ export async function createOverlayWindow () {
// backgroundColor: '#00000008',
webPreferences: {
nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION as any,
webSecurity: false
webSecurity: false,
defaultFontSize: config.get('fontSize')
}
})
src/main/price-check.ts
+5 -5
View File
@@ -7,8 +7,8 @@ import { config } from './config'
import { logger } from './logger'
import { overlayWindow, isInteractable, assertOverlayActive, assertPoEActive, DPR } from './overlay-window'
const WIDTH_96DPI = 460
const CLOSE_THRESHOLD_96DPI = 40
const WIDTH_96DPI = 460 / 16
const CLOSE_THRESHOLD_96DPI = 40 / 16
let isPriceCheckShown = false
let isClickedAfterLock = false
@@ -30,7 +30,7 @@ export function showWidget (opts: {
activeAreaRect = {
x: getOffsetX(checkPressPosition!, poeBounds),
y: poeBounds.y,
width: Math.floor(WIDTH_96DPI * DPR),
width: Math.floor(WIDTH_96DPI * DPR * config.get('fontSize')),
height: poeBounds.height
}
@@ -64,7 +64,7 @@ export function setupShowHide () {
if (!isPollingClipboard && !isInteractable && modifier !== config.get('priceCheckKeyHold')) {
const distance = Math.hypot(e.x - checkPressPosition!.x, e.y - checkPressPosition!.y)
if (distance > (CLOSE_THRESHOLD_96DPI * DPR)) {
if (distance > (CLOSE_THRESHOLD_96DPI * DPR * config.get('fontSize'))) {
logger.debug('Closing', { source: 'price-check', reason: 'Auto-hide on mouse move', distance, threshold: CLOSE_THRESHOLD_96DPI })
overlayWindow!.webContents.send(ipc.PRICE_CHECK_CANCELED)
isPriceCheckShown = false
@@ -124,7 +124,7 @@ function isPointInsideRect (point: Point, rect: Rectangle) {
function getOffsetX (mousePos: Point, poePos: Rectangle): number {
if (mousePos.x > (poePos.x + poePos.width / 2)) {
// inventory
return (poePos.x + poePos.width) - PoeWindow.uiSidebarWidth - Math.floor(WIDTH_96DPI * DPR)
return (poePos.x + poePos.width) - PoeWindow.uiSidebarWidth - Math.floor(WIDTH_96DPI * DPR * config.get('fontSize'))
} else {
// stash or chat
return poePos.x + PoeWindow.uiSidebarWidth
src/web/App.vue
+9 -3
View File
@@ -35,15 +35,21 @@
}
::-webkit-scrollbar {
width: 14px;
width: 0.875rem;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0 0 0.375rem rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 0 0.375rem rgba(0,0,0,0.5);
}
.popper {
font-size: 0.875rem !important;
border-radius: 0.25rem !important;
padding: 0.125rem !important;
}
.btn {
src/web/map-check/WidgetMapCheck.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<widget :config="{ ...config, anchor }" move-handles="none" readonly :removable="false">
<div class="bg-gray-800 text-gray-200" style="min-width: 320px;" :style="{ 'max-width': `${wm.width - wm.poeUiWidth}px` }">
<div class="bg-gray-800 text-gray-200" style="min-width: 20rem;" :style="{ 'max-width': `${wm.width - wm.poeUiWidth}px` }">
<div class="bg-gray-900 py-1 px-4 text-center">{{ mapName }}</div>
<div v-if="!item" class="px-8 py-2">
Item under cursor is not a map.
src/web/overlay/Widget.vue
+18 -18
View File
@@ -17,15 +17,15 @@
</div>
</div>
<div v-if="isMoving">
<div v-if="isHandleShown('tl')" :class="$style.mover" @mousedown="startMove('tl', $event)" style="left: -8px; top: -8px;"></div>
<div v-if="isHandleShown('tc')" :class="$style.mover" @mousedown="startMove('tc', $event)" style="left: calc(50% - 8px); top: -8px;"></div>
<div v-if="isHandleShown('tr')" :class="$style.mover" @mousedown="startMove('tr', $event)" style="left: calc(100% - 8px); top: -8px;"></div>
<div v-if="isHandleShown('cr')" :class="$style.mover" @mousedown="startMove('cr', $event)" style="left: calc(100% - 8px); top: calc(50% - 8px);"></div>
<div v-if="isHandleShown('br')" :class="$style.mover" @mousedown="startMove('br', $event)" style="left: calc(100% - 8px); top: calc(100% - 8px);"></div>
<div v-if="isHandleShown('bc')" :class="$style.mover" @mousedown="startMove('bc', $event)" style="left: calc(50% - 8px); top: calc(100% - 8px);"></div>
<div v-if="isHandleShown('bl')" :class="$style.mover" @mousedown="startMove('bl', $event)" style="left: -8px; top: calc(100% - 8px);"></div>
<div v-if="isHandleShown('cl')" :class="$style.mover" @mousedown="startMove('cl', $event)" style="left: -8px; top: calc(50% - 8px);"></div>
<div v-if="isHandleShown('cc')" :class="$style.mover" @mousedown="startMove('cc', $event)" style="left: calc(50% - 8px); top: calc(50% - 8px);"></div>
<div v-if="isHandleShown('tl')" :class="$style.mover" @mousedown="startMove('tl', $event)" style="left: -0.5rem; top: -0.5rem;"></div>
<div v-if="isHandleShown('tc')" :class="$style.mover" @mousedown="startMove('tc', $event)" style="left: calc(50% - 0.5rem); top: -0.5rem;"></div>
<div v-if="isHandleShown('tr')" :class="$style.mover" @mousedown="startMove('tr', $event)" style="left: calc(100% - 0.5rem); top: -0.5rem;"></div>
<div v-if="isHandleShown('cr')" :class="$style.mover" @mousedown="startMove('cr', $event)" style="left: calc(100% - 0.5rem); top: calc(50% - 0.5rem);"></div>
<div v-if="isHandleShown('br')" :class="$style.mover" @mousedown="startMove('br', $event)" style="left: calc(100% - 0.5rem); top: calc(100% - 0.5rem);"></div>
<div v-if="isHandleShown('bc')" :class="$style.mover" @mousedown="startMove('bc', $event)" style="left: calc(50% - 0.5rem); top: calc(100% - 0.5rem);"></div>
<div v-if="isHandleShown('bl')" :class="$style.mover" @mousedown="startMove('bl', $event)" style="left: -0.5rem; top: calc(100% - 0.5rem);"></div>
<div v-if="isHandleShown('cl')" :class="$style.mover" @mousedown="startMove('cl', $event)" style="left: -0.5rem; top: calc(50% - 0.5rem);"></div>
<div v-if="isHandleShown('cc')" :class="$style.mover" @mousedown="startMove('cc', $event)" style="left: calc(50% - 0.5rem); top: calc(50% - 0.5rem);"></div>
</div>
</div>
<div v-if="isMoving" :class="[$style.mover, $style.active]" :style="moverPosition" @mousedown="startMove(anchor.pos, $event)"></div>
@@ -70,8 +70,8 @@ export default {
},
moverPosition () {
return {
'top': `max(0%, min(calc(${this.anchor.y}% - (16px/2)), calc(100% - 16px)))`,
'left': `max(0%, min(calc(${this.anchor.x}% - (16px/2)), calc(100% - 16px)))`,
'top': `max(0%, min(calc(${this.anchor.y}% - (1rem/2)), calc(100% - 1rem)))`,
'left': `max(0%, min(calc(${this.anchor.x}% - (1rem/2)), calc(100% - 1rem)))`,
'z-index': this.config.wmZorder
}
},
@@ -209,7 +209,7 @@ export default {
}
.actionsPanel {
padding: 0.25rem 0;
@apply py-1;
color: #fff;
background: rgba(0,0,0, 0.25);
display: flex;
@@ -218,7 +218,7 @@ export default {
}
.action {
padding: 0 4px;
@apply px-1;
text-align: left;
&:hover {
@@ -244,11 +244,11 @@ export default {
.mover {
position: absolute;
/* top: max(0%, min(calc(y% - (16px/2)), calc(100% - 16px))); */
/* left: max(0%, min(calc(x% - (16px/2)), calc(100% - 16px))); */
width: 16px;
height: 16px;
border: 4px solid rgba(0, 0, 0, 0.5);
/* top: max(0%, min(calc(y% - (1rem/2)), calc(100% - 1rem))); */
/* left: max(0%, min(calc(x% - (1rem/2)), calc(100% - 1rem))); */
width: 1rem;
height: 1rem;
border: 0.25rem solid rgba(0, 0, 0, 0.5);
cursor: move;
user-select: none;
src/web/price-check/CheckPositionCircle.vue
+8 -8
View File
@@ -1,16 +1,16 @@
<template>
<div class="absolute rounded-full" :style="{
top: `${position.y - 40}px`,
left: `${position.x - 40}px`,
width: '80px',
height: '80px',
top: `calc(${position.y}px - 2.5rem)`,
left: `calc(${position.x}px - 2.5rem)`,
width: '5rem',
height: '5rem',
background: 'rgba(255,255,255,0.35)'
}" style="box-shadow: 0 1px 3px 0 rgb(0, 0, 0), 0 1px 2px 0 rgb(0, 0, 0);">
<div class="relative rounded-full" :style="{
top: `30px`,
left: `30px`,
width: '20px',
height: '20px',
top: `1.875rem`,
left: `1.875rem`,
width: '1.25rem',
height: '1.25rem',
background: 'rgba(255,255,255,0.5)'
}"></div>
</div>
src/web/price-check/PriceCheckWindow.vue
+1 -1
View File
@@ -8,7 +8,7 @@
<div v-if="!isBrowserShown" class="layout-column flex-shrink-0"
:style="{ width: `${wm.poeUiWidth}px` }">
</div>
<div id="price-window" class="layout-column flex-shrink-0 text-gray-200" style="width: 460px;">
<div id="price-window" class="layout-column flex-shrink-0 text-gray-200" style="width: 28.75rem;">
<app-titlebar @close="closePriceCheck" :title="title">
<div class="flex">
<ui-popper v-if="exaltedCost" trigger="clickToToggle" boundaries-selector="#price-window">
src/web/price-check/filters/FilterModifier.vue
+23 -9
View File
@@ -31,7 +31,7 @@
</span>
</template>
<div class="popper">
<div style="max-width: 300px;">{{ filter.hidden }}</div>
<div style="max-width: 18.75rem;">{{ filter.hidden }}</div>
</div>
</ui-popper>
</div>
@@ -42,9 +42,9 @@
class="text-xs leading-none px-1 rounded mod-type-variant">variant</span>
</div>
<div class="flex-1 mr-4">
<div style="width: 200px;">
<div style="width: 12.5rem;">
<ui-slider v-if="filter.boundMin !== undefined"
class="search-slider-rail" style="padding: 0;" :dotSize="[0, 20]" :height="20"
class="search-slider-rail" style="padding: 0;" :dotSize="[0, 1.25*fontSize]" :height="1.25*fontSize"
:railStyle="{ background: 'transparent' }" :processStyle="{ background: '#cbd5e0', borderRadius: 0 }"
drag-on-click lazy adsorb :enable-cross="false"
@@ -69,14 +69,15 @@
</div>
</div>
<div v-if="showQ20Notice"
class="bg-gray-700 text-gray-500 text-center rounded-b" style="width: 97px">Q {{ Math.max(20, item.quality || 0) }}%</div>
<div v-else style="width: 97px"></div>
class="bg-gray-700 text-gray-500 text-center rounded-b" style="width: calc(2*3rem + 1px)">Q {{ Math.max(20, item.quality || 0) }}%</div>
<div v-else style="width: calc(2*3rem + 1px)"></div>
</div>
</div>
</template>
<script>
import ItemModifierText from '../../ui/ItemModifierText'
import { Config } from '@/web/Config'
export default {
components: { ItemModifierText },
@@ -136,6 +137,9 @@ export default {
}
this.filter.disabled = false
}
},
fontSize () {
return Config.store.fontSize
}
},
methods: {
@@ -196,7 +200,7 @@ export default {
&::placeholder {
@apply text-gray-700;
font-size: 13px;
font-size: 0.8125rem;
}
/* &:not(:placeholder-shown) { @apply border-gray-600; } */
@@ -238,10 +242,20 @@ export default {
.search-slider-rail { @apply rounded bg-gray-700; }
.vue-slider-marks { display: flex; }
.vue-slider-dot-tooltip-inner {
font-size: 0.875rem;
padding: 0.125rem 0.3125rem;
min-width: 1.25rem;
border-radius: 0.25rem;
&::after {
border-width: 0.3125rem;
}
}
.custom-mark {
text-align: right;
white-space: nowrap;
padding: 0 4px;
@apply px-1;
@apply text-gray-500;
&.active {
@@ -257,8 +271,8 @@ export default {
content: ' ';
display: block;
position: absolute;
height: 4px;
width: 2px;
height: 0.25rem;
width: 0.125rem;
@apply bg-gray-900;
}
src/web/price-check/price-prediction/PricePrediction.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div :style="{ 'min-height': !showContrib ? '70px' : undefined }">
<div :style="{ 'min-height': !showContrib ? '4.375rem' : undefined }">
<div v-if="loading" class="py-2 flex justify-center pr-4">
<div>
<i class="fas fa-dna fa-spin text-gray-600"></i>
src/web/price-check/related-items/RelatedItems.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div v-if="result" class="flex max-w-full bg-gray-800 text-gray-400 mt-6 border border-gray-900" style="border-width: 4px;">
<div v-if="result" class="flex max-w-full bg-gray-800 text-gray-400 mt-6 border border-gray-900" style="border-width: 0.25rem;">
<div class="flex-1 p-2 w-1/2">
<div v-for="item in result.related" :key="item.detailsId"
:class="{ 'bg-gray-700 -mx-1 px-1': item.detailsId === detailsId }" class="rounded">
src/web/price-check/trade/RateLimiterState.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div v-if="show"
class="font-sans p-4 bg-gray-800 text-gray-400 mt-6 border border-gray-900" style="border-width: 4px;">
class="font-sans p-4 bg-gray-800 text-gray-400 mt-6 border border-gray-900" style="border-width: 0.25rem;">
<div v-for="limit in limits" :key="limit.policy">
<div :class="{ 'text-red-400': limit.hasQueue }">Policy: {{ limit.policy }}</div>
<div>
src/web/price-check/trade/TradeBulk.vue
+7 -6
View File
@@ -1,6 +1,7 @@
<template>
<div v-if="!error" class="layout-column flex-grow min-h-0">
<div class="mb-2 flex pl-2 justify-between items-baseline" style="min-height: 22px;">
<!-- @TODO: fix "Matched" text jumping (min-height: 22px) -->
<div class="mb-2 flex pl-2 justify-between items-baseline" style="min-height: 1.375rem;">
<div class="flex items-center text-gray-500">
<span class="mr-1">Matched:</span>
<span v-if="!result" class="text-gray-600">...</span>
@@ -31,7 +32,7 @@
<div class="px-2">Price</div>
</th>
<th class="trade-table-heading">
<div class="pl-1 pr-2 flex text-xs" style="line-height: 21px;"><span class="w-8 inline-block text-right -ml-px mr-px">{{ selectedCurr }}</span><span>{{ '\u2009' }}/{{ '\u2009' }}</span><span class="w-8 inline-block">bulk</span></div>
<div class="pl-1 pr-2 flex text-xs" style="line-height: 1.3125rem;"><span class="w-8 inline-block text-right -ml-px mr-px">{{ selectedCurr }}</span><span>{{ '\u2009' }}/{{ '\u2009' }}</span><span class="w-8 inline-block">bulk</span></div>
</th>
<th class="trade-table-heading">
<div class="px-1">Stock</div>
@@ -166,10 +167,10 @@ export default {
<style lang="postcss">
.trade-bulk-currency-icon {
width: 28px;
height: 28px;
margin: -7px;
margin-right: 2px;
width: 1.75rem;
height: 1.75rem;
margin: -0.4375rem;
margin-right: 0.125rem;
filter: grayscale(1);
}
</style>
src/web/settings/SettingsWindow.vue
+3 -3
View File
@@ -7,7 +7,7 @@
<router-link :to="{ name: 'settings.general' }" class="menu-item">General</router-link>
<router-link :to="{ name: 'settings.maps' }" class="menu-item">Maps</router-link>
<router-link :to="{ name: 'settings.debug' }" class="menu-item">Debug</router-link>
<div style="min-width: 150px;"></div>
<div style="min-width: 9.5rem;"></div>
</div>
<div class="text-gray-100 flex-grow layout-column">
<div class="flex-grow overflow-y-auto">
@@ -44,11 +44,11 @@ export default {
<style lang="postcss">
.menu-item {
text-align: left;
padding: 8px;
@apply p-2;
line-height: 1;
@apply text-gray-600;
@apply rounded;
margin-bottom: 2px;
margin-bottom: 0.125rem;
&:hover {
@apply text-gray-100;
src/web/settings/general.vue
+7
View File
@@ -22,6 +22,13 @@
<ui-radio v-model="config.searchStatRange" :value="0">Exact roll</ui-radio>
</div>
</div>
<div class="mb-2">
<div class="flex-1 mb-1">Font size <span class="bg-gray-200 text-gray-900 rounded px-1">Restart required</span></div>
<div class="mb-4 flex">
<input v-model.number="config.fontSize" class="rounded bg-gray-900 px-1 block w-16 mb-1 font-fontin-regular text-center" />
<span class="ml-1">px</span>
</div>
</div>
<!--div class="mb-2">
<div class="flex-1 mb-1">Trade API Subdomain</div>
<div class="mb-4 flex">
src/web/ui/UiToggle.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<button
@click="updateInput" class="flex items-center" style="height: 22px;">
@click="updateInput" class="flex items-center" style="height: 1.375rem;">
<i v-if="value" class="fas fa-toggle-on pr-1 text-gray-300"></i>
<i v-else class="fas fa-toggle-off pr-1 text-gray-600"></i>
<slot />