Skip to content

Commit

Permalink
refactor: cleanup Pane (#7153)
Browse files Browse the repository at this point in the history 
* feat: update Pane component and remove classes

* fix: remove debris

* fix: remove string concatenation

* fix: add width

* fix: remove unnecessary div

* fix: remove debris export error

* style: polish css to match production version

---------

Co-authored-by: Jean Carlo Noguera <[email protected]>
Co-authored-by: Begoña Álvarez de la Cruz <[email protected]>
  • Loading branch information
@evavirseda @VmMad @begonaalvarezd
3 people authored Aug 19, 2023
1 parent fd4f42a commit 9d6c771
Show file tree
Hide file tree
Showing 16 changed files with 289 additions and 259 deletions.
2 changes: 1 addition & 1 deletion packages/desktop/components/AccountActivity.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
}
</script>

<div class="activity-list h-full p-6 flex flex-col flex-auto flex-grow shrink-0">
<div class="activity-list h-full flex flex-col flex-auto flex-grow shrink-0">
<div class="mb-4">
<div class="relative flex flex-1 flex-row justify-between">
<Text type="h5">{localize('general.activity')}</Text>
Expand Down
2 changes: 1 addition & 1 deletion packages/desktop/components/AccountSummary.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
$: ({ baseCoin } = $selectedAccountAssets[$activeProfile?.network.id])
</script>

<account-summary class="block relative p-6 space-y-4">
<account-summary class="block relative space-y-4">
<div class="flex flex-row items-center justify-between">
<Text type={TextType.h5} classes="text-left">
{localize('general.balanceWithNetwork', { values: { network: fomattedNetworkName } })}
Expand Down
4 changes: 2 additions & 2 deletions packages/desktop/components/panes/ProposalInformationPane.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import { KeyValueBox, Pane, Text } from '@ui'
import { Height, KeyValueBox, Pane, Text } from '@ui'
import { formatDate, localize } from '@core/i18n'
import { DATE_FORMAT, IKeyValueBoxList, milestoneToDate, truncateString } from '@core/utils'
import { networkStatus } from '@core/network/stores'
Expand Down Expand Up @@ -61,7 +61,7 @@
}
</script>

<Pane classes="p-6 h-fit {classes}">
<Pane height={Height.Fit}>
<Text smaller classes="mb-5">
{localize('views.governance.details.proposalInformation.title')}
</Text>
Expand Down
164 changes: 86 additions & 78 deletions packages/desktop/views/dashboard/collectibles/views/CollectiblesDetailsView.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
Pane,
Text,
} from '@ui'
import { FontWeight, TextType } from '@ui/enums'
import { FontWeight, Height, TextType } from '@ui/enums'
let modal: Modal
Expand Down Expand Up @@ -154,88 +154,96 @@
</div>
</div>
</div>
<Pane classes="flex flex-col p-6 space-y-3 w-full h-full max-w-lg">
<nft-title class="flex justify-between items-center">
<Text type={TextType.h3} fontWeight={FontWeight.semibold}>{name}</Text>
<MeatballMenuButton onClick={modal?.toggle} />
<CollectibleActionsModal bind:modal {nft} />
</nft-title>
{#if description}
<nft-description>
<Text type={TextType.h5} fontWeight={FontWeight.normal} color="gray-700">
{description}
</Text>
</nft-description>
{/if}
<div class="overflow-y-scroll h-full flex flex-col space-y-4 pr-2 -mr-4">
<nft-details class="flex flex-col space-y-4">
<Text type={TextType.h5} fontWeight={FontWeight.semibold}>
{localize('general.details')}
</Text>
<key-value-list class="flex flex-col space-y-2">
{#each Object.entries(detailsList) as [key, value]}
{#key value}
<KeyValueBox
keyText={localize('general.' + key)}
copyValue={value.copyValue ?? value.data}
isCopyable={value.isCopyable}
valueText={value.data}
isPreText={value.isPreText}
maxHeight={value.maxHeight}
/>
{/key}
{/each}
</key-value-list>
</nft-details>
{#if attributes?.length > 0}
<nft-attributes class="flex flex-col space-y-4">
<Text type={TextType.h5} fontWeight={FontWeight.semibold}>
{localize('general.attributes')}
</Text>
<div class="flex flex-wrap gap-3">
{#each Object.values(attributes) as attribute}
<KeyValueBox keyText={attribute.trait_type} valueText={String(attribute.value)} shrink />
{/each}
</div>
</nft-attributes>
{:else}
{#if soonaverseAttributes?.props}
<nft-attributes class="flex flex-col space-y-4">
<Text type={TextType.h5} fontWeight={FontWeight.semibold}>
{localize('general.properties')}
<div class="max-w-lg">
<Pane height={Height.Full}>
<collectibles-details class="flex flex-col space-y-3 w-full max-w-lg h-full">
<nft-title class="flex justify-between items-center">
<Text type={TextType.h3} fontWeight={FontWeight.semibold} classes="break-words">{name}</Text>
<MeatballMenuButton onClick={modal?.toggle} />
<CollectibleActionsModal bind:modal {nft} />
</nft-title>
{#if description}
<nft-description class="break-words">
<Text type={TextType.h5} fontWeight={FontWeight.normal} color="gray-700">
{description}
</Text>
<div class="flex flex-wrap gap-3">
{#each Object.entries(soonaverseAttributes?.props) as [_key, { label, value }]}
<KeyValueBox keyText={label} valueText={String(value)} shrink />
{/each}
</div>
</nft-attributes>
</nft-description>
{/if}
{#if soonaverseAttributes?.stats}
<nft-attributes class="flex flex-col space-y-4">
<div class="overflow-y-scroll h-full flex flex-col space-y-4 pr-2 -mr-4">
<nft-details class="flex flex-col space-y-4">
<Text type={TextType.h5} fontWeight={FontWeight.semibold}>
{localize('general.statistics')}
{localize('general.details')}
</Text>
<div class="flex flex-wrap gap-3">
{#each Object.entries(soonaverseAttributes?.stats) as [_key, { label, value }]}
<KeyValueBox keyText={label} valueText={String(value)} shrink />
<key-value-list class="flex flex-col space-y-2">
{#each Object.entries(detailsList) as [key, value]}
{#key value}
<KeyValueBox
keyText={localize('general.' + key)}
copyValue={value.copyValue ?? value.data}
isCopyable={value.isCopyable}
valueText={value.data}
isPreText={value.isPreText}
maxHeight={value.maxHeight}
/>
{/key}
{/each}
</div>
</nft-attributes>
{/if}
{/if}
</div>
<buttons-container class="flex w-full space-x-4 self-end mt-auto pt-4">
<Button outline classes="flex-1" onClick={onExplorerClick} disabled={!explorerUrl}>
{localize('general.viewOnExplorer')}
</Button>
<Button classes="flex-1" onClick={onSendClick} disabled={!!timeDiff}>
{timeDiff
? localize('popups.balanceBreakdown.locked.title') + ' ' + String(timeDiff)
: localize('actions.send')}
</Button>
</buttons-container>
</Pane>
</key-value-list>
</nft-details>
{#if attributes?.length > 0}
<nft-attributes class="flex flex-col space-y-4">
<Text type={TextType.h5} fontWeight={FontWeight.semibold}>
{localize('general.attributes')}
</Text>
<div class="flex flex-wrap gap-3">
{#each Object.values(attributes) as attribute}
<KeyValueBox
keyText={attribute.trait_type}
valueText={String(attribute.value)}
shrink
/>
{/each}
</div>
</nft-attributes>
{:else}
{#if soonaverseAttributes?.props}
<nft-attributes class="flex flex-col space-y-4">
<Text type={TextType.h5} fontWeight={FontWeight.semibold}>
{localize('general.properties')}
</Text>
<div class="flex flex-wrap gap-3">
{#each Object.entries(soonaverseAttributes?.props) as [_key, { label, value }]}
<KeyValueBox keyText={label} valueText={String(value)} shrink />
{/each}
</div>
</nft-attributes>
{/if}
{#if soonaverseAttributes?.stats}
<nft-attributes class="flex flex-col space-y-4">
<Text type={TextType.h5} fontWeight={FontWeight.semibold}>
{localize('general.statistics')}
</Text>
<div class="flex flex-wrap gap-3">
{#each Object.entries(soonaverseAttributes?.stats) as [_key, { label, value }]}
<KeyValueBox keyText={label} valueText={String(value)} shrink />
{/each}
</div>
</nft-attributes>
{/if}
{/if}
</div>
<buttons-container class="flex w-full space-x-4 self-end mt-auto pt-4">
<Button outline classes="flex-1" onClick={onExplorerClick} disabled={!explorerUrl}>
{localize('general.viewOnExplorer')}
</Button>
<Button classes="flex-1" onClick={onSendClick} disabled={!!timeDiff}>
{timeDiff
? localize('popups.balanceBreakdown.locked.title') + ' ' + String(timeDiff)
: localize('actions.send')}
</Button>
</buttons-container>
</collectibles-details>
</Pane>
</div>
</collectibles-details-view>

<style lang="scss">
Expand Down
56 changes: 30 additions & 26 deletions packages/desktop/views/dashboard/developer/Developer.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,33 +21,37 @@
>
{#key $selectedAccount?.index}
<div class="flex columns-3 gap-4 min-h-0 min-w-0 max-w-7xl">
<Pane classes="flex flex-col p-6 space-y-6">
<Text type={TextType.h5} classes="text-left">
{localize('general.assets')}
</Text>
{#if features.developerTools.alias.enabled}
<CreateAliasButton />
{/if}
{#if features.developerTools.mintNativeTokens.enabled}
<MintNativeTokenButton />
{/if}
{#if features.developerTools.mintNft.enabled}
<MintNftButton />
{/if}
<Pane>
<div class="flex flex-col space-y-6">
<Text type={TextType.h5} classes="text-left">
{localize('general.assets')}
</Text>
{#if features.developerTools.alias.enabled}
<CreateAliasButton />
{/if}
{#if features.developerTools.mintNativeTokens.enabled}
<MintNativeTokenButton />
{/if}
{#if features.developerTools.mintNft.enabled}
<MintNftButton />
{/if}
</div>
</Pane>
<Pane classes="flex flex-col p-6 space-y-6">
<Text type={TextType.h5} classes="text-left">
{localize('general.developerTools')}
</Text>
{#if features.developerTools.faucet.enabled}
<FaucetRequestButton />
{/if}
{#if features.developerTools.deeplink.enabled}
<TestDeepLinkButton />
{/if}
{#if features.developerTools.refreshTokens.enabled}
<RefreshTokenMetadataButton />
{/if}
<Pane>
<div class="flex flex-col space-y-6">
<Text type={TextType.h5} classes="text-left">
{localize('general.developerTools')}
</Text>
{#if features.developerTools.faucet.enabled}
<FaucetRequestButton />
{/if}
{#if features.developerTools.deeplink.enabled}
<TestDeepLinkButton />
{/if}
{#if features.developerTools.refreshTokens.enabled}
<RefreshTokenMetadataButton />
{/if}
</div>
</Pane>
</div>
{/key}
Expand Down
6 changes: 3 additions & 3 deletions packages/desktop/views/dashboard/governance/views/GovernanceDashboardView.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script lang="ts">
import { Proposals, ProposalsDetails, VotingPower } from '@components'
import { Illustration, Pane, Text } from '@ui'
import { FontWeight } from '@ui/enums'
import { FontWeight, Height } from '@ui/enums'
import { localize } from '@core/i18n'
Expand All @@ -11,10 +11,10 @@

<governance-dashboard class="w-full h-full flex flex-nowrap p-8 relative flex-1 space-x-6 bg-gray-50 dark:bg-gray-900">
<div class="w-1/3 flex flex-col space-y-4">
<Pane classes="p-6 h-fit">
<Pane height={Height.Fit}>
<VotingPower />
</Pane>
<Pane classes="p-6 h-fit">
<Pane height={Height.Fit}>
<ProposalsDetails />
</Pane>
</div>
Expand Down
Loading

0 comments on commit 9d6c771

Please sign in to comment.