From ab3965887ae3a0510519f69e720ed452963a91f6 Mon Sep 17 00:00:00 2001 From: spvijayanand Date: Tue, 25 Jul 2023 10:27:27 +0530 Subject: [PATCH 1/6] *** NBtn Components added --- src/assets/ic_add.png | Bin 0 -> 260 bytes src/assets/ic_remove.png | Bin 0 -> 393 bytes src/base/variable.less | 4 +- src/components/NBtn/NBtn.less | 63 ++++++++++----- src/components/NBtn/NBtn.vue | 22 +++--- src/components/NBtn/NBtnContent.vue | 22 +----- src/pages/demo.vue | 118 ++++++++++++++++------------ 7 files changed, 122 insertions(+), 107 deletions(-) create mode 100644 src/assets/ic_add.png create mode 100644 src/assets/ic_remove.png diff --git a/src/assets/ic_add.png b/src/assets/ic_add.png new file mode 100644 index 0000000000000000000000000000000000000000..7542822d992cb4f8ff8b62cde67d01080b3fac5a GIT binary patch literal 260 zcmeAS@N?(olHy`uVBq!ia0vp^fkcm7srqa#;X%;`3@QIw9b!JboH@xlDyeu z!Le7${GpuAT!HB7mYk3*smTkS7=JBa<^0=o-n_3jH#Kf`a9(KUw*Q9cle;TV%}UMm-p3THIjo=);T=p+Z=B*mDlr7`hPtDnm{r-UW| DZBkvF literal 0 HcmV?d00001 diff --git a/src/assets/ic_remove.png b/src/assets/ic_remove.png new file mode 100644 index 0000000000000000000000000000000000000000..a6eec4f2bcf9bc9044482ab52db07af99fea040c GIT binary patch literal 393 zcmV;40e1e0P)y zN?^g4O!DUMdw<`wZ-6Z!S2*r>8w#>3B#z2@mg4;b>Ez{RqRYB)4GyKc7gC(A%!_5T z1F5ENzCx8IbJ}?x-`q6Yp0vrfj*$+sg2feQl7{;DNLECh9m zx^ import NButtonContent from './NBtnContent'; +//import strokeBtn from './../../directives/NStrokeBtn.js' +//import flatBtn from './../../directives/NFlatBtn.js' export default { name: 'nitrozen-button', components: { NButtonContent }, + /* directives: { + strokeBtn, + flatBtn + }, */ props: { href: { type: String, @@ -45,14 +51,6 @@ export default { }, state:{ type:String - }, - flat: { - type: Boolean, - default: false - }, - stroke: { - type: Boolean, - default: false } }, render(createElement) { @@ -61,9 +59,7 @@ export default { showProgress: this.showProgress, icon: this.icon, size:this.size, - iconColor:this.iconColor, - flat: this.flat, - stroke: this.stroke, + iconColor:this.iconColor } }, this.$slots.default) @@ -77,7 +73,9 @@ export default { 'n-button-large': this.size == 'large', 'n-button-mid': this.size == 'medium', 'n-button-small': this.size == 'small', - 'n-button-focused': this.focused + 'n-button-focused': this.focused, + 'n-button-add': this.theme == 'add', + 'n-button-delete': this.theme == 'delete' }], attrs: { href: this.href, diff --git a/src/components/NBtn/NBtnContent.vue b/src/components/NBtn/NBtnContent.vue index 8038d000..cb72fc8c 100644 --- a/src/components/NBtn/NBtnContent.vue +++ b/src/components/NBtn/NBtnContent.vue @@ -1,5 +1,5 @@ - +
====================================================================
+
NMS Buttons
+ +
+ Add + Renew +
+
+ +
+ + From 280fa55efa8bedaca2b9a9e203f182e2abdf013f Mon Sep 17 00:00:00 2001 From: spvijayanand Date: Tue, 25 Jul 2023 10:38:08 +0530 Subject: [PATCH 2/6] Revert "*** NBtn Components added" This reverts commit ab3965887ae3a0510519f69e720ed452963a91f6. --- src/assets/ic_add.png | Bin 260 -> 0 bytes src/assets/ic_remove.png | Bin 393 -> 0 bytes src/base/variable.less | 4 +- src/components/NBtn/NBtn.less | 63 +++++---------- src/components/NBtn/NBtn.vue | 22 +++--- src/components/NBtn/NBtnContent.vue | 22 +++++- src/pages/demo.vue | 118 ++++++++++++---------------- 7 files changed, 107 insertions(+), 122 deletions(-) delete mode 100644 src/assets/ic_add.png delete mode 100644 src/assets/ic_remove.png diff --git a/src/assets/ic_add.png b/src/assets/ic_add.png deleted file mode 100644 index 7542822d992cb4f8ff8b62cde67d01080b3fac5a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 260 zcmeAS@N?(olHy`uVBq!ia0vp^fkcm7srqa#;X%;`3@QIw9b!JboH@xlDyeu z!Le7${GpuAT!HB7mYk3*smTkS7=JBa<^0=o-n_3jH#Kf`a9(KUw*Q9cle;TV%}UMm-p3THIjo=);T=p+Z=B*mDlr7`hPtDnm{r-UW| DZBkvF diff --git a/src/assets/ic_remove.png b/src/assets/ic_remove.png deleted file mode 100644 index a6eec4f2bcf9bc9044482ab52db07af99fea040c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 393 zcmV;40e1e0P)y zN?^g4O!DUMdw<`wZ-6Z!S2*r>8w#>3B#z2@mg4;b>Ez{RqRYB)4GyKc7gC(A%!_5T z1F5ENzCx8IbJ}?x-`q6Yp0vrfj*$+sg2feQl7{;DNLECh9m zx^ import NButtonContent from './NBtnContent'; -//import strokeBtn from './../../directives/NStrokeBtn.js' -//import flatBtn from './../../directives/NFlatBtn.js' export default { name: 'nitrozen-button', components: { NButtonContent }, - /* directives: { - strokeBtn, - flatBtn - }, */ props: { href: { type: String, @@ -51,6 +45,14 @@ export default { }, state:{ type:String + }, + flat: { + type: Boolean, + default: false + }, + stroke: { + type: Boolean, + default: false } }, render(createElement) { @@ -59,7 +61,9 @@ export default { showProgress: this.showProgress, icon: this.icon, size:this.size, - iconColor:this.iconColor + iconColor:this.iconColor, + flat: this.flat, + stroke: this.stroke, } }, this.$slots.default) @@ -73,9 +77,7 @@ export default { 'n-button-large': this.size == 'large', 'n-button-mid': this.size == 'medium', 'n-button-small': this.size == 'small', - 'n-button-focused': this.focused, - 'n-button-add': this.theme == 'add', - 'n-button-delete': this.theme == 'delete' + 'n-button-focused': this.focused }], attrs: { href: this.href, diff --git a/src/components/NBtn/NBtnContent.vue b/src/components/NBtn/NBtnContent.vue index cb72fc8c..8038d000 100644 --- a/src/components/NBtn/NBtnContent.vue +++ b/src/components/NBtn/NBtnContent.vue @@ -1,5 +1,5 @@ -
====================================================================
-
NMS Buttons
- -
- Add - Renew -
-
- -
- - + From 26b65b9ba6cafa869612aa2b562b4beaabd2cc1c Mon Sep 17 00:00:00 2001 From: spvijayanand Date: Tue, 25 Jul 2023 14:08:03 +0530 Subject: [PATCH 3/6] *** NBtn component added --- src/assets/ic_add.png | Bin 0 -> 260 bytes src/assets/ic_remove.png | Bin 0 -> 393 bytes src/base/variable.less | 5 +- src/components/NBtn/NBtn.less | 46 +++++++- src/components/NBtn/NBtn.vue | 8 +- src/components/NBtn/NBtnContent.vue | 167 ++++++++++++---------------- src/pages/demo.vue | 90 +++++++++------ 7 files changed, 181 insertions(+), 135 deletions(-) create mode 100644 src/assets/ic_add.png create mode 100644 src/assets/ic_remove.png diff --git a/src/assets/ic_add.png b/src/assets/ic_add.png new file mode 100644 index 0000000000000000000000000000000000000000..7542822d992cb4f8ff8b62cde67d01080b3fac5a GIT binary patch literal 260 zcmeAS@N?(olHy`uVBq!ia0vp^fkcm7srqa#;X%;`3@QIw9b!JboH@xlDyeu z!Le7${GpuAT!HB7mYk3*smTkS7=JBa<^0=o-n_3jH#Kf`a9(KUw*Q9cle;TV%}UMm-p3THIjo=);T=p+Z=B*mDlr7`hPtDnm{r-UW| DZBkvF literal 0 HcmV?d00001 diff --git a/src/assets/ic_remove.png b/src/assets/ic_remove.png new file mode 100644 index 0000000000000000000000000000000000000000..a6eec4f2bcf9bc9044482ab52db07af99fea040c GIT binary patch literal 393 zcmV;40e1e0P)y zN?^g4O!DUMdw<`wZ-6Z!S2*r>8w#>3B#z2@mg4;b>Ez{RqRYB)4GyKc7gC(A%!_5T z1F5ENzCx8IbJ}?x-`q6Yp0vrfj*$+sg2feQl7{;DNLECh9m zx^ -
- - - - - - + + \ No newline at end of file diff --git a/src/pages/demo.vue b/src/pages/demo.vue index b6264daf..ca82b729 100644 --- a/src/pages/demo.vue +++ b/src/pages/demo.vue @@ -78,7 +78,7 @@ @stepperClicked="stepperClicked" >
- Next
@@ -94,17 +94,17 @@
- Primary Flat {{ numberOfClick }}
- Hover Flat + Hover Flat
- - + Focused Flat - Disabled Flat
@@ -125,19 +125,19 @@
- Rounded + Rounded
- Hover + Hover
- Focused - Disabled
@@ -158,31 +158,31 @@
- Primary Small Flat - Primary Medium Flat - Primary Large Flat
- Hover Flat
- Focused Flat - Disabled Flat
@@ -207,29 +207,29 @@
- Rounded
- Hover
Disabled
- Save + Save Cancel
- Save + Save Cancel
@@ -280,10 +280,10 @@
- Large Button - Large Button
@@ -297,16 +297,16 @@ Focused - +
- Facebook Bag
- Alert Dialog - Confirmation Dialog - Select Dialog - Choose Dialog
@@ -802,6 +802,28 @@
+
====================================================================
+
NMS Buttons
+ +
+ Add + Renew +
+
+ +
+
+ +
+
From 9fca621d7a3b43d2de7a20cd20242d6f6d9cef50 Mon Sep 17 00:00:00 2001 From: spvijayanand Date: Wed, 26 Jul 2023 13:08:58 +0530 Subject: [PATCH 4/6] *** jds dropdown component added --- src/base/variable.less | 2 +- src/components/NCode/NCode.less | 12 ++++++++---- src/components/NCode/NCode.vue | 2 +- src/components/NDropdown/NDropdown.less | 15 ++++++++++++--- src/components/NDropdown/NDropdown.vue | 2 +- src/main.js | 2 +- src/pages/demo.vue | 23 ++++++++++++++--------- src/utils/svgs.js | 19 ++++++++----------- 8 files changed, 46 insertions(+), 31 deletions(-) diff --git a/src/base/variable.less b/src/base/variable.less index 1dee664f..9d5123ad 100644 --- a/src/base/variable.less +++ b/src/base/variable.less @@ -85,7 +85,7 @@ @LabelColor: #9b9b9b; @BackgroundColor: #f9f9f9; @PlaceholderColor: #a4a4a4; -@HoverColor: #f3f3f3; +@HoverColor: #1ECCB0; @WarningColor: #f5a300; @InfoColor: #605ae0; @SuccessColor: #0a5f23; diff --git a/src/components/NCode/NCode.less b/src/components/NCode/NCode.less index 5e19fda0..6f5c2bdb 100644 --- a/src/components/NCode/NCode.less +++ b/src/components/NCode/NCode.less @@ -18,10 +18,14 @@ -webkit-tap-highlight-color: transparent; outline: none; text-align: center; - border-radius: 1.6rem; - height: 4.8rem; - width: 4.8rem; - + + + display: flex; + flex-direction: column; + height: 2px; + width: 100%; + background-color: #000; + border-radius: 2px; &:focus, &:hover { border-color: @ColorPrimary60; diff --git a/src/components/NCode/NCode.vue b/src/components/NCode/NCode.vue index a1348b21..ff6e2304 100644 --- a/src/components/NCode/NCode.vue +++ b/src/components/NCode/NCode.vue @@ -61,7 +61,7 @@ export default { props: { fields: { type: Number, - default: 4, + default: 6, }, label: { type: String, diff --git a/src/components/NDropdown/NDropdown.less b/src/components/NDropdown/NDropdown.less index 7d0d0b7d..29e889bb 100644 --- a/src/components/NDropdown/NDropdown.less +++ b/src/components/NDropdown/NDropdown.less @@ -12,6 +12,8 @@ position: relative; user-select: none; width: 100%; + border: none; + outline: none; } .nitrozen-select { box-sizing: border-box; @@ -22,14 +24,17 @@ position: relative; display: flex; flex-direction: column; + border:none; + outline:none; } + .nitrozen-select:focus-within { border-color: @SecondaryColor; } .nitrozen-select__trigger { color: @TypographyPrimaryColor; - border-radius: 3px; - font-size: 14px; + // border-radius: 3px; + font-size: 16px; line-height: 22px; min-height: 22px; padding: 8px 14px; @@ -39,6 +44,10 @@ justify-content: space-between; background: #ffffff; cursor: pointer; + border-bottom: 2px solid @ColorPrimary80; + font-weight: 500; + text-transform: none; + letter-spacing: -0.08px; span { overflow: hidden; white-space: nowrap; @@ -85,7 +94,7 @@ .nitrozen-option { position: relative; display: block; - font-size: 14px; + font-size: 16px; color: @TypographyPrimaryColor; line-height: 22px; cursor: pointer; diff --git a/src/components/NDropdown/NDropdown.vue b/src/components/NDropdown/NDropdown.vue index 108ec455..6ba56d03 100644 --- a/src/components/NDropdown/NDropdown.vue +++ b/src/components/NDropdown/NDropdown.vue @@ -282,7 +282,7 @@ export default { if (this.selected && this.selected.text) { return this.selected.text; } else if (this.label) { - return this.placeholder || `Choose ${this.label}`; + return this.placeholder || `${this.label}`; } return ""; } else { diff --git a/src/main.js b/src/main.js index 7cd09220..48f3a61b 100644 --- a/src/main.js +++ b/src/main.js @@ -2,7 +2,7 @@ import Vue from 'vue' // import App from './pages/custom-form-demo.vue' import App from './pages/demo.vue' - +//import App from './components/NCode/index' import NitrozenVuePlugin from './setup'; Vue.use(NitrozenVuePlugin); diff --git a/src/pages/demo.vue b/src/pages/demo.vue index ca82b729..90b7f69a 100644 --- a/src/pages/demo.vue +++ b/src/pages/demo.vue @@ -813,18 +813,26 @@ >
- + +
+ +
+ +
- + + + + \ No newline at end of file diff --git a/src/components/NProgressBar/index.js b/src/components/NProgressBar/index.js new file mode 100644 index 00000000..8f8cb001 --- /dev/null +++ b/src/components/NProgressBar/index.js @@ -0,0 +1,3 @@ +import NProgressBar from './NProgressBar.vue'; + +export default NProgressBar; \ No newline at end of file diff --git a/src/components/NSpinner/NSpinner.less b/src/components/NSpinner/NSpinner.less new file mode 100644 index 00000000..f643ffab --- /dev/null +++ b/src/components/NSpinner/NSpinner.less @@ -0,0 +1,36 @@ +@import './../../base/base.less'; + + .custom-spinner { + display: flex; + justify-content: center; + align-items: center; + height: 100px; + stroke-dasharray: 100px; + stroke-dashoffset: 0; + transform: rotate(-90deg); + } + + .spinner { + border: 8px solid #f3f3f3; + border-top: 8px solid @ColorPrimary60; + border-left: 8px solid @ColorPrimary60; + border-radius: 50%; + animation: spin 2s linear infinite; + } + + .nitrozen-spinner-small { + width: 20px; + height:20px; + } + .nitrozen-spinner-medium { + width: 40px; + height:40px; + } + .nitrozen-spinner-large { + width: 60px; + height:60px; + } + @keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } \ No newline at end of file diff --git a/src/components/NSpinner/NSpinner.vue b/src/components/NSpinner/NSpinner.vue new file mode 100644 index 00000000..da58678e --- /dev/null +++ b/src/components/NSpinner/NSpinner.vue @@ -0,0 +1,42 @@ + + + + + \ No newline at end of file diff --git a/src/components/NSpinner/index.js b/src/components/NSpinner/index.js new file mode 100644 index 00000000..692eb54e --- /dev/null +++ b/src/components/NSpinner/index.js @@ -0,0 +1,3 @@ +import NSpinner from './NSpinner.vue'; + +export default NSpinner; \ No newline at end of file diff --git a/src/components/index.js b/src/components/index.js index c85b82f3..9877d49e 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -18,6 +18,8 @@ import NitrozenStepper from './NStepper'; import NitrozenToggleBtn from './NToggleBtn'; import NitrozenTooltip from './NTooltip'; import NitrozenCustomForm from './NCustomForm'; +import NProgressBar from './NProgressBar'; +import NSpinner from './NSpinner'; export { NitrozenAutocomplete, @@ -40,4 +42,6 @@ export { NitrozenToggleBtn, NitrozenTooltip, NitrozenCustomForm, + NProgressBar, + NSpinner, } diff --git a/src/pages/demo.vue b/src/pages/demo.vue index 90b7f69a..9ead27f2 100644 --- a/src/pages/demo.vue +++ b/src/pages/demo.vue @@ -829,7 +829,21 @@
- + + +
+ +
+ Small: + Medium: + Large: