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

fix(mobile): configration templates #2030

Merged
merged 6 commits into from
Feb 24, 2023
Merged

fix(mobile): configration templates #2030

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9562ae4
fix(mobile): general settings layout
pugakn Feb 22, 2023
5f5f3a3
fix(mobile): voting settings layout
pugakn Feb 22, 2023
470dde4
fix(mobile): design settings layout
pugakn Feb 23, 2023
6a07c98
fix(mobile): plan settings layout
pugakn Feb 23, 2023
3df8fb8
fix(mobile): communication config toggle
pugakn Feb 23, 2023
ee3d83f
fix(mobile): buy token buttons
pugakn Feb 23, 2023
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
117 changes: 60 additions & 57 deletions src/components/dao/settings-communication.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,23 +40,25 @@ export default {

template(v-for="(announcement, index) in form.announcements")
.row.q-mt-sm
.col
label.h-label Title
q-input.q-my-sm.rounded-border(
:debounce="200"
:disable="!isAdmin"
:ref="'announcement.' + index + '.content'"
bg-color="white"
color="accent"
dense
lazy-rules
outlined
placeholder="Enter your message here"
rounded
v-model="announcement.title"
)
.col-auto.q-pt-xxl
q-toggle(v-model="announcement.enabled" color="secondary" :disable="!isAdmin" @input="(value) => toggleOff('announcements',index, value)")
.row.full-width.items-end
.col
label.h-label Title
.col-auto
q-toggle(v-model="announcement.enabled" color="secondary" :disable="!isAdmin" @input="(value) => toggleOff('announcements',index, value)")
.col-12
q-input.q-my-sm.rounded-border(
:debounce="200"
:disable="!isAdmin"
:ref="'announcement.' + index + '.content'"
bg-color="white"
color="accent"
dense
lazy-rules
outlined
placeholder="Enter your message here"
rounded
v-model="announcement.title"
)
.full-width
label.h-label Message
q-field.full-width.q-my-sm.rounded-border(
Expand Down Expand Up @@ -84,47 +86,48 @@ export default {
p.text-sm.text-h-gray.leading-loose.q-mt-md Only for Hypha - Post an alert across all DAOs to let users know about an important update.

template(v-for="(alert, index) in form.alerts")
.row.ju.q-mt-sm
label.h-label Alert {{ index + 1 }}
.row.items-end.full-width.q-my-sm
.col-auto
q-btn(unelevated padding="0")
q-avatar(size="40px" :color="alert.level")
q-icon.q-mx-xs(name='fas fa-chevron-down' size='12px')
q-menu
q-list(style='min-width: 140px')
q-item(clickable v-close-popup @click="alert.level = 'positive'").q-px-sm
q-item-section
q-avatar(size="20px" color="positive")
q-item-section Positive

q-item(clickable v-close-popup @click="alert.level = 'negative'").q-px-sm
q-item-section
q-avatar(size="20px" color="negative")
q-item-section Negative

q-item(clickable v-close-popup @click="alert.level = 'warning'").q-px-sm
q-item-section
q-avatar(size="20px" color="warning")
q-item-section Warning
.row.ju.q-mt-md.items-end
.col
label.h-label Alert {{ index + 1 }}
.col-auto
q-toggle(v-model="alert.enabled" color="secondary" :disable="!isAdmin" @input="(value) => toggleOff('alerts',index, value)")
.row.items-end.full-width.q-my-sm
.col-auto
q-btn(unelevated padding="0")
q-avatar(size="40px" :color="alert.level")
q-icon.q-mx-xs(name='fas fa-chevron-down' size='12px')
q-menu
q-list(style='min-width: 140px')
q-item(clickable v-close-popup @click="alert.level = 'positive'").q-px-sm
q-item-section
q-avatar(size="20px" color="positive")
q-item-section Positive

q-item(clickable v-close-popup @click="alert.level = 'negative'").q-px-sm
q-item-section
q-avatar(size="20px" color="negative")
q-item-section Negative

q-item(clickable v-close-popup @click="alert.level = 'warning'").q-px-sm
q-item-section
q-avatar(size="20px" color="warning")
q-item-section Warning

.col
q-input.rounded-border(
:debounce="200"
:disable="!isAdmin"
:ref="'alert.' + index + '.content'"
bg-color="white"
color="accent"
dense
lazy-rules
maxlength="200"
outlined
placeholder="Enter your message here"
rounded
v-model="alert.content"
)
.col-auto
q-toggle(v-model="alert.enabled" color="secondary" :disable="!isAdmin" @input="(value) => toggleOff('alerts',index, value)")
.col
q-input.rounded-border(
:debounce="200"
:disable="!isAdmin"
:ref="'alert.' + index + '.content'"
bg-color="white"
color="accent"
dense
lazy-rules
maxlength="200"
outlined
placeholder="Enter your message here"
rounded
v-model="alert.content"
)

nav.row.full-width.justify-end
q-btn(:disable="form.alerts.length === 1 || !isAdmin" flat color="primary" no-caps padding="none" @click="form.alerts.splice(index, 1)").text-bold.q-pa-none.q-mr-xs Remove notification -
Expand Down
54 changes: 42 additions & 12 deletions src/components/dao/settings-design.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -351,11 +351,11 @@ ${backgroundImage
q-tab(name="BANNERS" label="Banners" :ripple="false")

div(v-if="tab==='GENERAL'").row.justify-between.full-width.q-mt-xl
.row.justify-center.items-center.full-width.q-my-xl
.row.justify-center.items-center.full-width.q-my-xl(v-if="$q.screen.gt.sm")
.col-8
img(:src='previewGeneralmage')

.col-3
.col-12.col-md-3
.full-width.h-asset.items-start.q-mt-xl.text-center
.row.full-width(:style="{'height':'110px'}")
.col-6.row.justify-center.items-center(:style="{'background-color': form.primaryColor}")
Expand Down Expand Up @@ -435,7 +435,7 @@ ${backgroundImage
)
q-tooltip(:content-style="{ 'font-size': '1em' }" anchor="top middle" self="bottom middle" v-if="!isAdmin") Only DAO admins can change the settings

.col-3
.col-12.col-md-3
.full-width.h-asset.items-start.q-mt-xl.text-center(:style="{'height':'110px'}")
q-avatar(size="110px" font-size="24px" color="primary" text-color="white")
img(v-show="form.logo" :src="ipfsy(form.logo)")
Expand Down Expand Up @@ -512,7 +512,7 @@ ${backgroundImage
)
q-tooltip(:content-style="{ 'font-size': '1em' }" anchor="top middle" self="bottom middle" v-if="!isAdmin") Only DAO admins can change the settings

.col-3
.col-12.col-md-3
.full-width.h-asset.items-start.q-mt-xl.text-center(:style="{'height':'110px'}")
div.full-width.full-height.rounded-border(:style="{'background': `${form.primaryColor} url('${form.patternBase64}')`, 'background-size': '200px' }")

Expand Down Expand Up @@ -611,15 +611,44 @@ ${backgroundImage
.full-width.items-start.q-my-xl
template(v-for="(banner, index) in banners")
label.h-label {{banner.label}}
.q-mt-sm.row(v-if="!$q.screen.gt.sm")
q-btn.q-mr-xs(
@click="form[banner.image] = null"
color="internal-bg"
icon="fas fa-trash"
padding="12px"
rounded
size="sm"
text-color="primary"
unelevated
)
q-btn.col.q-px-xl.rounded-border.text-bold(
:disable="!isAdmin || banners[index].state === 'UPLOADING'"
@click="$refs.bannerImages[index].chooseFile()"
color="internal-bg"
:label="banners[index].state === 'UPLOADING' ? '...Uploading...' : 'Upload an image (max 3MB)'"
no-caps
rounded
text-color="primary"
unelevated
)
input-file-ipfs(
@uploading="banners[index].state = 'UPLOADING'"
@uploadedFile="form[banner.image] = arguments[0]; banners[index].state = 'FINISHED'"
image
ref="bannerImages"
v-show="false"
)
base-banner.q-mt-sm(
:compact="!$q.screen.gt.sm"
:title="form[banner.title]"
:description="form[banner.paragraph]"
:background="ipfsy(form[banner.image])"
:pattern="form.patternBase64"
:color="form.primaryColor"
)
template(#top-right)
.q-pa-xl.row
.q-pa-xl.row(v-if="$q.screen.gt.sm")
q-btn.q-mr-xs(
@click="form[banner.image] = null"
color="white"
Expand Down Expand Up @@ -668,9 +697,9 @@ ${backgroundImage
//- primary
//- )

.row.full-width.justify-between.q-mt-sm
.col-3.q-pr-sm
label.h-label Title
.row.full-width.justify-between(:class="{'q-mt-sm': $q.screen.gt.sm, 'q-mb-xl': !$q.screen.gt.sm}")
.col-12.col-md-3(:class="{'q-pr-sm': $q.screen.gt.sm}")
label.h-label(v-if="$q.screen.gt.sm") Title
q-input.q-my-sm.rounded-border(
:debounce="200"
:disable="!isAdmin"
Expand All @@ -686,9 +715,10 @@ ${backgroundImage
v-model='form[banner.title]'
)
q-tooltip(:content-style="{ 'font-size': '1em' }" anchor="top middle" self="bottom middle" v-if="!isAdmin") Only DAO admins can change the settings
.col-9.q-pl-sm
label.h-label Short paragraph
q-input.q-my-sm.rounded-border(
.col-12.col-md-9(:class="{'q-pl-sm': $q.screen.gt.sm}")
label.h-label(v-if="$q.screen.gt.sm") Short paragraph
q-input.rounded-border(
:class="{'q-my-sm': $q.screen.gt.sm}"
:debounce="200"
:disable="!isAdmin"
:input-style="{ 'resize': 'none' }"
Expand All @@ -701,7 +731,7 @@ ${backgroundImage
placeholder="Max 140 characters"
ref="nickname"
rounded
rows='3'
:rows="$q.screen.gt.sm ? 3 : 6"
type="textarea"
v-model='form[banner.paragraph]'
)
Expand Down
26 changes: 13 additions & 13 deletions src/components/dao/settings-general.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ export default {
widget(title='General' titleImage='/svg/file-checkmark.svg' :bar='true').q-pa-none.full-width
p.text-sm.text-h-gray.leading-loose.q-mt-md Use general settings to set up some basic parameters such as a link to your main collaboration space and your DAO and use the toggle to enable or disable key features.

.row.justify-between
.col-6.q-pr-sm
.row.justify-between.q-col-gutter-x-md
.col-12.col-md-6
.row.items-center.q-col-gutter-xs
label.h-label DAO name
//- q-icon(name="fas fa-info-circle" size="16px" color="body")
Expand All @@ -44,7 +44,7 @@ widget(title='General' titleImage='/svg/file-checkmark.svg' :bar='true').q-pa-no
v-model='form.title'
)
q-tooltip(:content-style="{ 'font-size': '1em' }" anchor="top middle" self="bottom middle" v-if="!isAdmin") Only DAO admins can change the settings
.col-6.q-pl-sm
.col-12.col-md-6
.row.items-center.q-col-gutter-xs
label.h-label Custom URL
//- q-icon(name="fas fa-info-circle" size="16px" color="body")
Expand All @@ -66,8 +66,8 @@ widget(title='General' titleImage='/svg/file-checkmark.svg' :bar='true').q-pa-no
)
q-tooltip(:content-style="{ 'font-size': '1em' }" anchor="top middle" self="bottom middle" v-if="!isAdmin") Only DAO admins can change the settings

.row.justify-between.q-mt-sm
.col-6.q-pr-sm
.row.justify-between.q-mt-sm.q-col-gutter-x-md
.col-12.col-md-6
.row.items-center.q-col-gutter-xs
label.h-label Social chat
//- q-icon(name="fas fa-info-circle" size="16px" color="body")
Expand All @@ -86,7 +86,7 @@ widget(title='General' titleImage='/svg/file-checkmark.svg' :bar='true').q-pa-no
v-model='form.socialChat'
)
q-tooltip(:content-style="{ 'font-size': '1em' }" anchor="top middle" self="bottom middle" v-if="!isAdmin") Only DAO admins can change the settings
.col-3.q-pl-sm
.col-12.col-md-3
.row.items-center.q-col-gutter-xs
label.h-label Link to documentation
q-input.q-my-sm(
Expand All @@ -103,7 +103,7 @@ widget(title='General' titleImage='/svg/file-checkmark.svg' :bar='true').q-pa-no
v-model='form.documentationURL'
)
q-tooltip(:content-style="{ 'font-size': '1em' }" anchor="top middle" self="bottom middle" v-if="!isAdmin") Only DAO admins can change the settings
.col-3.q-pl-sm
.col-12.col-md-3
.row.items-center.q-col-gutter-xs
label.h-label Button text
q-input.q-my-sm(
Expand All @@ -121,8 +121,8 @@ widget(title='General' titleImage='/svg/file-checkmark.svg' :bar='true').q-pa-no
)
q-tooltip(:content-style="{ 'font-size': '1em' }" anchor="top middle" self="bottom middle" v-if="!isAdmin") Only DAO admins can change the settings

.row.justify-between.q-mt-xl
.col-6.q-pr-sm
.row.justify-between.q-mt-xl.q-col-gutter-x-md
.col-12.col-md-6
.row.items-center.q-col-gutter-xs
label.h-label Proposals creation
//- q-icon(name="fas fa-info-circle" size="16px" color="body")
Expand All @@ -132,18 +132,18 @@ widget(title='General' titleImage='/svg/file-checkmark.svg' :bar='true').q-pa-no
q-toggle(:disable="!isAdmin" color="primary" keep-color v-model="form.proposalsCreationEnabled")
q-tooltip(:content-style="{ 'font-size': '1em' }" anchor="top middle" self="bottom middle" v-if="!isAdmin") Only DAO admins can change the settings

.col-6.q-pl-sm
.col-12.col-md-6
.row.items-center.q-col-gutter-xs
label.h-label Members application
//- q-icon(name="fas fa-info-circle" size="16px" color="body")
//- q-tooltip(:content-style="{ 'font-size': '1em' }" anchor="top middle" self="bottom middle") Add a link to your DAO documentation here. Could be your website or a wiki where users can learn more about your DAO. The link will be added to the Banner on the Organization Page.
.row.items-center.justify-between.q-mt-xs
.row.items-center.justify-between.q-mt-xs(:class="{'q-mt-xl': !$q.screen.gt.sm}")
label.text-xs Activate or deactivate member applications.
q-toggle(:disable="!isAdmin" color="primary" keep-color v-model="form.membersApplicationEnabled")
q-tooltip(:content-style="{ 'font-size': '1em' }" anchor="top middle" self="bottom middle" v-if="!isAdmin") Only DAO admins can change the settings

.row.justify-between.q-mt-xl
.col-6.q-pr-sm
.row.justify-between.q-mt-xl.q-col-gutter-x-md
.col-12.col-md-6
.row.items-center.q-col-gutter-xs
label.h-label Removable banners
//- q-icon(name="fas fa-info-circle" size="16px" color="body")
Expand Down
6 changes: 3 additions & 3 deletions src/components/dao/settings-plan.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,7 @@ export default {
<template lang="pug">
.page-plan(v-if="!loading")
downgrade-pop-up(:value="isDowngradePopUpOpen" @activatePlan="activatePlan" @hidePopUp="state = 'BILLING'")
chip-plan.q-my-sm(v-if="!$q.screen.gt.sm")
chip-plan.q-my-sm(v-if="!$q.screen.gt.sm" :plan="selectedDaoPlan.name" :daysLeft="selectedDaoPlan.daysLeft" :graceDaysLeft="selectedDaoPlan.graceDaysLeft" :color="selectedDaoPlan.isExpiring ? 'negative' : 'secondary'")
widget(title="Select your plan").q-pa-none.full-width
//- p.text-sm.text-h-gray.leading-loose.q-mt-md Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
.absolute.z-50(:style="{'top': '-60px', 'right': '-30px'}" v-if="$q.screen.gt.sm")
Expand Down Expand Up @@ -293,7 +293,7 @@ export default {
.col.full-width(v-for="token in balances" :key="token.tokenName")
treasury-token(v-bind="token" :isError="!hasEnoughTokens")
.col-12.col-sm-12.col-md-12.col-lg-6.row.justify-end
nav.col-md-12.col-lg-8.q-my-xl.row.q-col-gutter-x-sm(:class="{ 'q-col-gutter-y-sm': !$q.screen.gt.md}")
nav.col-12.col-md-12.col-lg-8.q-my-xl.row.q-col-gutter-x-sm(:class="{ 'q-col-gutter-y-sm': !$q.screen.gt.md}")
.col-12.col-sm-12.col-md-12.col-lg-6
q-btn.rounded-border.text-bold.q-mr-xs.full-width.full-height(
:disable="!canActivate || !hasEnoughTokens"
Expand All @@ -318,7 +318,7 @@ export default {
widget(title="Billing history").full-width.q-mt-md
.calendar-container.q-mt-lg.row.q-gutter-sm
template(v-for="(bill, index) in BILLING_HISTORY")
billing-history-card(v-bind="bill" :key="bill.id")
billing-history-card(v-bind="bill" :key="bill.id" :class="{'full-width': !$q.screen.gt.sm}")

</template>

Expand Down
Loading