Bommels05/Modrinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modernize iconified-input

Browse Source
This commit is contained in:
Carter 2024-01-17 14:01:57 -08:00
parent cce9d348a9
commit 39b80cb484
No known key found for this signature in database
12 changed files with 58 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
theseus_gui/src/assets/stylesheets/components.scss Normal file
View File

@ -0,0 +1,28 @@
// Quick snippets stolen from knossos project to make omorphia components fit
.iconified-input {
align-items: center;
display: inline-flex;
position: relative;
input {
padding-left: 2.25rem;
width: 100%;
}
&:focus-within svg {
color: var(--color-button-text-active);
opacity: 1;
}
svg {
position: absolute;
left: 0.75rem;
height: 1.25rem;
width: 1.25rem;
z-index: 1;
color: var(--color-button-text);
opacity: 0.6;
}
}

2
theseus_gui/src/components/GridDisplay.vue
View File

@ -246,7 +246,7 @@ const filteredResults = computed(() => {
<div class="iconified-input">
<SearchIcon />
<input v-model="search" type="text" placeholder="Search" class="search-input" />
<Button @click="() => (search = '')">
<Button class="r-btn" @click="() => (search = '')">
<XIcon />
</Button>
</div>

1
theseus_gui/src/components/ui/AccountsCard.vue
View File

@ -83,6 +83,7 @@
v-tooltip="'Open link'"
icon-only
color="raised"
class="r-btn"
@click="() => clipboardWrite(loginUrl)"
>
<GlobeIcon />

4
theseus_gui/src/components/ui/ExportModal.vue
View File

@ -112,7 +112,7 @@ const exportPack = async () => {
<div class="iconified-input">
<PackageIcon />
<input v-model="nameInput" type="text" placeholder="Modpack name" class="input" />
<Button @click="nameInput = ''">
<Button class="r-btn" @click="nameInput = ''">
<XIcon />
</Button>
</div>
@ -122,7 +122,7 @@ const exportPack = async () => {
<div class="iconified-input">
<VersionIcon />
<input v-model="versionInput" type="text" placeholder="1.0.0" class="input" />
<Button @click="versionInput = ''">
<Button class="r-btn" @click="versionInput = ''">
<XIcon />
</Button>
</div>

2
theseus_gui/src/components/ui/InstanceCreationModal.vue
View File

@ -110,7 +110,7 @@
placeholder="Path to launcher"
@change="setPath"
/>
<Button @click="() => (selectedLauncherPath = '')">
<Button class="r-btn" @click="() => (selectedLauncherPath = '')">
<XIcon />
</Button>
</div>

2
theseus_gui/src/components/ui/tutorial/FakeGridDisplay.vue
View File

@ -23,7 +23,7 @@ defineProps({
<div class="iconified-input">
<SearchIcon />
<input v-model="search" type="text" placeholder="Search" class="search-input" />
<Button @click="() => (search = '')">
<Button class="r-btn" @click="() => (search = '')">
<XIcon />
</Button>
</div>

2
theseus_gui/src/components/ui/tutorial/FakeSearch.vue
View File

@ -189,7 +189,7 @@ defineProps({
type="text"
:placeholder="`Search ${projectType}s...`"
/>
<Button @click="() => (query = '')">
<Button class="r-btn" @click="() => (query = '')">
<XIcon />
</Button>
</div>

2
theseus_gui/src/components/ui/tutorial/ImportingCard.vue
View File

@ -132,7 +132,7 @@ const next = async () => {
placeholder="Path to launcher"
@change="setPath"
/>
<Button @click="() => (selectedLauncherPath = '')">
<Button class="r-btn" @click="() => (selectedLauncherPath = '')">
<XIcon />
</Button>
</div>

2
theseus_gui/src/components/ui/tutorial/LoginCard.vue
View File

@ -119,7 +119,7 @@ const clipboardWrite = async (a) => {
<div class="iconified-input">
<LogInIcon />
<input type="text" :value="loginUrl" readonly />
<Button v-tooltip="'Open link'" icon-only color="raised" @click="openUrl">
<Button v-tooltip="'Open link'" icon-only color="raised" class="r-btn" @click="openUrl">
<GlobeIcon />
</Button>
</div>

20
theseus_gui/src/main.js
View File

@ -2,8 +2,10 @@ import { createApp } from 'vue'
import router from '@/routes'
import App from '@/App.vue'
import { createPinia } from 'pinia'
import { createPlugin as createVintl } from '@vintl/vintl/plugin'
import 'omorphia/dist/style.css'
import '@/assets/stylesheets/global.scss'
import '@/assets/stylesheets/components.scss'
import 'floating-vue/dist/style.css'
import FloatingVue from 'floating-vue'
import { get_opening_command, initialize_state } from '@/helpers/state'
@ -14,9 +16,25 @@ import { isDev } from './helpers/utils.js'
const pinia = createPinia()
const vintl = createVintl({
controllerOpts: {
defaultLocale: 'en-US',
locale: 'en-US',
locales: [
{
tag: 'en-US',
meta: {
displayName: 'American English',
},
},
],
},
})
let app = createApp(App)
app.use(router)
app.use(pinia)
app.use(vintl)
app.use(FloatingVue)
app.mixin(loadCssMixin)
@ -54,7 +72,7 @@ initialize_state()
.finally(() => {
mountedApp.initialize()
get_opening_command().then((command) => {
console.log(JSON.stringify(command)) // change me to use whatever FE command handler is made
console.log('Opening Command', JSON.stringify(command)) // change me to use whatever FE command handler is made
})
})
})

9
theseus_gui/src/pages/Browse.vue
View File

@ -705,7 +705,7 @@ onUnmounted(() => unlistenOffline())
:placeholder="`Search ${projectType}s...`"
@input="onSearchChange(1)"
/>
<Button @click="() => clearSearch()">
<Button class="r-btn" @click="() => clearSearch()">
<XIcon />
</Button>
</div>
@ -843,13 +843,6 @@ onUnmounted(() => unlistenOffline())
min-height: min-content !important;
}
.iconified-input {
input {
max-width: none !important;
flex-basis: auto;
}
}
.search-panel-container {
display: inline-flex;
flex-direction: row;

2
theseus_gui/src/pages/Settings.vue
View File

@ -187,7 +187,7 @@ async function refreshDir() {
<div class="iconified-input">
<BoxIcon />
<input id="appDir" v-model="settingsDir" type="text" class="input" />
<Button @click="findLauncherDir">
<Button class="r-btn" @click="findLauncherDir">
<FolderSearchIcon />
</Button>
</div>