matt/opnform-host-nginx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

E45fd new UI form editor (#17)

Browse Source 
* New UI - Form Editor

* edit & create save form changes

* form editor changes

* form editor changes

* last updated human readable

* change nt-blue to blue for icon

* change icons color if block collapse open/close

* Working on form editor

* More polishing

* Finished working on the new form editor design

Co-authored-by: Chirag Chhatrala <chirag@notionforms.io>
Co-authored-by: Julien Nahum <jhumanj@MacBook-Pro-de-Julien.local>
This commit is contained in:
Julien Nahum
2022-10-26 16:44:47 +02:00
committed by GitHub
parent 393c41eab7
commit 42955ab9d0
33 changed files with 1469 additions and 1531 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
resources/js/components/common/Button.vue
View File

@@ -87,12 +87,60 @@ export default {
}
} else if (this.color === 'outline-blue') {
return {
main: 'bg-transparent border-2 border-blue-600',
main: 'bg-transparent border border-blue-600',
hover: 'hover:bg-blue-600',
ring: 'focus:ring-blue-500',
'ring-offset': 'focus:ring-offset-blue-200',
text: 'text-blue-600 hover:text-white',
}
} else if (this.color === 'red') {
return {
main: 'bg-red-600',
hover: 'hover:bg-red-700',
ring: 'focus:ring-red-500',
'ring-offset': 'focus:ring-offset-red-200',
text: 'text-white',
}
} else if (this.color === 'gray') {
return {
main: 'bg-gray-600',
hover: 'hover:bg-gray-700',
ring: 'focus:ring-gray-500',
'ring-offset': 'focus:ring-offset-gray-200',
text: 'text-white',
}
} else if (this.color === 'light-gray') {
return {
main: 'bg-gray-50 border border-gray-300',
hover: 'hover:bg-gray-100',
ring: 'focus:ring-gray-500',
'ring-offset': 'focus:ring-offset-gray-300',
text: 'text-gray-700',
}
} else if (this.color === 'green') {
return {
main: 'bg-green-600',
hover: 'hover:bg-green-700',
ring: 'focus:ring-green-500',
'ring-offset': 'focus:ring-offset-green-200',
text: 'text-white',
}
} else if (this.color === 'yellow') {
return {
main: 'bg-yellow-600',
hover: 'hover:bg-yellow-700',
ring: 'focus:ring-yellow-500',
'ring-offset': 'focus:ring-offset-yellow-200',
text: 'text-white',
}
} else if (this.color === 'white') {
return {
main: 'bg-transparent border border-gray-300',
hover: 'hover:bg-gray-200',
ring: 'focus:ring-white-500',
'ring-offset': 'focus:ring-offset-white-200',
text: 'text-gray-700',
}
}
console.error('Unknown color')
},

5
resources/js/components/common/Collapse.vue
View File

@@ -5,8 +5,8 @@
<slot name="title" />
</div>
<div class="text-gray-400 hover:text-gray-600 absolute -right-2 -top-1 cursor-pointer p-2" @click="trigger">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition transform duration-500" :class="{'rotate-180':showContent}" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z" clip-rule="evenodd" />
<svg class="h-3 w-3 transition transform duration-500" :class="{'rotate-180':showContent}" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L7 7L13 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
@@ -34,6 +34,7 @@ export default {
methods: {
trigger () {
this.showContent = !this.showContent
this.$emit('click', this.showContent)
}
}
}