LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

chore: Enable prototyping classes for foundation (#5945)

Browse Source 
* chore: Enable prototyping classes for foundation

* Marcros css clean up

* Imports utilities separately

* Fix macro position

* Changes global margin

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
This commit is contained in:
Nithin David Thomas
2022-12-19 14:11:11 +05:30
committed by GitHub
parent 5541d9e00b
commit 022d0b0ea3
11 changed files with 108 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/dashboard/assets/scss/_foundation-settings.scss
View File

@@ -74,8 +74,8 @@ Tahoma,
Arial, Arial,
sans-serif; sans-serif;
$body-antialiased: true; $body-antialiased: true;
$global-margin: $space-one; $global-margin: $space-small;
$global-padding: $space-one; $global-padding: $space-micro;
$global-weight-normal: normal; $global-weight-normal: normal;
$global-weight-bold: bold; $global-weight-bold: bold;
$global-radius: 0; $global-radius: 0;

18
app/javascript/dashboard/assets/scss/_woot.scss
View File

@@ -20,6 +20,24 @@
@include foundation-everything($flex: true); @include foundation-everything($flex: true);
@include foundation-prototype-text-utilities;
@include foundation-prototype-text-transformation;
@include foundation-prototype-text-decoration;
@include foundation-prototype-font-styling;
@include foundation-prototype-list-style-type;
@include foundation-prototype-rounded;
@include foundation-prototype-bordered;
@include foundation-prototype-shadow;
@include foundation-prototype-separator;
@include foundation-prototype-overflow;
@include foundation-prototype-display;
@include foundation-prototype-position;
@include foundation-prototype-border-box;
@include foundation-prototype-border-none;
@include foundation-prototype-sizing;
@include foundation-prototype-spacing;
@import 'typography'; @import 'typography';
@import 'layout'; @import 'layout';
@import 'animations'; @import 'animations';

17
app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="macro"> <div class="macro button secondary clear ">
<span class="text-truncate">{{ macro.name }}</span> <span class="text-truncate">{{ macro.name }}</span>
<div class="macros-actions"> <div class="macros-actions">
<woot-button <woot-button
@@ -91,20 +91,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin: 0; line-height: var(--space-normal);
padding: var(--space-small);
font-weight: var(--font-weight-medium);
border-radius: var(--border-radius-normal);
color: var(--s-700);
&:hover {
background: var(--s-25);
color: var(--s-600);
}
&:focus {
border-color: var(--w-300);
}
.macros-actions { .macros-actions {
display: flex; display: flex;

26
app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="macro-preview"> <div class="macro-preview">
<p class="macro-title">{{ macro.name }}</p> <h6 class="text-block-title macro-title">{{ macro.name }}</h6>
<div v-for="(action, i) in resolvedMacro" :key="i" class="macro-block"> <div v-for="(action, i) in resolvedMacro" :key="i" class="macro-block">
<div v-if="i !== macro.actions.length - 1" class="macro-block-border" /> <div v-if="i !== macro.actions.length - 1" class="macro-block-border" />
<div class="macro-block-dot" /> <div class="macro-block-dot" />
@@ -69,37 +69,36 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.macro-preview { .macro-preview {
position: absolute; position: absolute;
max-height: calc(var(--space-giga) * 1.5); max-height: 36rem;
min-height: var(--space-jumbo); min-height: var(--space-jumbo);
width: calc(var(--space-giga) + var(--space-large)); width: 27.2rem;
border-radius: var(--border-radius-normal); border-radius: var(--border-radius-normal);
background-color: var(--white); background-color: var(--white);
box-shadow: var(--shadow-dropdown-pane); box-shadow: var(--shadow-dropdown-pane);
bottom: calc(var(--space-three) + var(--space-half)); bottom: var(--space-large);
right: calc(var(--space-three) + var(--space-half)); right: var(--space-large);
overflow-y: auto; overflow-y: auto;
padding: var(--space-slab); padding: var(--space-normal);
text-align: left;
.macro-title { .macro-title {
margin-bottom: var(--space-slab); margin-bottom: var(--space-normal);
color: var(--s-900);
font-weight: var(--font-weight-bold);
} }
.macro-block { .macro-block {
position: relative; position: relative;
padding-left: var(--space-slab); padding-left: var(--space-normal);
&:not(:last-child) { &:not(:last-child) {
padding-bottom: var(--space-slab); padding-bottom: var(--space-small);
} }
.macro-block-border { .macro-block-border {
top: 0.625rem; top: 0.625rem;
position: absolute; position: absolute;
bottom: var(--space-minus-half); bottom: var(--space-minus-smaller);
left: 0; left: 0;
width: 1px; width: 1px;
background-color: var(--s-100); background-color: var(--s-75);
} }
.macro-block-dot { .macro-block-dot {
@@ -117,6 +116,7 @@ export default {
.macro-action-name { .macro-action-name {
font-size: var(--font-size-mini); font-size: var(--font-size-mini);
color: var(--s-500); color: var(--s-500);
margin-bottom: var(--space-smaller);
} }
} }
</style> </style>

2
app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
View File

@@ -90,7 +90,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.sidebar-labels-wrap { .sidebar-labels-wrap {
margin-bottom: var(--space-normal); margin-bottom: 0;
} }
.contact-conversation--list { .contact-conversation--list {
width: 100%; width: 100%;

58
app/javascript/dashboard/routes/dashboard/settings/macros/ActionButton.vue
View File

@@ -1,58 +0,0 @@
<template>
<div>
<button
v-tooltip="tooltip"
class="macros__action-button"
:class="type"
@click="$emit('click')"
>
<fluent-icon :icon="icon" aria-hidden="true" />
</button>
</div>
</template>
<script>
export default {
props: {
type: {
type: String,
default: 'add',
},
tooltip: {
type: String,
default: '',
},
icon: {
type: String,
required: true,
},
},
};
</script>
<style scoped lang="scss">
.macros__action-button {
height: var(--space-three);
width: var(--space-three);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: var(--font-size-default);
border-radius: var(--border-radius-rounded);
position: relative;
margin-left: var(--space-one);
&.add {
background-color: var(--g-100);
color: var(--g-600);
}
&.delete {
position: absolute;
top: calc(var(--space-three) / -2);
right: calc(var(--space-three) / -2);
background-color: var(--r-100);
color: var(--r-600);
}
}
</style>

4
app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
View File

@@ -130,11 +130,11 @@ export default {
height: 100%; height: 100%;
} }
.macros-canvas { .macros-canvas {
background-image: radial-gradient(var(--s-100) 1.2px, transparent 0); background-image: radial-gradient(var(--s-75) 1.2px, transparent 0);
background-size: var(--space-normal) var(--space-normal); background-size: var(--space-normal) var(--space-normal);
height: 100%; height: 100%;
max-height: 100%; max-height: 100%;
padding: var(--space-normal) var(--space-three); padding: var(--space-normal) var(--space-larger);
max-height: 100vh; max-height: 100vh;
overflow-y: auto; overflow-y: auto;
} }

64
app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
View File

@@ -1,8 +1,10 @@
<template> <template>
<div class="macro__node-action-container"> <div class="macro__node-action-container">
<fluent-icon <woot-button
v-if="!singleNode" v-if="!singleNode"
size="20" size="small"
variant="clear"
color-scheme="secondary"
icon="navigation" icon="navigation"
class="macros__node-drag-handle" class="macros__node-drag-handle"
/> />
@@ -23,28 +25,27 @@
:initial-file-name="fileName" :initial-file-name="fileName"
@resetAction="$emit('resetAction')" @resetAction="$emit('resetAction')"
/> />
<macro-action-button
v-if="!singleNode"
icon="dismiss-circle"
class="macro__node macro__node-action-button-delete"
type="delete"
:tooltip="$t('MACROS.EDITOR.DELETE_BTN_TOOLTIP')"
@click="$emit('deleteNode')"
/>
</div> </div>
<woot-button
v-if="!singleNode"
v-tooltip="$t('MACROS.EDITOR.DELETE_BTN_TOOLTIP')"
icon="delete"
size="small"
variant="smooth"
color-scheme="alert"
@click="$emit('deleteNode')"
/>
</div> </div>
</template> </template>
<script> <script>
import ActionInput from 'dashboard/components/widgets/AutomationActionInput'; import ActionInput from 'dashboard/components/widgets/AutomationActionInput';
import MacroActionButton from './ActionButton.vue';
import macrosMixin from 'dashboard/mixins/macrosMixin'; import macrosMixin from 'dashboard/mixins/macrosMixin';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
export default { export default {
components: { components: {
ActionInput, ActionInput,
MacroActionButton,
}, },
mixins: [macrosMixin], mixins: [macrosMixin],
inject: ['macroActionTypes', '$v'], inject: ['macroActionTypes', '$v'],
@@ -104,30 +105,27 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.macros__node-drag-handle {
position: absolute;
left: var(--space-minus-medium);
cursor: move;
}
.macro__node-action-container { .macro__node-action-container {
position: relative; position: relative;
.macros__node-drag-handle { display: flex;
position: absolute; align-items: center;
left: var(--space-minus-medium); flex-basis: 100%;
top: var(--space-smaller); min-width: 0;
cursor: move; width: 100%;
color: var(--s-400);
} .macro__node-action-item {
.macro__node-action-item { flex-grow: 1;
background-color: var(--white); background-color: var(--white);
padding: var(--space-slab); padding: var(--space-small);
border-radius: var(--border-radius-medium); margin-right: var(--space-small);
box-shadow: rgb(0 0 0 / 3%) 0px 6px 24px 0px, border-radius: var(--border-radius-medium);
rgb(0 0 0 / 6%) 0px 0px 0px 1px; box-shadow: var(--shadow);
.macro__node-action-button-delete {
display: none;
}
&:hover {
.macro__node-action-button-delete {
display: flex;
}
}
&.has-error { &.has-error {
animation: shake 0.3s ease-in-out 0s 2; animation: shake 0.3s ease-in-out 0s 2;
background-color: var(--r-50); background-color: var(--r-50);

56
app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
View File

@@ -1,6 +1,13 @@
<template> <template>
<div class="macros__nodes"> <div class="macros__nodes">
<macros-pill :label="$t('MACROS.EDITOR.START_FLOW')" class="macro__node" /> <div class="macro__node">
<div>
<woot-label
:title="$t('MACROS.EDITOR.START_FLOW')"
color-scheme="primary"
/>
</div>
</div>
<draggable <draggable
:list="actionData" :list="actionData"
animation="200" animation="200"
@@ -28,29 +35,39 @@
/> />
</div> </div>
</draggable> </draggable>
<macro-action-button <div class="macro__node">
icon="add-circle" <div>
class="macro__node" <woot-button
:tooltip="$t('MACROS.EDITOR.ADD_BTN_TOOLTIP')" :title="$t('MACROS.EDITOR.ADD_BTN_TOOLTIP')"
type="add" class="macros__action-button"
@click="$emit('addNewNode')" color-scheme="success"
/> variant="smooth"
<macros-pill :label="$t('MACROS.EDITOR.END_FLOW')" class="macro__node" /> icon="add-circle"
@click="$emit('addNewNode')"
>
{{ $t('MACROS.EDITOR.ADD_BTN_TOOLTIP') }}
</woot-button>
</div>
</div>
<div class="macro__node">
<div>
<woot-label
:title="$t('MACROS.EDITOR.END_FLOW')"
color-scheme="primary"
/>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import MacrosPill from './Pill.vue';
import Draggable from 'vuedraggable'; import Draggable from 'vuedraggable';
import MacroNode from './MacroNode.vue'; import MacroNode from './MacroNode.vue';
import MacroActionButton from './ActionButton.vue';
import { getFileName } from './macroHelper'; import { getFileName } from './macroHelper';
export default { export default {
components: { components: {
Draggable, Draggable,
MacrosPill,
MacroNode, MacroNode,
MacroActionButton,
}, },
props: { props: {
value: { value: {
@@ -87,22 +104,27 @@ export default {
.macro__node:not(:last-child) { .macro__node:not(:last-child) {
position: relative; position: relative;
padding-bottom: var(--space-three); padding-bottom: var(--space-large);
} }
.macro__node:not(:last-child):not(.sortable-chosen):after, .macro__node:not(:last-child):not(.sortable-chosen):after,
.macros__nodes-draggable:after { .macros__nodes-draggable:after {
content: ''; content: '';
position: absolute; position: absolute;
height: var(--space-three); height: var(--space-large);
width: var(--space-smaller); width: var(--space-smaller);
margin-left: var(--space-medium); margin-left: var(--space-medium);
background-image: url("data:image/svg+xml,%3Csvg width='4' height='30' viewBox='0 0 4 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='1.50098' y1='0.579529' x2='1.50098' y2='30.5795' stroke='%2393afc8' stroke-width='2' stroke-dasharray='5 5'/%3E%3C/svg%3E%0A");
border-left: 1px dashed var(--s-500);
} }
.macros__nodes-draggable { .macros__nodes-draggable {
position: relative; position: relative;
padding-bottom: var(--space-three); padding-bottom: var(--space-large);
}
.macros__action-button {
box-shadow: var(--shadow);
} }
.macros__node-action-container { .macros__node-action-container {

30
app/javascript/dashboard/routes/dashboard/settings/macros/Pill.vue
View File

@@ -1,30 +0,0 @@
<template>
<div>
<div class="macros-item macros-pill">
<span>{{ label }}</span>
</div>
</div>
</template>
<script>
export default {
props: {
label: {
type: String,
required: true,
},
},
};
</script>
<style scoped>
.macros-pill {
padding: var(--space-slab);
background-color: var(--w-500);
max-width: max-content;
color: var(--white);
font-size: var(--font-size-small);
border-radius: var(--border-radius-full);
position: relative;
}
</style>

2
app/javascript/shared/assets/stylesheets/spacing.scss
View File

@@ -3,14 +3,12 @@
--space-zero: 0; --space-zero: 0;
--space-micro: 0.2rem; --space-micro: 0.2rem;
--space-smaller: 0.4rem; --space-smaller: 0.4rem;
--space-half: 0.5rem;
--space-small: 0.8rem; --space-small: 0.8rem;
--space-one: 1rem; --space-one: 1rem;
--space-slab: 1.2rem; --space-slab: 1.2rem;
--space-normal: 1.6rem; --space-normal: 1.6rem;
--space-two: 2rem; --space-two: 2rem;
--space-medium: 2.4rem; --space-medium: 2.4rem;
--space-three: 3rem;
--space-large: 3.2rem; --space-large: 3.2rem;
--space-larger: 4.8rem; --space-larger: 4.8rem;
--space-jumbo: 6.4rem; --space-jumbo: 6.4rem;