From 33a60eb17066dbcbd161f3e799ebccec01e69f6c Mon Sep 17 00:00:00 2001 From: A1Gard Date: Sat, 28 Dec 2024 17:38:12 +0330 Subject: [PATCH] added fast attachment upload to improve system ux update detach word mistake fixed --- .../Admin/AttachmentController.php | 14 +- resources/js/app.js | 5 + resources/js/components/FastAttaching.vue | 230 ++++++++ resources/js/panel/fast-attachment.js | 11 + resources/lang/fa.json | 9 +- resources/sass/panel/_common.scss | 229 +++++--- .../views/admin/posts/post-list.blade.php | 5 - .../admin/products/product-list.blade.php | 8 +- .../sub-pages/product-step3.blade.php | 15 +- .../views/components/panel-attachs.blade.php | 40 +- .../views/components/panel-footer.blade.php | 5 + resources/views/layouts/app.blade.php | 27 +- routes/web.php | 496 +++++++++--------- 13 files changed, 726 insertions(+), 368 deletions(-) create mode 100644 resources/js/components/FastAttaching.vue create mode 100644 resources/js/panel/fast-attachment.js diff --git a/app/Http/Controllers/Admin/AttachmentController.php b/app/Http/Controllers/Admin/AttachmentController.php index cd796dc..f1c5349 100644 --- a/app/Http/Controllers/Admin/AttachmentController.php +++ b/app/Http/Controllers/Admin/AttachmentController.php @@ -115,15 +115,18 @@ class AttachmentController extends XController { return parent::delete($item); } - public function deattach(Attachment $item) + public function detach(Attachment $item) { $item->attachable_id = null; $item->attachable_type = null; $item->save(); logAdmin(__METHOD__,__CLASS__,$item->id); + if (request()->ajax()) { + return ['OK' => true , 'message' => __('As you wished detached successfully')]; + } return redirect()->back() - ->with(['message' => __('As you wished deattached successfully')]); + ->with(['message' => __('As you wished detached successfully')]); } @@ -132,5 +135,12 @@ class AttachmentController extends XController return $this->bringUp($request, $item); } + public function attaching(Request $request){ + $item = new Attachment(); + $item = $this->save($item, $request); + logAdmin(__METHOD__,__CLASS__,$item->id); + return ['OK' => true,'data'=> $item,'message' => __('File uploaded successfully')]; + } + } diff --git a/resources/js/app.js b/resources/js/app.js index 03528cf..401eef9 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -32,6 +32,7 @@ import './panel/prototypes.js'; import './panel/panel-window-loader.js'; import './panel/responsive-control.js'; import './panel/fast-edit.js'; +import './panel/fast-attachment.js'; // import './panel/seo-analyzer.js'; // chartjs.defaults.defaultFontFamily = "Vazir"; @@ -123,6 +124,10 @@ app.component('menu-item-input', MenuItemInput); import VueTimepicker from "./components/vueTimePicker.vue"; app.component('vue-time-picker', VueTimepicker); + +import fastAttaching from "./components/FastAttaching.vue"; +app.component('fast-attaching', fastAttaching); + /** * The following block of code may be used to automatically register your * Vue components. It will recursively scan this directory for the Vue diff --git a/resources/js/components/FastAttaching.vue b/resources/js/components/FastAttaching.vue new file mode 100644 index 0000000..0db5c10 --- /dev/null +++ b/resources/js/components/FastAttaching.vue @@ -0,0 +1,230 @@ + + + + diff --git a/resources/js/panel/fast-attachment.js b/resources/js/panel/fast-attachment.js new file mode 100644 index 0000000..e57076f --- /dev/null +++ b/resources/js/panel/fast-attachment.js @@ -0,0 +1,11 @@ +document.addEventListener('DOMContentLoaded', function () { + + let attachFrom = document.querySelector('#attaching-form'); + document.querySelector('#attach-down')?.addEventListener('click', function () { + attachFrom.style.bottom = (window.innerHeight * -.5+'px'); + }); + document.querySelector('#show-attach-form')?.addEventListener('click', function (e) { + e.preventDefault(); + attachFrom.style.bottom = ('0px'); + }); +}); diff --git a/resources/lang/fa.json b/resources/lang/fa.json index 21d68a7..1c4d3ee 100644 --- a/resources/lang/fa.json +++ b/resources/lang/fa.json @@ -82,7 +82,7 @@ "Area design": "طراحی محیط", "Areas": "محیط‌ها ", "As you wished created successfully": "همانطور که شما مایل بودید ایجاد شد", - "As you wished deattached successfully": "همانطور که شما مایل بودید از پیوست خارج شد", + "As you wished detached successfully": "همانطور که شما مایل بودید از پیوست خارج شد", "As you wished removed successfully": "همانطور که شما مایل بودید حذف شد", "As you wished restored successfully": "همانطور که شما مایل بودید بازیافت شد", "As you wished sort saved": "همانطور که شما مایل بودید مرتب شدند", @@ -137,6 +137,7 @@ "Clips list": "فهرست کلیپ‌ها", "Close": "بستن", "Code": "کد", + "Collapse attachment form": "بستن فرم پیوست‌ها", "Colleague": "همکار", "Command ignored, segment part exists!": "", "Comment": "دیدگاه", @@ -170,7 +171,6 @@ "Date": "تاریخ", "Date of born": "تاریخ تولد", "Datetime": "تاریخ و زمان", - "Deattach": "عدم پیوست", "Default": "پیش‌فرض", "Default admin email is :E1 (developer) or :E2 (admin) and default password is: :P": "در نگارش آزمایشی رایانامه توسعه دهنده :E1 است و رایانامه مدیر عادی :E2 و گذرواژه هر دو :P است", "DefaultFooter": "فوتر پیش‌فرض", @@ -181,7 +181,8 @@ "Description Text": "نوشته توضیحات", "Design": "طراحی", "Design :AREA": "طراحی :AREA", - "Design guide": "", + "Design guide": "راهنمای طراحی", + "Detach": "عدم پیوست", "Detail": "جزئیات", "Developer guide": "راهنمای توسعه", "Devices": "دستگاه‌ها", @@ -244,6 +245,7 @@ "File ext": "پسوند پرونده", "File name": "نام پرونده", "File size": "حجم پرونده", + "File uploaded successfully": "پرونده با موفقیت بارگزاری شد", "Filter": "صافی", "Find more": "موارد بیشتر", "Flag": "پرچم", @@ -271,6 +273,7 @@ "GuestLogs list": "فهرست لاگ میهمان ها", "Height": "قد", "Hello world": "سلام دنیا", + "Hide in menu": "عدم نمایش در فهرست (منو)", "Home": "خانه", "ID": "", "Icon": "نماد", diff --git a/resources/sass/panel/_common.scss b/resources/sass/panel/_common.scss index a5d569e..8254aaa 100644 --- a/resources/sass/panel/_common.scss +++ b/resources/sass/panel/_common.scss @@ -1,20 +1,21 @@ -body{ +body { background: $body-bg; } -.circle-btn{ +.circle-btn { width: 75px; height: 75px; border-radius: 50%; background: $secondary-color-panel; backdrop-filter: blur(4px); border: 0; - box-shadow: 0px 3px 5px #11111177, inset 0 0 0 0 darkred; + box-shadow: 0px 3px 5px #11111177, inset 0 0 0 0 darkred; user-select: none; cursor: pointer; transition: 500ms; - &:hover{ - box-shadow: 0px 3px 5px #11111177, inset 0 0 0 40px darkred; + + &:hover { + box-shadow: 0px 3px 5px #11111177, inset 0 0 0 40px darkred; } } @@ -29,34 +30,38 @@ body{ grid-auto-flow: column; } -a.btn,a.action-btn,a.circle-btn{ - &:hover{ - color:white; - i{ +a.btn, a.action-btn, a.circle-btn { + &:hover { + color: white; + + i { color: white; } } } -.action-btn{ +.action-btn { display: block; font-size: 47px; text-align: center; - i{ + + i { color: white; } + position: fixed; inset-inline-start: 4.2rem; bottom: 1rem; } -.general-form{ +.general-form { background: $lighter-color; border-radius: 7px; margin-bottom: 4rem; position: relative; - h1{ + + h1 { font-size: 25px; font-weight: 200; background: #00000011; @@ -65,12 +70,12 @@ a.btn,a.action-btn,a.circle-btn{ margin: 0 -1rem; } - .row{ - padding: 0 1rem 2rem ; + .row { + padding: 0 1rem 2rem; } - input[type='submit']{ - position: absolute ; + input[type='submit'] { + position: absolute; bottom: -1rem; left: 50%; transform: translateX(-50%); @@ -78,44 +83,49 @@ a.btn,a.action-btn,a.circle-btn{ } } -.group-control{ +.group-control { list-style: none; overflow-y: auto; padding: 0 .5rem; height: 12rem; - ul{ + + ul { list-style: none; } - input{ + + input { margin: 0 .5rem; } } -.model-status{ +.model-status { width: 15px; height: 15px; margin: auto; border-radius: 3px; } -.status-0,.status-CLOSED,.status-FAILED,.status-PROCESSING { + +.status-0, .status-CLOSED, .status-FAILED, .status-PROCESSING { background: red; } -.status-1,.status-ANSWERED,.status-COMPLETED{ + +.status-1, .status-ANSWERED, .status-COMPLETED { background: lime; } -.status-PENDING{ + +.status-PENDING { background: gold; } -.status-CANCELED{ +.status-CANCELED { background: orange; } -.status-PAID{ +.status-PAID { background: white; } -.image-x64{ +.image-x64 { height: 64px; width: 64px; object-fit: cover; @@ -123,50 +133,50 @@ a.btn,a.action-btn,a.circle-btn{ } - -.img-squire{ +.img-squire { display: block; max-width: 100%; margin: auto; } -.rm-img{ +.rm-img { position: relative; z-index: 1; margin-bottom: -75px; } -.section-group{ +.section-group { - .section-group-item{ + .section-group-item { display: block; padding: .5rem; background: #ffffff11; border-bottom: 1px solid #00000022; color: white; - &.active{ + + &.active { background: $primary-color-panel; } - &:hover{ - background: rgba($primary-color-panel,.7); + &:hover { + background: rgba($primary-color-panel, .7); } } } -#setting-sections{ - section{ +#setting-sections { + section { display: none; background: $lighter-color; padding: 1rem; - .setting-field{ + .setting-field { padding: 5px; } } } -#avatar-input{ +#avatar-input { display: none; } @@ -176,11 +186,13 @@ a.btn,a.action-btn,a.circle-btn{ padding-left: 1rem; list-style: none; border-radius: 5px; + li { border: 1px solid grey; background: #ffffff11; margin-bottom: .25rem; border-radius: 5px; + span { display: block; padding: 7px; @@ -189,41 +201,44 @@ a.btn,a.action-btn,a.circle-btn{ } -.area-list-item{ +.area-list-item { background: #00000022; height: 125px; text-align: center; display: block; color: $text-muted; - &:hover{ - color: lighten($primary-color-panel,10); + &:hover { + color: lighten($primary-color-panel, 10); } - i{ + + i { font-size: 45px; display: block; margin: 1rem auto; } } -[data-open-file]{ + +[data-open-file] { cursor: pointer; } -.avatar-x64{ +.avatar-x64 { background: $body-bg; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; - border: 3px rgba($primary-color-panel,127) solid ; + border: 3px rgba($primary-color-panel, 127) solid; } -.skewed-container{ +.skewed-container { overflow: hidden; position: relative; min-height: 128px; } -.skewed-icon{ + +.skewed-icon { font-size: 128px; opacity: .3; position: absolute; @@ -233,40 +248,46 @@ a.btn,a.action-btn,a.circle-btn{ } -.order-card{ +.order-card { background: rgba(255, 196, 0, 0.8) !important; - .card-header{ + .card-header { background: #ffffff22 !important; - color: $secondary-color-panel; + color: $secondary-color-panel; } - .card-body{ + + .card-body { background: #00000011; text-align: center; } - i{ + + i { font-size: 100px; } - a,a:visited{ + + a, a:visited { color: white; } } -.ticket-card{ +.ticket-card { background: rgba(0, 255, 166, 0.8) !important; - .card-header{ + .card-header { background: #ffffff22 !important; - color: $secondary-color-panel; + color: $secondary-color-panel; } - .card-body{ + + .card-body { background: #00000011; text-align: center; } - i{ + + i { font-size: 100px; } - a,a:visited{ + + a, a:visited { color: white; } } @@ -285,7 +306,7 @@ a.btn,a.action-btn,a.circle-btn{ } -#panel-preloader{ +#panel-preloader { transition: 490ms; position: fixed; z-index: 9999999; @@ -298,11 +319,13 @@ a.btn,a.action-btn,a.circle-btn{ display: flex; align-items: center; justify-content: center; - color: lighten($primary-color-panel,15); + color: lighten($primary-color-panel, 15); + .loader { position: relative; width: 100px; height: 100px; + &:before { content: ''; border-radius: 50%; @@ -310,6 +333,7 @@ a.btn,a.action-btn,a.circle-btn{ inset: 0; box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3) inset; } + &:after { content: ''; border-radius: 50%; @@ -325,7 +349,6 @@ a.btn,a.action-btn,a.circle-btn{ } - @keyframes rotate { 0% { transform: rotate(0); @@ -335,14 +358,15 @@ a.btn,a.action-btn,a.circle-btn{ } } -.btn-light,a.btn-light{ +.btn-light, a.btn-light { color: black !important; } -.table-list td .btn{ +.table-list td .btn { margin-bottom: 5px; margin-top: 5px; } + /* -620px width */ @media (max-width: 620px) { .table-list { @@ -355,12 +379,12 @@ a.btn,a.action-btn,a.circle-btn{ width: 100% !important; text-align: end; } - td{ + td { display: flex; justify-content: space-between; align-items: center; } - td:last-child{ + td:last-child { justify-content: center; } @@ -368,9 +392,10 @@ a.btn,a.action-btn,a.circle-btn{ float: none !important; } - .dropdown{ + .dropdown { min-width: 75%; - .btn{ + + .btn { width: 100%; } } @@ -383,9 +408,7 @@ a.btn,a.action-btn,a.circle-btn{ } - - -#seo-hint{ +#seo-hint { .seo-report { @@ -393,8 +416,9 @@ a.btn,a.action-btn,a.circle-btn{ margin: 15px 0; background: #21252b; border-radius: 8px; - box-shadow: 0 2px 4px rgba(0,0,0,0.1); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } + .seo-score-container { display: flex; align-items: center; @@ -402,11 +426,13 @@ a.btn,a.action-btn,a.circle-btn{ border-bottom: 1px solid #eee; gap: 20px; } + .seo-score { position: relative; width: 80px; height: 80px; } + .seo-score-circle { width: 100%; height: 100%; @@ -418,75 +444,91 @@ a.btn,a.action-btn,a.circle-btn{ font-weight: bold; color: white; } + .seo-status { flex: 1; + h3 { margin: 0 0 5px 0; font-size: 18px; } + p { margin: 0; color: #eee; } } + .seo-details { padding: 20px; } + .seo-feedback { margin-bottom: 20px; + ul { margin: 10px 0; padding-left: 20px; } + li { margin: 8px 0; color: #ddd; } } + .seo-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } + .metric-card { background: #f8f9fa; padding: 15px; border-radius: 6px; + h4 { margin: 0 0 10px 0; color: #333; font-size: 14px; } } + .metric-value { font-size: 16px; font-weight: 500; color: #2a2a2a; } + .good { background: #22c55e; } + .average { background: #f59e0b; } + .poor { background: #ef4444; } } -.nested-ul{ +.nested-ul { list-style: none; - ul{ + + ul { list-style: none; } - input[type='checkbox']{ + + input[type='checkbox'] { margin: 0 1rem; } } -#iframe-modal{ +#iframe-modal { background: #00000011; backdrop-filter: blur(10px); position: fixed; @@ -498,10 +540,41 @@ a.btn,a.action-btn,a.circle-btn{ padding-top: 5vh; display: none; - iframe{ + iframe { border: 0; height: 90vh; width: 100%; border-radius: 1rem; } } + + +#attaching-form { + position: fixed; + bottom: -50vh; + left: 1rem; + right: 1rem; + background: $lighter-color; + height: 40vh; + border-radius: 7px 7px 0 0; + border: 1px solid #aaaaaa55; + border-bottom: none; + overflow-y: auto; + overflow-x: hidden; + transition: 500ms; + + #attach-down { + position: absolute; + inset-inline-end: 30px; + top: 0; + padding: 5px; + background: #ffffff22; + font-size: 30px; + border-radius: 0 0 7px 7px; + cursor: pointer; + + &:hover { + background: #ffffff66; + } + } +} diff --git a/resources/views/admin/posts/post-list.blade.php b/resources/views/admin/posts/post-list.blade.php index ac5c6f3..71f417e 100644 --- a/resources/views/admin/posts/post-list.blade.php +++ b/resources/views/admin/posts/post-list.blade.php @@ -9,11 +9,6 @@ @endsection @section('filter') -
-
- -
-
{{-- Other filters --}} {{__("Main group")}} diff --git a/resources/views/admin/products/product-list.blade.php b/resources/views/admin/products/product-list.blade.php index b7c20b5..94a703c 100644 --- a/resources/views/admin/products/product-list.blade.php +++ b/resources/views/admin/products/product-list.blade.php @@ -10,15 +10,11 @@ @section('filter') {{-- Other filters --}}

- -
-
- -
-
{{__("Category")}}:

+ + --}}
-
- @include('components.panel-attachs',['attachs' => $item->attachs??[]]) +
+

+ {{__("Attachments")}} +

+
+
diff --git a/resources/views/components/panel-attachs.blade.php b/resources/views/components/panel-attachs.blade.php index 93c5224..82a102d 100644 --- a/resources/views/components/panel-attachs.blade.php +++ b/resources/views/components/panel-attachs.blade.php @@ -1,28 +1,32 @@

{{__("Attachments")}} - + + + + ({{count($attachs)}}) +

-
--}} - - @endforeach - +{{-- --}} +{{-- @endforeach--}} +{{----}} diff --git a/resources/views/components/panel-footer.blade.php b/resources/views/components/panel-footer.blade.php index 4f6415d..3aff6c2 100644 --- a/resources/views/components/panel-footer.blade.php +++ b/resources/views/components/panel-footer.blade.php @@ -1,4 +1,9 @@ @yield('js-content') +
+
+ +
+