Skip to content

Commit

Permalink
add Remove Comment - change name Class
Browse files Browse the repository at this point in the history
  • Loading branch information
@vigstudio
vigstudio committed Apr 20, 2023
1 parent 9ca61d9 commit b768a66
Show file tree
Hide file tree
Showing 10 changed files with 224 additions and 76 deletions.
4 changes: 2 additions & 2 deletions composer.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"homepage": "https://github.com/vigstudio/livewire-comments",
"license": "MIT",
"type": "laravel-library",
"version": "1.1.2",
"version": "1.1.3",
"authors": [
{
"name": "Nghiane.com",
Expand All @@ -22,7 +22,7 @@
],
"require": {
"php": "^8.0",
"vigstudio/vgcomments": "^1.1.0",
"vigstudio/vgcomments": "^1.1.4",
"livewire/livewire": "^2.10.7",
"archielite/laravel-heroicons": "^0.2.0"
},
Expand Down
2 changes: 1 addition & 1 deletion public/css/comments.css
View file

Large diffs are not rendered by default.

159 changes: 155 additions & 4 deletions resources/sass/comments.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,29 @@
@apply bg-gray-100 cursor-not-allowed;
}

.vcomments-box {
.vgcomment_box {
@apply mb-4 w-full bg-white;

.vgcomment_box_navbar {
@apply flex justify-between items-center mb-6 border-b-2 border-gray-400 px-4;

.vgcomment_box_navbar-title {
@apply text-lg lg:text-2xl font-bold text-gray-900;
}

.vgcomment_box_navbar-dropdown {
@apply flex justify-between items-center mb-2;

.vgcomment_box_navbar_dropdown-group {
@apply flex justify-between;

.vgcomment_box_navbar_dropdown-select {
@apply mt-1 block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm;
}
}
}
}

.vcomment-row {
@apply mb-6 text-base bg-gray-50 border border-gray-200;

Expand Down Expand Up @@ -143,15 +163,65 @@
}
}

.vpagination {
.vgcomment_box-pagination {
@apply flex items-center justify-between;

.mobile-mode {
.vgcomment_box_pagination-mobile-mode {
@apply flex justify-between flex-1 sm:hidden;

.vgcomment_box_pagination-previous-span {
@apply relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md select-none;
}
.vgcomment_box_pagination-next-span {
@apply relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md select-none;
}

.vgcomment_box_pagination-previous-button {
@apply relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150;
}
.vgcomment_box_pagination-next-button {
@apply relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150;
}
}

.desktop-mode {
.vgcomment_box_pagination-desktop-mode {
@apply hidden sm:flex-1 sm:flex sm:items-center sm:justify-between;

.vgcomment_box_pagination-desktop-mode-title {
@apply text-sm text-gray-700 leading-5;
}

.vgcomment_box_pagination-desktop-mode-group {
@apply relative z-0 inline-flex rounded-md shadow-sm;

.vgcomment_box_pagination-desktop-mode-page-link {
@apply relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5;
}

.vgcomment_box_pagination-desktop-mode-page-link-button {
@apply relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150;
}

.vgcomment_box_pagination-desktop-mode-page-dot {
@apply relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5 select-none;
}

.vgcomment_box_pagination-desktop-mode-page-array-link {
@apply relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 select-none;
}

.vgcomment_box_pagination-desktop-mode-page-array-button {
@apply relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150;
}

.vgcomment_box_pagination-desktop-mode-page-link-next {
@apply relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5;
}

.vgcomment_box_pagination-desktop-mode-page-link-button-next {
@apply relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150;
}
}
}
}
}
Expand Down Expand Up @@ -312,11 +382,31 @@

.vg__message {
@apply ml-3 w-0 flex-1 pt-0.5;

.vg__message_p_cap {
@apply text-sm font-medium text-gray-900 capitalize;
}

.vg__message_p_mess {
@apply mt-1 text-sm text-gray-500;
}
}

.vg_toolkit {
@apply ml-4 flex flex-shrink-0;
}

.vg_icon_success {
@apply h-6 w-6 text-green-400;
}

.vg_icon_warning {
@apply h-6 w-6 text-orange-300;
}

.vg_icon_danger {
@apply h-6 w-6 text-red-600;
}
}
}
}
Expand Down Expand Up @@ -394,6 +484,60 @@
}
}

.vgcomments_confirm {
@apply relative z-10;

.vgcomments_confirm-over {
@apply fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity;
}

.vgcomments_confirm-container {
@apply fixed inset-0 z-10 overflow-y-auto;

.vgcomments_confirm-container-content {
@apply flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0;

.vgcomments_confirm-container-content-div {
@apply relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6;

.vgcomments_confirm-container-content-div-row {
@apply sm:flex sm:items-start;

.vgcomments_confirm-container-content-div-row-icon {
@apply mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10;
}

.vgcomments_confirm-container-content-div-row-text {
@apply mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left;

.vgcomments_confirm-container-content-div-row-text-title {
@apply text-lg font-medium leading-6 text-gray-900;
}
}

.vgcomments_confirm-icon-danger {
@apply h-6 w-6 text-red-600;
}
}

.vgcomments_confirm-container-content-div-footer {
@apply mt-5 sm:mt-4 sm:flex sm:flex-row-reverse;

.vgcomments_confirm-container-content-div-footer-button {
@apply inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm;
}

.vgcomments_confirm-container-content-div-footer-button-cancel {
@apply mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm;
}
}
}
}
}


}

.vgcomemnt_icon-5 {
@apply w-5 h-5;
}
Expand Down Expand Up @@ -430,3 +574,10 @@
@apply ml-2;
}

.vgcomment-font-medium {
@apply font-medium;
}

.vgcomment_p-4 {
@apply p-4;
}
14 changes: 7 additions & 7 deletions resources/views/components/alert.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,25 +15,25 @@ class="vgcomments_alert"
x-transition:leave-end="end"
class="vg__body"
style="display: none;">
<div class="p-4">
<div class="vgcomment_p-4">
<div class="vg__content">
<x-heroicons::icon x-show="type == 'success'"
name="check-circle-s"
class="h-6 w-6 text-green-400" />
class="vg_icon_success" />


<x-heroicons::icon x-show="type == 'alert'"
name="exclamation-triangle-s"
class="h-6 w-6 text-orange-300" />
class="vg_icon_warning" />

<x-heroicons::icon x-show="type == 'error'"
name="x-circle-s"
class="h-6 w-6 text-red-600" />
class="vg_icon_danger" />

<div class="vg__message">
<p class="text-sm font-medium text-gray-900 capitalize"
<p class="vg__message_p_cap"
x-text="title + ' !'"></p>
<p class="mt-1 text-sm text-gray-500"
<p class="vg__message_p_mess"
x-text="message"></p>
</div>

Expand All @@ -42,7 +42,7 @@ class="h-6 w-6 text-red-600" />
x-on:click="show = false"
class="vcomments__btn none">
<x-heroicons::icon name="x-mark-s"
class="h-5 w-5" />
class="vgcomemnt_icon-5" />
</button>
</div>
</div>
Expand Down
4 changes: 3 additions & 1 deletion resources/views/components/comment.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,9 @@ class="vgcomment__dropdown-menu--item"
</button>

@foreach ($comment->reactionsGroup() as $reaction)
<button type="button" class="vcomments__btn @if ($reaction->where('user_reacted', true)->count() > 0) active @else none @endif">
<button type="button"
class="vcomments__btn @if ($reaction->where('user_reacted', true)->count() > 0) active @else none @endif"
@if ($reaction->where('user_reacted', true)->count() > 0) wire:click="unReact('{{ $comment->uuid }}', '{{ $reaction->first()->type }}')" @endif>
<span class="emoji">{{ $reaction->first()->type }}</span>
<span class="text">{{ $reaction->count() }}</span>
</button>
Expand Down
42 changes: 14 additions & 28 deletions resources/views/components/confirm.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,38 @@
<div x-data="{ open: false, action: 'delete', message: '', id: 0 }"
@keydown.window.escape="open = false"
x-show="open" class="relative z-10"
x-show="open"
aria-labelledby="modal-title"
x-ref="dialog"
aria-modal="true"
@confirm-action.window="open = true; action = $event.detail.action; message = $event.detail.message; id = $event.detail.id;"
class="vgcomments_confirm"
style="display: none;">

<div x-show="open"
x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
x-description="Background backdrop, show/hide based on modal state."
class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity">
<div x-show="open" class="vgcomments_confirm-over">
</div>


<div class="fixed inset-0 z-10 overflow-y-auto">
<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<div class="vgcomments_confirm-container">
<div class="vgcomments_confirm-container-content">

<div x-show="open"
x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave="ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-description="Modal panel, show/hide based on modal state."
class="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6"
class="vgcomments_confirm-container-content-div"
@click.away="open = false">

<div class="sm:flex sm:items-start">
<div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<svg class="h-6 w-6 text-red-600" x-description="Heroicon name: outline/exclamation-triangle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<div class="vgcomments_confirm-container-content-div-row">
<div class="vgcomments_confirm-container-content-div-row-icon">
<svg class="vgcomments_confirm-icon-danger" x-description="Heroicon name: outline/exclamation-triangle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 10.5v3.75m-9.303 3.376C1.83 19.126 2.914 21 4.645 21h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 4.88c-.866-1.501-3.032-1.501-3.898 0L2.697 17.626zM12 17.25h.007v.008H12v-.008z"></path>
</svg>
</div>
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title" x-text="message"></h3>
<div class="vgcomments_confirm-container-content-div-row-text">
<h3 class="vgcomments_confirm-container-content-div-row-text-title" id="modal-title" x-text="message"></h3>
</div>
</div>

<div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
<button type="button" x-on:click="$wire.emit('confirm-submit', id, action)" class="inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm" @click="open = false"> {{ __('vgcomment::comment.submit') }}</button>
<button type="button" class="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm" @click="open = false"> {{ __('vgcomment::comment.cancel') }}</button>
<div class="vgcomments_confirm-container-content-div-footer">
<button type="button" x-on:click="$wire.emit('confirm-submit', id, action)" class="vgcomments_confirm-container-content-div-footer-button" @click="open = false"> {{ __('vgcomment::comment.submit') }}</button>
<button type="button" class="vgcomments_confirm-container-content-div-footer-button-cancel" @click="open = false"> {{ __('vgcomment::comment.cancel') }}</button>
</div>
</div>

Expand Down
14 changes: 6 additions & 8 deletions resources/views/livewire/comments.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="vcomments-box" wire:init.defer.500ms="deferLoading('comments')">
<div class="vgcomment_box" wire:init.defer.500ms="deferLoading('comments')">

@if ($loading)
@else
Expand All @@ -8,14 +8,14 @@
<x-livewire-comments::confirm />
</div>

<div class="flex justify-between items-center mb-6 border-b-2 border-gray-400 px-4">
<h2 class="text-lg lg:text-2xl font-bold text-gray-900">
<div class="vgcomment_box_navbar">
<h2 class="vgcomment_box_navbar-title">
{{ __('vgcomment::comment.discussion') }} ({{ $comments->total() }})
</h2>

<div class="flex justify-between items-center mb-2">
<div class="flex justify-between">
<select wire:model="request.order" class="mt-1 block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm">
<div class="vgcomment_box_navbar-dropdown">
<div class="vgcomment_box_navbar_dropdown-group">
<select wire:model="request.order" class="vgcomment_box_navbar_dropdown-select">
<option value="latest">{{ __('vgcomment::comment.latest') }}</option>
<option value="oldest">{{ __('vgcomment::comment.oldest') }}</option>
<option value="popular">{{ __('vgcomment::comment.popular') }}</option>
Expand All @@ -34,7 +34,5 @@
{{ $comments->links() }}
</div>


<script src="https://www.google.com/recaptcha/api.js?render={{ Config::get('vgcomment.recaptcha_key') }}"></script>
@endif
</div>
Loading

0 comments on commit b768a66

Please sign in to comment.