From 85520b99e06ecfc189cf8c4d186e29e7865635a2 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Thu, 5 Aug 2021 19:31:17 +0400 Subject: [PATCH 1/5] Fix dialog issues --- src/store/LibraryTheme.ts | 1 + src/styles/neumorphism/dialog.scss | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/store/LibraryTheme.ts b/src/store/LibraryTheme.ts index 725ecbc9..3970dc38 100644 --- a/src/store/LibraryTheme.ts +++ b/src/store/LibraryTheme.ts @@ -68,6 +68,7 @@ const actions = { }, setDesignSystem ({ commit }, designSystem: DesignSystem) { commit(types.SET_DESIGN_SYSTEM, designSystem) + document.documentElement.setAttribute('design-system', designSystem) } } diff --git a/src/styles/neumorphism/dialog.scss b/src/styles/neumorphism/dialog.scss index 95bb9ce3..48bd27b2 100644 --- a/src/styles/neumorphism/dialog.scss +++ b/src/styles/neumorphism/dialog.scss @@ -3,7 +3,7 @@ box-shadow: var(--s-shadow-dialog); } } -.v-modal { +[design-system="neumorphic"] .v-modal { opacity: 0.75; backdrop-filter: blur(4px); // TODO: Fix FF behaviour From 5a007daade6904df102cf7852382bdc788b4c03f Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Thu, 5 Aug 2021 19:33:58 +0400 Subject: [PATCH 2/5] Update Theming.stories.ts --- src/stories/Intro/Theming.stories.ts | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/stories/Intro/Theming.stories.ts b/src/stories/Intro/Theming.stories.ts index d5ea5e57..399e78ca 100644 --- a/src/stories/Intro/Theming.stories.ts +++ b/src/stories/Intro/Theming.stories.ts @@ -3,7 +3,7 @@ import { withKnobs } from '@storybook/addon-knobs' import Theme from '../../types/Theme' import DesignSystem from '../../types/DesignSystem' import { SButton, SDivider } from '../../components' -import { setTheme, setDesignSystem } from '../../utils' +import { switchTheme, setDesignSystem } from '../../utils' import mainStore from '../../store' export default { @@ -18,25 +18,23 @@ export const configurable = () => ({

This feature has Work In Progress status

Theme:

- {{ theme }} + {{ theme }} {{ designSystem || 'default' }}

You can check all components, these theme settings are applied to the whole library

`, computed: { - theme: () => mainStore?.getters?.libraryTheme, - designSystem: () => mainStore?.getters?.libraryDesignSystem + theme: () => mainStore?.getters?.libraryTheme as Theme, + designSystem: () => mainStore?.getters?.libraryDesignSystem as DesignSystem }, methods: { - handleThemeChange: (theme: Theme) => { - const newTheme = theme === Theme.LIGHT ? Theme.DARK : Theme.LIGHT - setTheme(newTheme) + handleThemeChange: () => { + switchTheme() }, handleDesignSystemChange: (designSystem: DesignSystem) => { const newDesignSystem = designSystem === DesignSystem.DEFAULT ? DesignSystem.NEUMORPHIC : DesignSystem.DEFAULT setDesignSystem(newDesignSystem) - document.documentElement.setAttribute('design-system', newDesignSystem) } } }) From 71330626ae779b5b3138ad1fcc0f3c6a8c9506d6 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Thu, 5 Aug 2021 19:34:20 +0400 Subject: [PATCH 3/5] Add stories for different messages --- src/stories/Messages.stories.ts | 41 +++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 src/stories/Messages.stories.ts diff --git a/src/stories/Messages.stories.ts b/src/stories/Messages.stories.ts new file mode 100644 index 00000000..6203dbc4 --- /dev/null +++ b/src/stories/Messages.stories.ts @@ -0,0 +1,41 @@ +import { withKnobs } from '@storybook/addon-knobs' + +import Vue from 'vue' + +import { SButton, SDivider } from '../components' + +export default { + title: 'Design System/Components/Messages & Notifications', + decorators: [withKnobs], + excludeStories: /.*Data$/ +} + +export const configurable = () => ({ + components: { SButton, SDivider }, + template: `
+

Alert messages

+
this.$alert('Message', { title: 'Title', type })
+ +
+ {{ type || 'default' }} +
+ +

Notifications

+
this.$notify({ message: 'Message', title: 'Title', type })
+ +
+ {{ type || 'default' }} +
+
`, + data: () => ({ + types: ['error', 'warning', 'success', 'info', ''] + }), + methods: { + handleOpenAlert: (type: string) => { + Vue.prototype.$alert(`Some ${type} message`, { title: 'Title', type }) + }, + handleOpenNotification: (type: string) => { + Vue.prototype.$notify({ message: `Some ${type} message`, title: 'Title', type }) + } + } +}) From 83cad75511ce50b412333e9dace7dfc9664f55ac Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Thu, 5 Aug 2021 19:34:46 +0400 Subject: [PATCH 4/5] Fix dialog & messagebox styles --- src/styles/common.scss | 31 +++++++++++++++++++++++++++---- src/styles/dialog.scss | 10 +++++++++- src/styles/neumorphism/index.scss | 18 +++++++++--------- 3 files changed, 45 insertions(+), 14 deletions(-) diff --git a/src/styles/common.scss b/src/styles/common.scss index 807b6f28..c42f2bc0 100644 --- a/src/styles/common.scss +++ b/src/styles/common.scss @@ -13,11 +13,11 @@ html { margin: 0; } +/* Typography */ .d1 { font-size: var(--s-heading0-font-size); } -/* Typography */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .h7, .d2, @@ -148,6 +148,10 @@ h6, line-height: var(--s-line-height-big); } +.s-code { + font-family: var(--s-font-family-mono); +} + .s-flex { display: flex; } @@ -248,11 +252,30 @@ button > span { } .el-message-box { + background-color: var(--s-color-base-on-accent); + border-radius: var(--s-border-radius-small); + border: none; + [design-system="neumorphic"] & { + box-shadow: var(--s-shadow-dialog); + } & & { &__header { .el-message-box__title { color: var(--s-color-base-content-primary); font-size: var(--s-heading5-font-size); + font-feature-settings: var(--s-font-feature-settings-heading); + font-weight: 700; + } + } + &__content { + color: var(--s-color-base-content-primary); + } + &__close { + color: var(--s-color-base-content-secondary); + } + &__headerbtn:focus, &__headerbtn:hover { + .el-message-box__close { + color: var(--s-color-theme-accent); } } &__btns { @@ -266,9 +289,9 @@ button > span { border-color: var(--s-color-theme-accent); } &.el-button--primary { - &:hover, &:active, &:focus { - color: var(--s-color-base-on-accent); - } + background-color: var(--s-color-theme-accent); + border-color: var(--s-color-theme-accent); + color: var(--s-color-base-on-accent); &:hover { background-color: var(--s-color-theme-accent-hover); border-color: var(--s-color-theme-accent-hover); diff --git a/src/styles/dialog.scss b/src/styles/dialog.scss index 8e33d020..73598ec7 100644 --- a/src/styles/dialog.scss +++ b/src/styles/dialog.scss @@ -24,7 +24,7 @@ } & & { &__header, &__title { - @include font-weight(700, true); + font-weight: 700; } &__title { font-size: var(--s-heading5-font-size); @@ -34,6 +34,14 @@ &__body { color: var(--s-color-base-content-primary); } + &__close { + color: var(--s-color-base-content-secondary); + } + &__headerbtn:focus, &__headerbtn:hover { + .el-dialog__close { + color: var(--s-color-theme-accent); + } + } } > * { word-break: break-word; diff --git a/src/styles/neumorphism/index.scss b/src/styles/neumorphism/index.scss index 66e411df..54e77027 100644 --- a/src/styles/neumorphism/index.scss +++ b/src/styles/neumorphism/index.scss @@ -1,9 +1,9 @@ -@import "./button.scss"; -@import "./input.scss"; -@import "./card.scss"; -@import "./collapse.scss"; -@import "./tabs.scss"; -@import "./radio.scss"; -@import "./switch.scss"; -@import "./tooltip.scss"; -@import "./dialog.scss"; +@import "./button"; +@import "./input"; +@import "./card"; +@import "./collapse"; +@import "./tabs"; +@import "./radio"; +@import "./switch"; +@import "./tooltip"; +@import "./dialog"; From 7ff390f1c8d7303b72ea3d9357ebf8ad483835a2 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Thu, 5 Aug 2021 19:35:10 +0400 Subject: [PATCH 5/5] Update version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1317ef4c..c5fcac81 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@soramitsu/soramitsu-js-ui", - "version": "1.0.12", + "version": "1.0.13", "private": false, "publishConfig": { "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"