Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: use affix sidebar for editor sidebar #1002

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

feat: use affix sidebar for editor sidebar #1002

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ceba6b6
feat: use affix sidebar for editor sidebar
wa0x6e Nov 28, 2024
2d0b634
Merge branch 'master' into feat-use-affix-sidebar-for-editor
wa0x6e Nov 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
327 changes: 169 additions & 158 deletions apps/ui/src/views/Space/Editor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -375,176 +375,187 @@ watchEffect(() => {
<IH-paper-airplane class="rotate-90 relative left-[2px]" />
</UiButton>
</UiTopnav>
<div class="md:mr-[340px]">
<UiContainer class="pt-5 !max-w-[710px] mx-0 md:mx-auto s-box">
<MessageVotingPower
v-if="propositionPower"
class="mb-4"
:voting-power="propositionPower"
action="propose"
@fetch-voting-power="handleFetchPropositionPower"
/>
<UiAlert
v-if="
propositionPower && spaceType === 'default' && proposalLimitReached
"
type="error"
class="mb-4"
>
<span
>Please verify your space to publish more proposals.
<a
:href="VERIFIED_URL"
target="_blank"
class="text-rose-500 dark:text-neutral-100 font-semibold"
>Verify space</a
>.</span
<div class="flex items-stretch md:flex-row flex-col w-full md:h-full">
<div class="flex-1 grow min-w-0">
<UiContainer class="pt-5 !max-w-[710px] mx-0 md:mx-auto s-box">
<MessageVotingPower
v-if="propositionPower"
class="mb-4"
:voting-power="propositionPower"
action="propose"
@fetch-voting-power="handleFetchPropositionPower"
/>
<UiAlert
v-if="
propositionPower &&
spaceType === 'default' &&
proposalLimitReached
"
type="error"
class="mb-4"
>
</UiAlert>
<UiAlert
v-else-if="
propositionPower && spaceType !== 'turbo' && proposalLimitReached
"
type="error"
class="mb-4"
>
<span
>You can publish up to {{ MAX_1D_PROPOSALS.verified }} proposals per
day and {{ MAX_30D_PROPOSALS.verified }} proposals per month.
<a
:href="TURBO_URL"
target="_blank"
class="text-rose-500 dark:text-neutral-100 font-semibold"
>Increase limit</a
>.</span
<span
>Please verify your space to publish more proposals.
<a
:href="VERIFIED_URL"
target="_blank"
class="text-rose-500 dark:text-neutral-100 font-semibold"
>Verify space</a
>.</span
>
</UiAlert>
<UiAlert
v-else-if="
propositionPower && spaceType !== 'turbo' && proposalLimitReached
"
type="error"
class="mb-4"
>
</UiAlert>
<UiInputString
:key="proposalKey || ''"
v-model="proposal.title"
:definition="TITLE_DEFINITION"
:error="formErrors.title"
/>
<div class="flex space-x-3">
<button type="button" @click="previewEnabled = false">
<UiLink
:is-active="!previewEnabled"
text="Write"
class="border-transparent"
<span
>You can publish up to {{ MAX_1D_PROPOSALS.verified }} proposals
per day and {{ MAX_30D_PROPOSALS.verified }} proposals per month.
<a
:href="TURBO_URL"
target="_blank"
class="text-rose-500 dark:text-neutral-100 font-semibold"
>Increase limit</a
>.</span
>
</UiAlert>
<UiInputString
:key="proposalKey || ''"
v-model="proposal.title"
:definition="TITLE_DEFINITION"
:error="formErrors.title"
/>
<div class="flex space-x-3">
<button type="button" @click="previewEnabled = false">
<UiLink
:is-active="!previewEnabled"
text="Write"
class="border-transparent"
/>
</button>
<button type="button" @click="previewEnabled = true">
<UiLink
:is-active="previewEnabled"
text="Preview"
class="border-transparent"
/>
</button>
</div>
<UiMarkdown
v-if="previewEnabled"
class="px-3 py-2 border rounded-lg mb-[14px] min-h-[260px]"
:body="proposal.body"
/>
<UiComposer
v-else
v-model="proposal.body"
:definition="bodyDefinition"
:error="formErrors.body"
>
<template
v-if="
!space?.turbo &&
isOffchainSpace &&
formErrors.body?.startsWith('Must not have more than')
"
#error-suffix
>
<a
:href="TURBO_URL"
target="_blank"
class="ml-1 text-skin-danger font-semibold"
>Increase limit</a
>.
</template>
</UiComposer>
<div class="s-base mb-5">
<UiInputString
:key="proposalKey || ''"
v-model="proposal.discussion"
:definition="DISCUSSION_DEFINITION"
:error="formErrors.discussion"
/>
</button>
<button type="button" @click="previewEnabled = true">
<UiLink
:is-active="previewEnabled"
text="Preview"
class="border-transparent"
<UiLinkPreview
:key="proposalKey || ''"
:url="proposal.discussion"
/>
</button>
</div>
<UiMarkdown
v-if="previewEnabled"
class="px-3 py-2 border rounded-lg mb-[14px] min-h-[260px]"
:body="proposal.body"
/>
<UiComposer
v-else
v-model="proposal.body"
:definition="bodyDefinition"
:error="formErrors.body"
>
<template
</div>
<div
v-if="
!space?.turbo &&
isOffchainSpace &&
formErrors.body?.startsWith('Must not have more than')
network &&
strategiesWithTreasuries &&
strategiesWithTreasuries.length > 0
"
#error-suffix
>
<a
:href="TURBO_URL"
target="_blank"
class="ml-1 text-skin-danger font-semibold"
>Increase limit</a
>.
</template>
</UiComposer>
<div class="s-base mb-5">
<UiInputString
:key="proposalKey || ''"
v-model="proposal.discussion"
:definition="DISCUSSION_DEFINITION"
:error="formErrors.discussion"
<h4 class="eyebrow mb-2">Execution</h4>
<EditorExecution
v-for="execution in editorExecutions"
:key="execution.address"
:model-value="execution.transactions"
:disabled="
!supportsMultipleTreasuries &&
hasExecution &&
execution.transactions.length === 0
"
:space="space"
:strategy="execution"
:extra-contacts="extraContacts"
class="mb-3"
@update:model-value="
value => handleExecutionUpdated(execution.address, value)
"
/>
</div>
</UiContainer>
</div>

<Affix
:class="['shrink-0 md:w-[340px] border-l-0 md:border-l -mb-6']"
:top="72"
:bottom="64"
>
<div class="flex flex-col p-4 space-y-4">
<EditorVotingType
v-model="proposal"
:voting-types="
enforcedVoteType ? [enforcedVoteType] : space.voting_types
"
/>
<UiLinkPreview :key="proposalKey || ''" :url="proposal.discussion" />
</div>
<div
v-if="
network &&
strategiesWithTreasuries &&
strategiesWithTreasuries.length > 0
"
>
<h4 class="eyebrow mb-2">Execution</h4>
<EditorExecution
v-for="execution in editorExecutions"
:key="execution.address"
:model-value="execution.transactions"
:disabled="
!supportsMultipleTreasuries &&
hasExecution &&
execution.transactions.length === 0
<EditorChoices
v-model="proposal"
:minimum-basic-choices="
offchainNetworks.includes(space.network) ? 2 : 3
"
:space="space"
:strategy="execution"
:extra-contacts="extraContacts"
class="mb-3"
@update:model-value="
value => handleExecutionUpdated(execution.address, value)
:definition="choicesDefinition"
:error="
proposal.choices.length > choicesDefinition.maxItems
? `Must not have more than ${_n(choicesDefinition.maxItems)} items.`
: ''
"
>
<template v-if="!space?.turbo && isOffchainSpace" #error-suffix>
<a
:href="TURBO_URL"
target="_blank"
class="ml-1 text-skin-danger font-semibold"
>Increase limit</a
>.
</template>
</EditorChoices>
<EditorLabels
v-if="space.labels?.length"
v-model="proposal.labels"
:space="space"
/>
<div>
<h4 class="eyebrow mb-2.5" v-text="'Timeline'" />
<ProposalTimeline :data="space" />
</div>
</div>
</UiContainer>
</div>

<div
class="static md:fixed md:top-[72px] md:right-0 w-full md:h-[calc(100vh-72px)] md:max-w-[340px] p-4 md:pb-[88px] border-l-0 md:border-l space-y-4 no-scrollbar overflow-y-scroll"
>
<EditorVotingType
v-model="proposal"
:voting-types="
enforcedVoteType ? [enforcedVoteType] : space.voting_types
"
/>
<EditorChoices
v-model="proposal"
:minimum-basic-choices="
offchainNetworks.includes(space.network) ? 2 : 3
"
:definition="choicesDefinition"
:error="
proposal.choices.length > choicesDefinition.maxItems
? `Must not have more than ${_n(choicesDefinition.maxItems)} items.`
: ''
"
>
<template v-if="!space?.turbo && isOffchainSpace" #error-suffix>
<a
:href="TURBO_URL"
target="_blank"
class="ml-1 text-skin-danger font-semibold"
>Increase limit</a
>.
</template>
</EditorChoices>
<EditorLabels
v-if="space.labels?.length"
v-model="proposal.labels"
:space="space"
/>
<div>
<h4 class="eyebrow mb-2.5" v-text="'Timeline'" />
<ProposalTimeline :data="space" />
</div>
</Affix>
</div>
<teleport to="#modal">
<ModalTerms
Expand Down