Skip to content

Commit

Permalink
Merge pull request #36 from xndbogdan/feat/fixed-search
Browse files Browse the repository at this point in the history 
Feat/fixed search
  • Loading branch information
@xndbogdan
xndbogdan authored May 17, 2024
2 parents d68e789 + a800664 commit 82c2d2b
Show file tree
Hide file tree
Showing 5 changed files with 56 additions and 52 deletions.
3 changes: 1 addition & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

## Introduction

![alt text](https://github.com/xndbogdan/statamic-bard-text-color/raw/main/preview_v4.0.png "Preview")
![alt text](https://github.com/xndbogdan/statamic-bard-text-color/raw/main/preview_v5.0.1.png "Preview")

This is a statamic bard plugin that lets you change text color!
It allows you to use the default tailwind palette, but you can also add your own.
Expand All @@ -30,7 +30,6 @@ Please check [this](https://github.com/xndbogdan/statamic-bard-text-color/blob/m
- Pull colors from tailwind.config.js automatically
- Upgrade to Vue 3
- Upgrade to Vite
- Improve user experience

## Credits

Expand Down
2 changes: 1 addition & 1 deletion dist/js/textcolor.js
View file

Large diffs are not rendered by default.

Binary file added preview_v5.0.1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions resources/css/tailwind.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@
min-width:250px;
}

.min-w-248 {
min-width:248px;
}

.min-w-500 {
min-width:500px;
}
99 changes: 50 additions & 49 deletions resources/js/TextColorMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,62 +9,63 @@
v-tooltip="button.text"
@click="toggleColorMenu"
/>
<div class="absolute left-0 z-10 flex flex-wrap px-2 overflow-y-scroll bg-white border border-gray-200 rounded-sm mt-sm min-w-250 lg:min-w-500 max-h-300px" :class="{ hidden: !showColorMenu }">
<div class="flex flex-wrap w-full pt-2">
<p class="w-full mb-2 font-bold">Filters</p>

<div class="inline-flex items-center w-full">
<input id="color-filter" class="block w-full py-1 pl-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" type="text" v-model="filter" placeholder="Color name">
</div>
<div class="absolute left-0 z-10 flex flex-wrap overflow-y-scroll bg-white border border-gray-200 rounded-sm mt-sm min-w-250 lg:min-w-500 max-h-300px" :class="{ hidden: !showColorMenu }">
<div class="items-center flex fixed px-2 py-2 bg-white min-w-248">
<input id="color-filter" class="flex-1 px-2 py-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" type="text" v-model="filter" placeholder="Color name">
</div>
<div class="flex flex-col w-full pt-2 mb-2">
<div class="inline-flex items-center">
<input id="radio-color-default" class="inline form-radio" type="radio" v-model="selectedGroup" value="default" @click="switchColors('default')">
<label for="radio-color-default" class="inline" style="margin-left: .2rem;">Default</label>
<div class="px-2">
<div class="flex flex-wrap w-full pt-12">
<p class="w-full mb-2 font-bold">Color presets</p>
</div>
<div class="inline-flex items-center mt-2">
<input id="radio-color-custom" class="inline form-radio" type="radio" v-model="selectedGroup" value="custom" @click="switchColors('custom')">
<label for="radio-color-custom" class="inline" style="margin-left: .2rem;">Custom</label>
<div class="flex flex-col w-full mb-2">
<div class="inline-flex items-center">
<input id="radio-color-default" class="inline form-radio" type="radio" v-model="selectedGroup" value="default" @click="switchColors('default')">
<label for="radio-color-default" class="inline" style="margin-left: .2rem;">Default</label>
</div>
<div class="inline-flex items-center mt-2">
<input id="radio-color-custom" class="inline form-radio" type="radio" v-model="selectedGroup" value="custom" @click="switchColors('custom')">
<label for="radio-color-custom" class="inline" style="margin-left: .2rem;">Custom</label>
</div>
</div>
</div>



<div class="flex flex-wrap w-full" v-if="selectedGroup=='default'">
<template v-for="(color, index) in filteredColors" >
<div @click="setColor(color)" :key="index" class="flex flex-row items-center justify-start w-full py-1 my-1 rounded-sm cursor-pointer hover:bg-gray-300 sm:w-1/2 xl:w-1/4" v-if="typeof color == 'string' && index != 'transparent' && index !='current'">
<div class="w-6 h-6 mx-1" style="border: 1px solid #000;" :style="'background-color:'+color+';'"></div>
<p class="text-center" style="font-size: 0.6rem!important;">{{ index }}</p>
</div>
<template v-if="typeof color == 'object'">
<div v-for="(hex, intensity) in color" :key="index + '-' + intensity" @click="setColor(hex)" class="flex flex-row items-center justify-start w-full py-1 my-1 rounded-sm cursor-pointer hover:bg-gray-300 sm:w-1/2 xl:w-1/4">
<div class="w-6 h-6 mx-1" style="border: 1px solid #000;" :style="'background-color:'+hex+';'"></div>
<p class="px-1 text-center" style="font-size: 0.6rem!important;">{{ index + '-' + intensity }}</p>
<div class="flex flex-wrap w-full" v-if="selectedGroup=='default'">
<template v-for="(color, index) in filteredColors" >
<div @click="setColor(color)" :key="index" class="flex flex-row items-center justify-start w-full py-1 my-1 rounded-sm cursor-pointer hover:bg-gray-300 sm:w-1/2 xl:w-1/4" v-if="typeof color == 'string' && index != 'transparent' && index !='current'">
<div class="w-6 h-6 mx-1" style="border: 1px solid #000;" :style="'background-color:'+color+';'"></div>
<p class="text-center" style="font-size: 0.6rem!important;">{{ index }}</p>
</div>
<template v-if="typeof color == 'object'">
<div v-for="(hex, intensity) in color" :key="index + '-' + intensity" @click="setColor(hex)" class="flex flex-row items-center justify-start w-full py-1 my-1 rounded-sm cursor-pointer hover:bg-gray-300 sm:w-1/2 xl:w-1/4">
<div class="w-6 h-6 mx-1" style="border: 1px solid #000;" :style="'background-color:'+hex+';'"></div>
<p class="px-1 text-center" style="font-size: 0.6rem!important;">{{ index + '-' + intensity }}</p>
</div>
</template>
</template>
</template>
</div>
</div>

<div class="flex flex-wrap w-full" v-else-if="availableCustomColors">
<template v-for="(color, index) in filteredColors" >
<div @click="setColor(color)" :key="index" class="flex flex-row items-center justify-start w-full py-1 my-1 rounded-sm cursor-pointer hover:bg-gray-300 sm:w-1/2 xl:w-1/4" v-if="typeof color == 'string' && index != 'transparent' && index !='current'">
<div class="w-6 h-6 mx-1" style="border: 1px solid #000;" :style="'background-color:'+color+';'"></div>
<p class="text-center" style="font-size: 0.6rem!important;">{{ index }}</p>
</div>
<template v-if="typeof color == 'object'">
<div v-for="(hex, intensity) in color" :key="index + '-' + intensity" @click="setColor(hex)" class="flex flex-row items-center justify-start w-full py-1 my-1 rounded-sm cursor-pointer hover:bg-gray-300 sm:w-1/2 xl:w-1/4">
<div class="w-6 h-6 mx-1" style="border: 1px solid #000;" :style="'background-color:'+hex+';'"></div>
<p class="px-1 text-center" style="font-size: 0.6rem!important;">{{ index + '-' + intensity }}</p>
<div class="flex flex-wrap w-full" v-else-if="availableCustomColors">
<template v-for="(color, index) in filteredColors" >
<div @click="setColor(color)" :key="index" class="flex flex-row items-center justify-start w-full py-1 my-1 rounded-sm cursor-pointer hover:bg-gray-300 sm:w-1/2 xl:w-1/4" v-if="typeof color == 'string' && index != 'transparent' && index !='current'">
<div class="w-6 h-6 mx-1" style="border: 1px solid #000;" :style="'background-color:'+color+';'"></div>
<p class="text-center" style="font-size: 0.6rem!important;">{{ index }}</p>
</div>
<template v-if="typeof color == 'object'">
<div v-for="(hex, intensity) in color" :key="index + '-' + intensity" @click="setColor(hex)" class="flex flex-row items-center justify-start w-full py-1 my-1 rounded-sm cursor-pointer hover:bg-gray-300 sm:w-1/2 xl:w-1/4">
<div class="w-6 h-6 mx-1" style="border: 1px solid #000;" :style="'background-color:'+hex+';'"></div>
<p class="px-1 text-center" style="font-size: 0.6rem!important;">{{ index + '-' + intensity }}</p>
</div>
</template>
</template>
</template>
</div>
</div>

<div class="flex flex-col items-center w-full py-4" v-else>
<svg class="w-8 h-8 mb-1 text-red" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<p>It appears there are no custom colors.</p>
<p>Please check the <a class="text-blue-600" href="https://github.com/xndbogdan/statamic-bard-text-color/blob/main/README.md#custom-colors">documentation</a> on how to configure them.</p>
<div class="flex flex-col items-center w-full py-4" v-else>
<svg class="w-8 h-8 mb-1 text-red" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<p>It appears there are no custom colors.</p>
<p>Please check the <a class="text-blue-600" href="https://github.com/xndbogdan/statamic-bard-text-color/blob/main/README.md#custom-colors">documentation</a> on how to configure them.</p>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -94,18 +95,18 @@ export default {
methods: {
onClickOutside() {
this.showColorMenu = false;
this.filter = ''
// this.filter = ''
},
toggleColorMenu() {
this.showColorMenu = !this.showColorMenu;
this.filter = ''
// this.filter = ''
},
setColor(color) {
// this.filter = ''
this.editor.commands.changeTextColor({
color: color === this.currentColor ? false : color,
})
// this.showColorMenu = false
this.showColorMenu = false
},
switchColors(group) {
switch(group) {
Expand Down

0 comments on commit 82c2d2b

Please sign in to comment.