Skip to content

Commit 52261e6

Browse files
xdeqxdeq
authored
Merge pull request #7 from celenium-io/dev
1.2.0
2 parents 33f2432 + 26b5e0c commit 52261e6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+2406
-466
lines changed

‎app.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ onMounted(async () => {
3636
<div id="tooltip" />
3737
<div id="modal" />
3838
<div id="dropdown" />
39+
<div id="popover" />
3940

4041
<ModalsManager />
4142
<Notifications />

‎assets/icons.json

Lines changed: 5 additions & 0 deletions
Large diffs are not rendered by default.

‎assets/styles/text.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,3 +91,7 @@ $textColors: (
9191
.tabular {
9292
font-variant: tabular-nums;
9393
}
94+
95+
.selectable {
96+
user-select: text;
97+
}

‎components/BadgeValue.vue

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,16 @@ const handleCopy = () => {
3737
</script>
3838

3939
<template>
40-
<Flex @click="handleCopy" align="center" gap="12" :class="$style.wrapper">
41-
<Text size="12" weight="600" color="secondary" mono>{{ space(text.toUpperCase()) }}</Text>
42-
<Icon :name="copied ? 'check' : 'copy'" size="12" :color="copied ? 'green' : 'secondary'" />
40+
<Flex @click="handleCopy" align="center" justify="between" :class="$style.wrapper">
41+
<Flex :class="$style.left">
42+
<Text size="12" weight="600" color="secondary" mono>{{ space(text.toUpperCase()) }}</Text>
43+
</Flex>
44+
45+
<div v-for="dot in 3" class="dot" />
46+
47+
<Flex justify="end" :class="$style.right">
48+
<Text size="12" weight="600" color="secondary" mono>{{ space(text.toUpperCase()) }}</Text>
49+
</Flex>
4350
</Flex>
4451
</template>
4552

@@ -53,14 +60,6 @@ const handleCopy = () => {
5360
5461
transition: all 0.2s ease;
5562
56-
& span {
57-
width: 100%;
58-
59-
white-space: nowrap;
60-
overflow: hidden;
61-
text-overflow: ellipsis;
62-
}
63-
6463
&:hover {
6564
border: 1px solid var(--op-15);
6665
background: var(--op-5);
@@ -71,4 +70,24 @@ const handleCopy = () => {
7170
background: var(--op-10);
7271
}
7372
}
73+
74+
.left {
75+
min-width: 42%;
76+
width: 0;
77+
overflow: hidden;
78+
79+
& span {
80+
white-space: nowrap;
81+
}
82+
}
83+
84+
.right {
85+
min-width: 42%;
86+
width: 0;
87+
overflow: hidden;
88+
89+
& span {
90+
white-space: nowrap;
91+
}
92+
}
7493
</style>

‎components/Feed.vue

Lines changed: 1 addition & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup>
22
/** Services */
3-
import { comma, formatBytes, abbreviate, getNetworkName } from "@/services/utils"
3+
import { comma, formatBytes, abbreviate } from "@/services/utils"
44
55
/** UI */
66
import Tooltip from "@/components/ui/Tooltip.vue"
@@ -86,22 +86,6 @@ const head = computed(() => appStore.head)
8686
<template #content> {{ comma(head.total_fee) }} UTIA </template>
8787
</Tooltip>
8888
</Flex>
89-
90-
<Tooltip v-if="head" position="end">
91-
<Flex align="center" gap="8" :class="$style.network">
92-
<div :class="[$style.status, head.synced ? $style.green : $style.red]" />
93-
<Text size="12" weight="500" color="tertiary" :class="$style.name"> {{ getNetworkName() }} </Text>
94-
</Flex>
95-
96-
<template #content>
97-
<Flex align="center" gap="6">
98-
<div :class="[$style.status, head.synced ? $style.green : $style.red]" />
99-
100-
<Text color="primary"><template v-if="!head.synced">Not</template> Synced </Text>
101-
</Flex>
102-
</template>
103-
</Tooltip>
104-
<Skeleton v-else w="60" h="12" />
10589
</Flex>
10690
</Flex>
10791
</template>
@@ -158,28 +142,6 @@ const head = computed(() => appStore.head)
158142
}
159143
}
160144
161-
.network {
162-
&:hover {
163-
.name {
164-
color: var(--txt-secondary);
165-
}
166-
}
167-
}
168-
169-
.status {
170-
width: 5px;
171-
height: 5px;
172-
border-radius: 50px;
173-
174-
&.green {
175-
background: var(--green);
176-
}
177-
178-
&.red {
179-
background: var(--red);
180-
}
181-
}
182-
183145
@media (max-width: 900px) {
184146
.wrapper {
185147
height: initial;

‎components/GasBar.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ const props = defineProps({
44
})
55
66
const getBarColor = () => {
7-
if (props.percent < 30) {
7+
if (props.percent > 100) {
8+
return "var(--red)"
9+
} else if (props.percent < 30) {
810
return "var(--orange)"
911
} else if (props.percent < 60) {
1012
return "var(--yellow)"
@@ -18,7 +20,7 @@ const getBarColor = () => {
1820
<div :class="$style.wrapper">
1921
<div
2022
:style="{
21-
width: `${percent}%`,
23+
width: `${percent > 100 ? 100 : percent}%`,
2224
background: getBarColor(),
2325
}"
2426
/>

‎components/OgImage/NamespaceImage.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,10 @@ const bgStyles = computed(() => {
3838
<span :style="{ fontSize: '70px', color: 'rgba(255,255,255, 0.3)' }">')</span>
3939
</div>
4040

41+
<span :style="{ fontSize: '46px', color: 'rgba(255,255,255, 0.9)' }">
42+
{{ namespace.name }}
43+
</span>
44+
4145
<span :style="{ fontSize: '40px', color: 'rgba(255,255,255, 0.7)' }">
4246
{{ formatBytes(namespace.size) }}
4347
</span>

‎components/Text.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@ const props = defineProps({
2929
type: Boolean,
3030
default: false,
3131
},
32+
selectable: {
33+
type: Boolean,
34+
default: false,
35+
},
3236
})
3337
3438
const classes = computed(() => {
@@ -58,6 +62,9 @@ const classes = computed(() => {
5862
if (props.tabular) {
5963
flexClasses.push(`tabular`)
6064
}
65+
if (props.selectable) {
66+
flexClasses.push(`selectable`)
67+
}
6168
6269
return flexClasses
6370
})

‎components/TheFooter.vue

Lines changed: 35 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { Dropdown, DropdownItem, DropdownTitle } from "@/components/ui/Dropdown"
44
55
/** Services */
6-
import { getNetworkName, isPrefersDarkScheme } from "@/services/utils"
6+
import { isPrefersDarkScheme } from "@/services/utils"
77
88
/** Store */
99
import { useAppStore } from "@/store/app"
@@ -13,7 +13,7 @@ const appConfig = useAppConfig()
1313
1414
let root = null
1515
16-
onBeforeMount(() => {
16+
onMounted(() => {
1717
root = document.querySelector("html")
1818
1919
if (!localStorage.theme) {
@@ -48,10 +48,6 @@ watch(
4848
},
4949
)
5050
51-
const handleNavigate = (url) => {
52-
window.location.replace(url)
53-
}
54-
5551
const handleChangeTheme = (theme) => {
5652
const root = document.querySelector("html")
5753
@@ -84,49 +80,36 @@ const handleChangeTheme = (theme) => {
8480

8581
<Flex direction="column" align="end" gap="16">
8682
<Flex align="center" gap="16">
87-
<Flex align="center" gap="8">
88-
<Dropdown side="top">
89-
<Flex align="center" gap="6" :class="$style.btn">
90-
<Icon name="globe" size="12" color="secondary" />
91-
<Text size="12" weight="600" color="secondary">{{ getNetworkName() }}</Text>
92-
</Flex>
93-
94-
<template #popup>
95-
<DropdownTitle>Network</DropdownTitle>
96-
<DropdownItem @click="handleNavigate('https://celenium.io')">Mainnet</DropdownItem>
97-
<DropdownItem @click="handleNavigate('https://mocha-4.celenium.io')">Mocha-4</DropdownItem>
98-
</template>
99-
</Dropdown>
100-
101-
<Dropdown v-if="appStore.theme" side="top">
102-
<Flex align="center" gap="6" :class="$style.btn">
103-
<Icon
104-
:name="
105-
(appStore.theme === 'system' && 'settings') ||
106-
(appStore.theme === 'light' && 'sun') ||
107-
(['dark', 'dimmed'].includes(appStore.theme) && 'moon')
108-
"
109-
size="12"
110-
color="secondary"
111-
/>
112-
<Text size="12" weight="600" color="secondary" :style="{ textTransform: 'capitalize' }">
113-
{{ appStore.theme }}
114-
</Text>
115-
</Flex>
116-
117-
<template #popup>
118-
<DropdownTitle>Theme</DropdownTitle>
119-
<DropdownItem @click="handleChangeTheme('dimmed')">Dimmed</DropdownItem>
120-
<DropdownItem @click="handleChangeTheme('dark')">Dark</DropdownItem>
121-
<DropdownItem @click="handleChangeTheme('light')">Light</DropdownItem>
122-
<DropdownItem @click="handleChangeTheme('system')">System</DropdownItem>
123-
</template>
124-
</Dropdown>
125-
</Flex>
83+
<Dropdown side="top">
84+
<Flex align="center" gap="6" :class="$style.btn">
85+
<Icon
86+
:name="
87+
appStore.theme
88+
? (appStore.theme === 'system' && 'settings') ||
89+
(appStore.theme === 'light' && 'sun') ||
90+
(['dark', 'dimmed'].includes(appStore.theme) && 'moon')
91+
: ''
92+
"
93+
size="12"
94+
color="secondary"
95+
/>
96+
<Text size="12" weight="600" color="secondary" :style="{ textTransform: 'capitalize' }">
97+
{{ appStore.theme }}
98+
</Text>
99+
</Flex>
100+
101+
<template #popup>
102+
<DropdownTitle>Theme</DropdownTitle>
103+
<DropdownItem @click="handleChangeTheme('dimmed')">Dimmed</DropdownItem>
104+
<DropdownItem @click="handleChangeTheme('dark')">Dark</DropdownItem>
105+
<DropdownItem @click="handleChangeTheme('light')">Light</DropdownItem>
106+
<DropdownItem @click="handleChangeTheme('system')">System</DropdownItem>
107+
</template>
108+
</Dropdown>
126109

127110
<Text size="12" weight="700" color="support">/</Text>
128111

129-
<Flex align="center" gap="8">
112+
<Flex align="center" gap="8" :class="$style.socials">
130113
<a href="https://twitter.com/celenium_io" target="_blank">
131114
<Icon name="twitter" size="14" color="secondary" :class="$style.btn" />
132115
</a>
@@ -199,6 +182,12 @@ const handleChangeTheme = (theme) => {
199182
}
200183
}
201184
185+
.socials {
186+
& a {
187+
display: flex;
188+
}
189+
}
190+
202191
@media (max-width: 600px) {
203192
.container {
204193
flex-direction: column;

0 commit comments

Comments
 (0)