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.

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

PR for Milestone 1: Adding the page-color-scheme #17

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
20 changes: 20 additions & 0 deletions vue/configurator/src/components/Configurator.vue
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,25 @@
:key="widgetIndex"
>
<h1>{{ widget.name }} Options</h1>
<el-row>
<el-col :span="6">Widget Theme</el-col>
<el-col :span="12">
<el-select
v-if="widget.widgetTheme"
v-model="widget.widgetTheme.value"
class="m-2"
placeholder="None"
size="small"
>
<el-option
v-for="item in widget.widgetTheme.options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-col>
</el-row>
<el-row v-for="(prop, key) in widget.props" :key="key">
<el-col :span="6">{{ prop.name }}</el-col>
<el-col :span="12">
Expand Down Expand Up @@ -112,6 +131,7 @@
v-if="widget.dataWidget"
:id="`widget-${widgetIndex}`"
:data-widget="widget.dataWidget"
:class="widget.widgetTheme ? widget.widgetTheme.value : ''"
></div>
<!-- NOTE: don't load the other widgets since we're assuming mutation observer pattern -->
</div>
Expand Down
6 changes: 6 additions & 0 deletions vue/configurator/src/components/lib/WidgetProps.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@ interface WidgetPropOptions {
label: string;
}

interface WidgetThemeDefinition {
value: string;
options: WidgetPropOptions[];
}

Comment on lines +12 to +16
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this works -- was thinking since we have set values for the theme stuff (the scheme utility classes), we can be more explicit about what a theme is.

export interface WidgetPropDefinition {
name: string;
type: WidgetPropType;
Expand All @@ -23,6 +28,7 @@ export interface WidgetDefinition {
name: string;
props: { [key: string]: WidgetPropDefinition };
dataWidget?: string;
widgetTheme?: WidgetThemeDefinition;
javascript: string;
css: string;
}
19 changes: 19 additions & 0 deletions vue/configurator/src/views/ConnectView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,25 @@ export default class ConnectView extends Vue {
...Widgets.connect,
name: "Connect Widget",
dataWidget: "m-connect",
/* Schemed Utility class definitons for light/dark
https://docs.manifold.xyz/v/manifold-for-developers/resources/widgets/manifold-css-variables/scheme-utility-classes */
widgetTheme: {
value: "",
options: [
{
value: "manifold-scheme-dark",
label: "Dark",
},
{
value: "manifold-scheme-light",
label: "Light",
},
{
value: "",
label: "OS Preference",
},
],
},
props: {
"data-app-name": {
name: "App Name",
Expand Down
19 changes: 19 additions & 0 deletions vue/configurator/src/views/IdentityView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,25 @@ export default class IdentityView extends Vue {
...Widgets.identity,
name: "Wallet Identity Widget",
dataWidget: "m-wallet-identity",
/* Schemed Utility class definitons for light/dark
https://docs.manifold.xyz/v/manifold-for-developers/resources/widgets/manifold-css-variables/scheme-utility-classes */
widgetTheme: {
value: "",
options: [
{
value: "manifold-scheme-dark",
label: "Dark",
},
{
value: "manifold-scheme-light",
label: "Light",
},
{
value: "",
label: "OS Preference",
},
],
},
props: {
"data-wallet": {
name: "Wallet address -- required",
Expand Down
50 changes: 42 additions & 8 deletions vue/configurator/src/views/MarketplaceView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,25 @@ export default class MarketplaceView extends Vue {
...Widgets.connect,
name: "Connect Widget",
dataWidget: "m-connect",
/* Schemed Utility class definitons for light/dark
https://docs.manifold.xyz/v/manifold-for-developers/resources/widgets/manifold-css-variables/scheme-utility-classes */
widgetTheme: {
value: "",
options: [
{
value: "manifold-scheme-dark",
label: "Dark",
},
{
value: "manifold-scheme-light",
label: "Light",
},
{
value: "",
label: "OS Preference",
},
],
},
props: {
"data-delay-auth": {
name: "Delay Authentication",
Expand All @@ -83,6 +102,25 @@ export default class MarketplaceView extends Vue {
{
...Widgets.marketplace,
name: "Marketplace Widget",
/* Schemed Utility class definitons for light/dark
https://docs.manifold.xyz/v/manifold-for-developers/resources/widgets/manifold-css-variables/scheme-utility-classes */
widgetTheme: {
value: "",
options: [
{
value: "manifold-scheme-dark",
label: "Dark",
},
{
value: "manifold-scheme-light",
label: "Light",
},
{
value: "",
label: "OS Preference",
},
],
},
props: {
"data-widget": {
name: "Widget Type",
Expand Down Expand Up @@ -172,7 +210,7 @@ export default class MarketplaceView extends Vue {
right: 40px;
height: auto;
width: 180px;
border: 2px solid var(--manifold-color-connect--text);
border: 2px solid var(--manifold-color-connect--background);
border-radius: 30px;
background-color: transparent;
@media screen and (max-width: 520px) {
Expand All @@ -182,24 +220,20 @@ export default class MarketplaceView extends Vue {
width: 130px;
}
}
#m-connection .m-connection-wallet span {
color: var(--manifold-color-connect--text) !important;
}

#m-connection button {
display: block !important;
width: 100% !important;
height: 60px !important;
color: var(--manifold-color-connect--text) !important;
text-transform: uppercase !important;
font-size: 11px !important;
border-radius: 0 !important;
border: none !important;
background: var(--manifold-color-connect--background) !important;
transition: color 0.3s ease, border 0.3s ease, background 0.3s ease !important;
}
#m-connection button:hover {
background: var(--manifold-color-connect--hover) !important;
color: black !important;
background: var(--manifold-theme--color--primary) !important;
color: var(--manifold-theme--color--secondary) !important;
}
#m-connection div {
display: block !important;
Expand Down
19 changes: 19 additions & 0 deletions vue/configurator/src/views/RestrictedTokenView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,25 @@ export default class IdentityView extends Vue {
...Widgets.restrictedToken,
name: "Restricted Token Widget",
dataWidget: "m-restricted-token",
/* Schemed Utility class definitons for light/dark
https://docs.manifold.xyz/v/manifold-for-developers/resources/widgets/manifold-css-variables/scheme-utility-classes */
widgetTheme: {
value: "",
options: [
{
value: "manifold-scheme-dark",
label: "Dark",
},
{
value: "manifold-scheme-light",
label: "Light",
},
{
value: "",
label: "OS Preference",
},
],
},
props: {
"data-address": {
name: "Contract address -- required",
Expand Down