From 44ac2bcd5dfc53570e0b96ba8ba65622d6624f5a Mon Sep 17 00:00:00 2001 From: quinlan Date: Mon, 24 Oct 2022 21:36:05 +0300 Subject: [PATCH] fab modified and type select added --- public/css/lfm.css | 35 +++++++++++++++++++++++++++++++---- public/js/script.js | 39 ++++++++++++++++++++++++++++++++++++--- src/lang/az/lfm.php | 2 ++ src/lang/en/lfm.php | 2 ++ src/lang/tr/lfm.php | 2 ++ src/views/index.blade.php | 1 + 6 files changed, 74 insertions(+), 7 deletions(-) diff --git a/public/css/lfm.css b/public/css/lfm.css index 2eefe900..2f2fc53c 100644 --- a/public/css/lfm.css +++ b/public/css/lfm.css @@ -6,7 +6,7 @@ a { cursor: pointer; } -#nav a, #fab a { +#nav a, #fab a, #type-select a{ color: white; } @@ -324,11 +324,19 @@ time { .fab-wrapper { margin: 1.5rem; - right: 0; - bottom: 0; position: fixed; } +.fab-wrapper.right-bottom{ + right: 0; + bottom: 0; +} + +.fab-wrapper.left-bottom{ + left: 0; + bottom: 0; +} + .fab-wrapper .fab-button { position: relative; background-color: #333844; @@ -353,13 +361,20 @@ time { transition: transform 350ms; } -.fab-wrapper.fab-expand .fab-toggle i { +.fab-wrapper.fab-expand .fab-toggle i.rotate { -webkit-transform: scale(1) rotate(-225deg); transform: scale(1) rotate(-225deg); -webkit-transition: -webkit-transform 350ms; transition: transform 350ms; } +.fab-wrapper.fab-expand .fab-toggle i.scale { + -webkit-transform: scale(1); + transform: scale(1.2); + -webkit-transition: -webkit-transform 350ms; + transition: transform 350ms; +} + .fab-wrapper .fab-action { z-index: -1; margin-bottom: -3.5rem; @@ -367,6 +382,13 @@ time { transition: margin-bottom 350ms, opacity 350ms; } +.fab-wrapper .fab-action.disabled{ + pointer-events: none; + cursor: default; + -webkit-filter: grayscale(100%); + filter: grayscale(100%); +} + .fab-wrapper.fab-expand .fab-action { margin-bottom: 1rem; opacity: 1; @@ -385,3 +407,8 @@ time { white-space: nowrap; content: attr(data-label); } + +.fab-wrapper.left-bottom .fab-action:before{ + right: auto; + left: 4rem; +} diff --git a/public/js/script.js b/public/js/script.js index 2a2b49c9..566600c3 100644 --- a/public/js/script.js +++ b/public/js/script.js @@ -4,14 +4,17 @@ var sort_type = 'alphabetic'; var multi_selection_enabled = false; var selected = []; var items = []; +var default_parameters = defaultParameters(); $.fn.fab = function (options) { var menu = this; - menu.addClass('fab-wrapper'); + menu.addClass('fab-wrapper '+options.wrapper.position); var toggler = $('') .addClass('fab-button fab-toggle') - .append($('').addClass('fas fa-plus')) + .append($('') + .addClass(options.wrapper.icon) + .addClass(options.wrapper.animation)) .click(function () { menu.toggleClass('fab-expand'); }); @@ -19,9 +22,11 @@ $.fn.fab = function (options) { menu.append(toggler); options.buttons.forEach(function (button) { + console.log(typeof button.disabled) toggler.before( - $('').addClass('fab-button fab-action') + $('').addClass(`fab-button fab-action${button.disabled == true ? ' disabled' : ''}`) .attr('data-label', button.label) + .attr('href', button.attrs.href) .attr('id', button.attrs.id) .append($('').addClass(button.icon)) .click(function () { @@ -32,7 +37,13 @@ $.fn.fab = function (options) { }; $(document).ready(function () { + $('#fab').fab({ + wrapper: { + icon: 'fas fa-plus', + position: 'right-bottom', + animation: 'rotate' + }, buttons: [ { icon: 'fas fa-upload', @@ -47,6 +58,28 @@ $(document).ready(function () { ] }); + $('#type-select').fab({ + wrapper: { + icon: 'fas fa-filter', + position: 'left-bottom', + animation: 'scale' + }, + buttons: [ + { + icon: 'fas fa-image', + label: lang['nav-type-image'], + attrs: {href: '?type=image'}, + disabled: default_parameters.type === 'image' ? true : false + }, + { + icon: 'fas fa-file', + label: lang['nav-type-file'], + attrs: {href: '?type=file'}, + disabled: default_parameters.type === 'file' ? true : false + } + ] + }); + actions.reverse().forEach(function (action) { $('#nav-buttons > ul').prepend( $('
  • ').addClass('nav-item').append( diff --git a/src/lang/az/lfm.php b/src/lang/az/lfm.php index 195e3d3f..767eb186 100644 --- a/src/lang/az/lfm.php +++ b/src/lang/az/lfm.php @@ -9,6 +9,8 @@ 'nav-sort' => 'Sırala', 'nav-sort-alphabetic'=> 'A-Z Sırala', 'nav-sort-time' => 'Zamana Görə Sırala', + 'nav-type-image' => 'şəkillər', + 'nav-type-file' => 'Qovluqlar', 'menu-rename' => 'Ad dəyişmək', 'menu-delete' => 'Sil', diff --git a/src/lang/en/lfm.php b/src/lang/en/lfm.php index fa5e8750..2b593aaa 100644 --- a/src/lang/en/lfm.php +++ b/src/lang/en/lfm.php @@ -9,6 +9,8 @@ 'nav-sort' => 'Sort', 'nav-sort-alphabetic'=> 'Sort By Alphabets', 'nav-sort-time' => 'Sort By Time', + 'nav-type-image' => 'Images', + 'nav-type-file' => 'Files', 'menu-rename' => 'Rename', 'menu-delete' => 'Delete', diff --git a/src/lang/tr/lfm.php b/src/lang/tr/lfm.php index 642e0e1f..3c87079c 100644 --- a/src/lang/tr/lfm.php +++ b/src/lang/tr/lfm.php @@ -9,6 +9,8 @@ 'nav-sort' => 'Sırala', 'nav-sort-alphabetic'=> 'A-Z Sırala', 'nav-sort-time' => 'Zamana Göre Sırala', + 'nav-type-image' => 'Resimler', + 'nav-type-file' => 'Dosyalar', 'menu-rename' => 'Ad değiştir', 'menu-delete' => 'Sil', diff --git a/src/views/index.blade.php b/src/views/index.blade.php index fb5ec441..58684a89 100644 --- a/src/views/index.blade.php +++ b/src/views/index.blade.php @@ -105,6 +105,7 @@
    +