From 3d416f51fd033b5bd3e62a0975402f94d613913f Mon Sep 17 00:00:00 2001 From: soufiane Date: Fri, 30 Jun 2023 19:13:47 +0200 Subject: [PATCH] wip #6066 @7:30 --- public/images/icons/icon-arrow-down.svg | 3 + public/images/icons/icon-cd-usb.svg | 6 + public/images/icons/icon-download-version.svg | 8 ++ public/images/icons/icon-instruction.svg | 7 ++ public/images/icons/icon-lms-scorm.svg | 11 ++ public/images/icons/icon-mac-app.svg | 11 ++ public/images/icons/icon-sharepoint.svg | 18 +++ public/images/icons/icon-standard-server.svg | 13 ++ public/images/icons/icon-windows-app.svg | 6 + .../fluidbook/toolbox/css/delivery.css | 91 ++++++++++++++ .../fluidbook/toolbox/css/delivery.css.map | 2 +- .../fluidbook/toolbox/css/delivery.less | 110 ++++++++++++++++ .../fluidbook_publication/delivery.blade.php | 118 +++++++++++++++++- 13 files changed, 400 insertions(+), 4 deletions(-) create mode 100644 public/images/icons/icon-arrow-down.svg create mode 100644 public/images/icons/icon-cd-usb.svg create mode 100644 public/images/icons/icon-download-version.svg create mode 100644 public/images/icons/icon-instruction.svg create mode 100644 public/images/icons/icon-lms-scorm.svg create mode 100644 public/images/icons/icon-mac-app.svg create mode 100644 public/images/icons/icon-sharepoint.svg create mode 100644 public/images/icons/icon-standard-server.svg create mode 100644 public/images/icons/icon-windows-app.svg diff --git a/public/images/icons/icon-arrow-down.svg b/public/images/icons/icon-arrow-down.svg new file mode 100644 index 000000000..9c35abbb1 --- /dev/null +++ b/public/images/icons/icon-arrow-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/icons/icon-cd-usb.svg b/public/images/icons/icon-cd-usb.svg new file mode 100644 index 000000000..d5ab4dbaf --- /dev/null +++ b/public/images/icons/icon-cd-usb.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/images/icons/icon-download-version.svg b/public/images/icons/icon-download-version.svg new file mode 100644 index 000000000..bab6f8832 --- /dev/null +++ b/public/images/icons/icon-download-version.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/images/icons/icon-instruction.svg b/public/images/icons/icon-instruction.svg new file mode 100644 index 000000000..154609413 --- /dev/null +++ b/public/images/icons/icon-instruction.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/images/icons/icon-lms-scorm.svg b/public/images/icons/icon-lms-scorm.svg new file mode 100644 index 000000000..4e3969cac --- /dev/null +++ b/public/images/icons/icon-lms-scorm.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/images/icons/icon-mac-app.svg b/public/images/icons/icon-mac-app.svg new file mode 100644 index 000000000..5e11144e5 --- /dev/null +++ b/public/images/icons/icon-mac-app.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/images/icons/icon-sharepoint.svg b/public/images/icons/icon-sharepoint.svg new file mode 100644 index 000000000..a254a59d6 --- /dev/null +++ b/public/images/icons/icon-sharepoint.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/icon-standard-server.svg b/public/images/icons/icon-standard-server.svg new file mode 100644 index 000000000..4a4de71cc --- /dev/null +++ b/public/images/icons/icon-standard-server.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/images/icons/icon-windows-app.svg b/public/images/icons/icon-windows-app.svg new file mode 100644 index 000000000..86635fc36 --- /dev/null +++ b/public/images/icons/icon-windows-app.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/packages/fluidbook/toolbox/css/delivery.css b/public/packages/fluidbook/toolbox/css/delivery.css index 1c5c6547f..2c61c3c91 100644 --- a/public/packages/fluidbook/toolbox/css/delivery.css +++ b/public/packages/fluidbook/toolbox/css/delivery.css @@ -52,6 +52,10 @@ body { justify-content: center; align-items: center; flex-direction: column; + transition: all 0.3s; +} +.delivery-glimpses .block:hover { + background-color: #467fcf; } .delivery-glimpses .preview-block { border: 1px solid rgba(70, 127, 207, 0.2); @@ -134,8 +138,95 @@ body { } .delivery-preview-mini iframe { width: 100%; + height: 195px; border: 0; } +.delivery-dropdown { + max-height: 42px; + height: auto; + transition: all 1s; + overflow: hidden; +} +.delivery-dropdown.active { + max-height: calc(42px + var(--dropdown-content-height) + 1.25rem); +} +.delivery-dropdown.active .dropdown-control img { + transform: rotate(180deg); +} +.delivery-dropdown.active .dropdown-content { + opacity: 1; + visibility: visible; +} +.delivery-dropdown .dropdown-element:hover.active { + background-color: #467FCF; + color: #ffffff; +} +.delivery-dropdown .dropdown-element:hover.active .icon svg * { + fill: #ffffff; +} +.delivery-dropdown .dropdown-element:hover.active .tools .download rect { + fill: #ffffff; +} +.delivery-dropdown .dropdown-element:hover.active .tools .download g * { + stroke: #467FCF; +} +.delivery-dropdown .dropdown-control { + padding: 8px 12px; + border-radius: 4px; + border: 1px solid rgba(0, 40, 122, 0.12); + cursor: pointer; +} +.delivery-dropdown .dropdown-content { + opacity: 0; + visibility: hidden; + transition: opacity 0.5s; + transition-delay: 0.1s; +} +.delivery-dropdown .dropdown-element { + padding: 12px 16px; + border: 1px solid; + border-radius: 4px; +} +.delivery-dropdown .dropdown-element:first-of-type { + margin-top: 20px; +} +.delivery-dropdown .dropdown-element:last-of-type { + margin-bottom: 30px; +} +.delivery-dropdown .dropdown-element:not(:last-of-type) { + margin-bottom: 8px; +} +.delivery-dropdown .dropdown-element.active { + color: #467FCF; + transition: all 0.3s; +} +.delivery-dropdown .dropdown-element:not(.active) { + color: rgba(27, 42, 78, 0.2); + background-color: #F0F3F9; + border-color: #F0F3F9; + pointer-events: none; +} +.delivery-dropdown .dropdown-element:not(.active) .icon svg * { + fill: rgba(27, 42, 78, 0.2); +} +.delivery-dropdown .dropdown-element p { + font-size: 14px; +} +.delivery-dropdown .dropdown-element .icon { + margin-right: 16px; +} +.delivery-dropdown .dropdown-element .tools .instruction circle { + fill: rgba(236, 242, 250, 0.32); +} +.delivery-dropdown .dropdown-element .tools .instruction:hover circle { + fill: var(--dark); +} +.delivery-dropdown .dropdown-element .tools .instruction:hover g * { + stroke: var(--white); +} +.btn-install { + margin-bottom: 40px; +} .featherlight-close { top: 30px; right: 30px; diff --git a/public/packages/fluidbook/toolbox/css/delivery.css.map b/public/packages/fluidbook/toolbox/css/delivery.css.map index eccadecf6..5ab3bd18e 100644 --- a/public/packages/fluidbook/toolbox/css/delivery.css.map +++ b/public/packages/fluidbook/toolbox/css/delivery.css.map @@ -1 +1 @@ -{"version":3,"sources":["delivery.less"],"names":[],"mappings":"AAAA;AAAK;EACD,uBAAA;;AAGJ;EACI,qBAAA;;AAGJ,OAAQ;EACJ,iBAAA;;AAGJ;EACI,aAAA;;AACA,OAAC;EACG,4BAA4B,uBAA5B;;AAIR;EACI,QAAA;;AAGJ;EACI,gBAAA;;AAGJ,aAAc;EACV,wCAAA;EACA,sBAAA;EACA,YAAA;EACA,oBAAA;EACA,sBAAA;EACA,kBAAA;EACA,4BAAA;;AAIA,SAAC;EACG,mBAAA;;AADJ,SAAC,OAEG,GAAE,IAAI;EACF,cAAc,kBAAd;;AAHR,SAAC,OAKG,GAAE;EACE,YAAA;EACA,oBAAA;;AAPR,SAAC,OASG;EACI,OAAO,WAAP;;AAGR,SAAC;EACG,mBAAA;;AADJ,SAAC,SAEG;EACI,0CAAA;EACA,aAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,sBAAA;;AARR,SAAC,SAUG;EACI,yCAAA;EACA,kBAAA;EACA,gBAAA;;AAbR,SAAC,SAeG;EACI,WAAA;EACA,gBAAA;;AAjBR,SAAC,SAmBG;EACI,WAAA;EACA,gBAAA;;AArBR,SAAC,SAuBG;EACI,eAAA;;AAxBR,SAAC,SA0BG;EACI,kBAAA;;AAGR,SAAC;EACG,gBAAA;EACA,WAAA;EACA,iBAAA;EACA,gBAAA;EACA,SAAA;EACA,wBAAA;EACA,aAAA;;AACA,SARH,aAQI;EACG,cAAA;;AATR,SAAC,aAWG;EACI,aAAA;EACA,kBAAkB,WAAlB;EACA,kBAAA;EACA,mBAAA;EACA,kBAAA;;AAGR,SAAC;EACG,yCAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;;AACA,SALH,QAKI;EACG,yBAAA;;AADJ,SALH,QAKI,iBAEG;EACI,2BAAA;;AAHR,SALH,QAKI,iBAKG;EACI,4BAAA;;AAXZ,SAAC,QAcG;EACI,WAAA;EACA,WAAA;EACA,aAAA;EACA,kBAAA;EACA,QAAA;;AAnBR,SAAC,QAqBG;EACI,kBAAA;EACA,eAAA;EACA,cAAA;;AAIR,SAAC;EACG,aAAA;EACA,gBAAA;EACA,kBAAA;;AAHJ,SAAC,aAIG;EACI,WAAA;EACA,YAAA;EACA,kBAAA;EACA,mBAAA;EACA,SAAA;EACA,QAAA;EACA,WAAW,qBAAX;;AAIR,SAAC,aACG;EACI,WAAA;EACA,SAAA;;AAKZ;EACI,SAAA;EACA,WAAA;EACA,WAAA;EACA,YAAA;EACA,qBAAA;EACA,kBAAA;;AAGJ;EACI,aAAa,eAAe,6BAA5B;EACA,aAAa,cAAe,2BAA5B;EACA,YAAY,eAAe,6BAA3B;EACA,WAAW,YAAe,uBAA1B;EACA,WAAW,cAAe,2BAA1B;EACA,WAAW,YAAe,uBAA1B;EACA,YAAY,YAAe,uBAA3B;EACA,aAAa,YAAe,uBAA5B;EACA,aAAa,YAAe,uBAA5B;EACA,aAAa,eAAe,6BAA5B;;EAGA,iBAAiB,eAAe,8BAAhC;EACA,gBAAgB,cAAe,gCAA/B;EACA,cAAc,eAAe,4BAA7B;EACA,aAAa,YAAe,6BAA5B;EACA,aAAa,cAAe,2BAA5B;EACA,cAAc,YAAe,yBAA7B;EACA,gBAAgB,YAAe,yBAA/B;EACA,iBAAiB,YAAe,yBAAhC;;EAGA,eAAe,YAAe,gCAA9B","file":"delivery.css"} \ No newline at end of file +{"version":3,"sources":["delivery.less"],"names":[],"mappings":"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","file":"delivery.css"} \ No newline at end of file diff --git a/public/packages/fluidbook/toolbox/css/delivery.less b/public/packages/fluidbook/toolbox/css/delivery.less index f41b257c6..83faf8970 100644 --- a/public/packages/fluidbook/toolbox/css/delivery.less +++ b/public/packages/fluidbook/toolbox/css/delivery.less @@ -58,6 +58,10 @@ html,body { justify-content: center; align-items: center; flex-direction: column; + transition: all .3s; + &:hover { + background-color: rgba(70, 127, 207, 1); + } } .preview-block { border: 1px solid rgba(70,127,207,.2); @@ -144,9 +148,115 @@ html,body { &-preview-mini { iframe { width: 100%; + height: 195px; border: 0; } } + + &-dropdown { + max-height: 42px; + height: auto; + transition: all 1s; + overflow: hidden; + &.active { + max-height: calc(42px + var(--dropdown-content-height) + 1.25rem); + .dropdown { + &-control img { + transform: rotate(180deg); + } + &-content { + opacity: 1; + visibility: visible; + } + } + .tools .download { + + } + + } + .dropdown-element:hover.active { + background-color: #467FCF; + color: #ffffff; + .icon svg * { + fill: #ffffff; + } + .tools .download { + rect { + fill: #ffffff; + } + g * { + stroke: #467FCF; + } + } + } + .dropdown { + &-control { + padding: 8px 12px; + border-radius: 4px; + border: 1px solid rgba(0,40,122,.12); + cursor: pointer; + } + &-content { + opacity: 0; + visibility: hidden; + transition: opacity .5s; + transition-delay: .1s; + } + &-element { + padding: 12px 16px; + border: 1px solid; + border-radius: 4px; + &:first-of-type { + margin-top: 20px; + } + &:last-of-type { + margin-bottom: 30px; + } + &:not(:last-of-type) { + margin-bottom: 8px; + } + &.active { + color: #467FCF; + transition: all .3s; + } + &:not(.active) { + color: rgba(27,42,78,.2); + background-color: #F0F3F9; + border-color: #F0F3F9; + pointer-events: none; + .icon svg * { + fill: rgba(27,42,78,.2); + } + } + p { + font-size: 14px; + } + .icon { + margin-right: 16px; + } + .tools { + .instruction { + circle { + fill: rgba(236, 242, 250, .32) + } + &:hover { + circle { + fill: var(--dark); + } + g * { + stroke: var(--white); + } + } + } + + } + } + } + } +} + +.btn-install { + margin-bottom: 40px; } .featherlight-close { diff --git a/resources/views/fluidbook_publication/delivery.blade.php b/resources/views/fluidbook_publication/delivery.blade.php index e4c122a6b..4f7862909 100644 --- a/resources/views/fluidbook_publication/delivery.blade.php +++ b/resources/views/fluidbook_publication/delivery.blade.php @@ -66,8 +66,44 @@ if($fluidbook->facebook_image) $socialImage = $fluidbook->facebook_image; - dump($fluidbook->getDownloadVersions()); - dump($fluidbook->download_online) + $installServerUrl = null; + if($fluidbook->install_online) { + $serverId = intval($fluidbook->install_online['server']); + $serverPath = $fluidbook->install_online['path']; + $servers=\App\Models\FluidbookExternalInstallServer::getAllServers(); + $serverInfos = $servers[$serverId]; + $baseUrl = $serverInfos['base_url']; + $installServerUrl = $baseUrl.$serverPath; + } + + $downloadVersions = $fluidbook->getDownloadVersions(); + + foreach ($downloadVersions as $key => $version) { + if($key === "online") { + $downloadVersions[$key]['text'] = __("Standard"); + $downloadVersions[$key]['type'] = __("(serveur web)"); + $downloadVersions[$key]['icon'] = file_get_contents(url('images/icons/icon-standard-server.svg')); + }elseif ($key === "scorm") { + $downloadVersions[$key]['text'] = __("LMS Scorm"); + $downloadVersions[$key]['type'] = __("(LMS / SCORM)"); + $downloadVersions[$key]['icon'] = file_get_contents(url('images/icons/icon-lms-scorm.svg')); + }elseif ($key === "sharepoint") { + $downloadVersions[$key]['text'] = __("SharePoint"); + $downloadVersions[$key]['icon'] = file_get_contents(url('images/icons/icon-sharepoint.svg')); + }elseif ($key === "mac_exe_html") { + $downloadVersions[$key]['text'] = __("Version Offline"); + $downloadVersions[$key]['type'] = __("(Mac App)"); + $downloadVersions[$key]['icon'] = file_get_contents(url('images/icons/icon-mac-app.svg')); + }elseif ($key === "win_ins_html") { + $downloadVersions[$key]['text'] = __("Version Offline"); + $downloadVersions[$key]['type'] = __("(Windows App)"); + $downloadVersions[$key]['icon'] = file_get_contents(url('images/icons/icon-windows-app.svg')); + }elseif ($key === "win_cd_html") { + $downloadVersions[$key]['text'] = __("Version Offline"); + $downloadVersions[$key]['type'] = __("(CD-ROM / Clé USB)"); + $downloadVersions[$key]['icon'] = file_get_contents(url('images/icons/icon-cd-usb.svg')); + } + } @endphp @section('after_styles') @@ -313,10 +349,86 @@

Publiez votre Fluidbook

L’adresse d’hébergement a déjà été configurée, vous pouvez mettre votre Fluidbook directement en ligne en cliquant ci-dessous :

- Installer sur le serveur d’hébergement + + Installer sur le serveur d’hébergement + +
+ + +
@endif @endsection + +@push('after_scripts') + +@endpush -- 2.39.5