KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 108 additions and 173 deletions
Show stats 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,
sans-serif;
$body-antialiased: true;
$global-margin: $space-one;
$global-padding: $space-one;
$global-margin: $space-small;
$global-padding: $space-micro;
$global-weight-normal: normal;
$global-weight-bold: bold;
$global-radius: 0;

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

@ -20,6 +20,24 @@
@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 'layout';
@import 'animations';

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

@ -1,5 +1,5 @@
<template>
<div class="macro">
<div class="macro button secondary clear ">
<span class="text-truncate">{{ macro.name }}</span>
<div class="macros-actions">
<woot-button
@ -91,20 +91,7 @@ export default {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
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);
}
line-height: var(--space-normal);
.macros-actions {
display: flex;

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

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

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

@ -90,7 +90,7 @@ export default {
<style lang="scss" scoped>
.sidebar-labels-wrap {
margin-bottom: var(--space-normal);
margin-bottom: 0;
}
.contact-conversation--list {
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%;
}
.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);
height: 100%;
max-height: 100%;
padding: var(--space-normal) var(--space-three);
padding: var(--space-normal) var(--space-larger);
max-height: 100vh;
overflow-y: auto;
}

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

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

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

@ -1,6 +1,13 @@
<template>
<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
:list="actionData"
animation="200"
@ -28,29 +35,39 @@
/>
</div>
</draggable>
<macro-action-button
icon="add-circle"
class="macro__node"
:tooltip="$t('MACROS.EDITOR.ADD_BTN_TOOLTIP')"
type="add"
@click="$emit('addNewNode')"
/>
<macros-pill :label="$t('MACROS.EDITOR.END_FLOW')" class="macro__node" />
<div class="macro__node">
<div>
<woot-button
:title="$t('MACROS.EDITOR.ADD_BTN_TOOLTIP')"
class="macros__action-button"
color-scheme="success"
variant="smooth"
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>
</template>
<script>
import MacrosPill from './Pill.vue';
import Draggable from 'vuedraggable';
import MacroNode from './MacroNode.vue';
import MacroActionButton from './ActionButton.vue';
import { getFileName } from './macroHelper';
export default {
components: {
Draggable,
MacrosPill,
MacroNode,
MacroActionButton,
},
props: {
value: {
@ -87,22 +104,27 @@ export default {
.macro__node:not(:last-child) {
position: relative;
padding-bottom: var(--space-three);
padding-bottom: var(--space-large);
}
.macro__node:not(:last-child):not(.sortable-chosen):after,
.macros__nodes-draggable:after {
content: '';
position: absolute;
height: var(--space-three);
height: var(--space-large);
width: var(--space-smaller);
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 {
position: relative;
padding-bottom: var(--space-three);
padding-bottom: var(--space-large);
}
.macros__action-button {
box-shadow: var(--shadow);
}
.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-micro: 0.2rem;
--space-smaller: 0.4rem;
--space-half: 0.5rem;
--space-small: 0.8rem;
--space-one: 1rem;
--space-slab: 1.2rem;
--space-normal: 1.6rem;
--space-two: 2rem;
--space-medium: 2.4rem;
--space-three: 3rem;
--space-large: 3.2rem;
--space-larger: 4.8rem;
--space-jumbo: 6.4rem;