branch develop updated (93cb532c -> 72e40f4a)
This is an automated email from the git hooks/post-receive script. New change to branch develop in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git from 93cb532c add docker job for develop new 72e40f4a refs #108 Carrouselle dans la popup de choix The 1 revisions listed above as "new" are entirely new to this repository and will be described in separate emails. The revisions listed as "adds" were already present in the repository and have only been added to this reference. Detailed log of new commits: commit 72e40f4af1dfa5a76215449b7c070177ff59bf2f Author: Kevin Morin <morin@codelutin.com> Date: Fri Aug 6 16:17:14 2021 +0200 refs #108 Carrouselle dans la popup de choix Summary of changes: .../src/main/web/tag/poll/ChoiceView.tag.html | 23 ++-- .../main/web/tag/popup/ChoiceDetailModal.tag.html | 149 +++++++++++++++++---- .../src/main/web/tag/popup/Modal.tag.html | 2 +- 3 files changed, 136 insertions(+), 38 deletions(-) -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
This is an automated email from the git hooks/post-receive script. New commit to branch develop in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit 72e40f4af1dfa5a76215449b7c070177ff59bf2f Author: Kevin Morin <morin@codelutin.com> Date: Fri Aug 6 16:17:14 2021 +0200 refs #108 Carrouselle dans la popup de choix --- .../src/main/web/tag/poll/ChoiceView.tag.html | 23 ++-- .../main/web/tag/popup/ChoiceDetailModal.tag.html | 149 +++++++++++++++++---- .../src/main/web/tag/popup/Modal.tag.html | 2 +- 3 files changed, 136 insertions(+), 38 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceView.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceView.tag.html index bd460b56..6aa0d212 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceView.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceView.tag.html @@ -22,7 +22,8 @@ import "./Report.tag.html"; import "../components/MultiLineLabel.tag.html"; <ChoiceView> <div class="choice-view {center-choice : opts.center} - {with-info : opts.choice.choiceType === 'RESOURCE' || opts.choice.description && !opts.showdescription}" + {with-info : opts.choice.description && !opts.showdescription} + {with-resource : opts.choice.choiceType === 'RESOURCE'}" onclick={openModalImage} title={standardTooltip()}> <span class="choice-text" @@ -37,13 +38,12 @@ import "../components/MultiLineLabel.tag.html"; if={opts.choice.choiceType === "DATETIME"}> {formatDate(parseInt(opts.choice.choiceValue, 10), "L LT")} </span> - <div class="choice-ressource" - if={opts.choice.choiceType === "RESOURCE" && meta && isImage()}> - <img class="image-preview" src="{resourceService.getPreviewUrl(opts.choice.choiceValue)}" alt="_t.imagePreview"/> - </div> - <div class="choice-ressource" - if={opts.choice.choiceType === "RESOURCE" && meta && !isImage()}> - {meta.name} + <div if={opts.choice.choiceType === "RESOURCE" && meta} class="choice-ressource"> + <img if={isImage()} + class="image-preview" + src="{resourceService.getPreviewUrl(opts.choice.choiceValue)}" + alt="_t.imagePreview" /> + <span if={!isImage()}>{meta.name}</span> </div> <div if={opts.choice.choiceType === "RESOURCE" || opts.choice.description && !opts.showdescription} class="info-label"> <i class="fa fa-question-circle" aria-hidden="true"></i> @@ -62,7 +62,6 @@ import "../components/MultiLineLabel.tag.html"; this.session = session; this.resourceService = resourceService; this.installBundle(this.session, "choice"); - this.showModalImage = false; if (this.opts.choice.choiceType === "RESOURCE") { this.resourceService.getMeta(this.opts.choice.choiceValue).then(meta => { @@ -80,7 +79,7 @@ import "../components/MultiLineLabel.tag.html"; }; this.openModalImage = () => { - if (this.opts.choice.description && !this.opts.showdescription || this.opts.choice.choiceType === "RESOURCE") { + if (this.opts.choice.choiceType === "RESOURCE") { this.bus.trigger("openChoiceDetail", this.opts.choice, this.meta); } }; @@ -114,6 +113,10 @@ import "../components/MultiLineLabel.tag.html"; } .choice-view.with-info { + cursor: help; + } + + .choice-view.with-resource { cursor: pointer; } diff --git a/pollen-ui-riot-js/src/main/web/tag/popup/ChoiceDetailModal.tag.html b/pollen-ui-riot-js/src/main/web/tag/popup/ChoiceDetailModal.tag.html index ce977982..0f9c512a 100644 --- a/pollen-ui-riot-js/src/main/web/tag/popup/ChoiceDetailModal.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/popup/ChoiceDetailModal.tag.html @@ -23,19 +23,43 @@ import "../components/MultiLineLabel.tag.html"; <Modal header={title} ref="modal" only-ok="true"> - <div if={parent.choice && parent.choice.choiceType === "RESOURCE" && parent.meta}> - <img if={parent.isImage()} - class="image-preview" - src="{parent.session.configuration.endPoint}/v1/resources/{parent.choice.choiceValue}" - alt="_t.imagePreview"/> - <a class="c-button c-button--info" - if={!parent.isImage()} - href="{parent.session.configuration.endPoint}/v1/resources/{parent.choice.choiceValue}/download" - target="_blank"> - <i class="fa fa-download" aria-hidden="true"></i> - {parent._t.download} + + <div if={parent.choice && parent.choice.choiceType === "RESOURCE" && parent.meta} class="resource-container"> + <a if={parent.resourceChoices.length > 1} + class="carousel-button" + onclick="{parent.previousResource}"> + <i class="fa fa-chevron-circle-left" aria-hidden="true"></i> + </a> + <div class="resource-viewport"> + <a if={parent.isImage()} + show={!parent.loading} + href="{parent.session.configuration.endPoint}/v1/resources/{parent.choice.choiceValue}" + target="_blank"> + <img src="{parent.session.configuration.endPoint}/v1/resources/{parent.choice.choiceValue}" + class="image-preview" + onLoad="{parent.imageLoaded}" + alt="_t.imagePreview"/> + </a> + <div if={!parent.isImage()} + class="not-image-resource"> + <a class="c-button c-button--info" + href="{parent.session.configuration.endPoint}/v1/resources/{parent.choice.choiceValue}/download" + target="_blank"> + <i class="fa fa-download" aria-hidden="true"></i> {parent._t.download} + </a> + ({parent.getFileSize()}) + </div> + <div if={parent.loading} class="spinner"> + <i class="fa fa-spinner fa-pulse" aria-hidden="true"></i> + </div> + </div> + <a if={parent.resourceChoices.length > 1} + class="carousel-button" + onclick="{parent.nextResource}"> + <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> </a> </div> + <MultiLineLabel label="{parent.choice && parent.choice.description}"></MultiLineLabel> </Modal> @@ -46,39 +70,110 @@ import "../components/MultiLineLabel.tag.html"; this.session = session; this.resourceService = resourceService; this.installBundle(this.session, "choice"); + this.resourceChoices = []; + this.loading = false; + + this.onPollChange = poll => { + this.resourceChoices = poll.questions[0].choices.filter(choice => choice.choiceType === "RESOURCE"); + }; + + this.imageLoaded = () => { + console.log("image loaded"); + this.loading = false; + this.update(); + }; this.open = (choice, meta) => { + this.loading = this.isImage(meta) && this.choice != choice; this.choice = choice; this.meta = meta; - if (this.choice.choiceType === "TEXT") { - this.title = this.choice.choiceValue; - } else if (this.choice.choiceType === "DATE") { - this.title = this.formatDate(parseInt(this.choice.choiceValue, 10), "LLL"); - } else if (this.choice.choiceType === "DATETIME") { - this.title = this.formatDate(parseInt(this.choice.choiceValue, 10)); - } else if (this.choice.choiceType === "RESOURCE") { - this.title = this.meta && this.meta.name; - } - let promise = this.refs.modal.open().then(() => { - this.update(); - }, () => {}); + this.title = this.meta && this.meta.name; + let promise = this.refs.modal.open().then(this.update, () => {}); this.update(); return promise; }; + this.nextResource = () => { + let choiceIndex = this.resourceChoices.indexOf(this.choice); + this.setResource((choiceIndex + 1) % this.resourceChoices.length); + }; + + this.previousResource = () => { + let choiceIndex = this.resourceChoices.indexOf(this.choice); + this.setResource((this.resourceChoices.length + choiceIndex - 1) % this.resourceChoices.length); + }; - this.isImage = () => { - return this.meta.contentType.match(/^image\//i); + this.setResource = index => { + this.loading = true; + this.choice = this.resourceChoices[index]; + this.resourceService.getMeta(this.choice.choiceValue).then(meta => { + this.meta = meta; + this.loading &= this.isImage(); + this.title = this.meta && this.meta.name; + this.update(); + }); + }; + + this.isImage = meta => { + if (!meta) { + meta = this.meta; + } + return meta.contentType.match(/^image\//i); + }; + + this.getFileSize = () => { + let size = this.meta.size; + let unit = "o"; + if (size >= 1024) { + size = size / 1024; + unit = "ko"; + + if (size >= 1024) { + size = size / 1024; + unit = "Mo"; + } + } + return Math.round(size) + " " + unit; }; this.listen("openChoiceDetail", this.open); + this.listen("poll", this.onPollChange); </script> <style> - .modal-image img { + .resource-container { + display: flex; + align-items: center; + } + + .resource-viewport { + flex-grow: 1; + text-align: center; + } + + .image-preview { max-width: 100%; - max-height:100%; + max-height: calc(90vh - 100px); + padding: 10px; + cursor: zoom-in; + } + + .not-image-resource { + display: flex; + justify-content: center; + align-items: center; + padding: 10px; + } + + .carousel-button { + font-size: 50px; + flex-flow: column; + } + + .spinner { + margin: 5px 0; + font-size: 5.5em; } </style> diff --git a/pollen-ui-riot-js/src/main/web/tag/popup/Modal.tag.html b/pollen-ui-riot-js/src/main/web/tag/popup/Modal.tag.html index 1b97185e..f9c260b7 100644 --- a/pollen-ui-riot-js/src/main/web/tag/popup/Modal.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/popup/Modal.tag.html @@ -109,7 +109,7 @@ import "../components/HumanInput.tag.html"; .c-card { display:flex; flex-direction: column; - max-height: 500px; + max-height: 90vh; } .c-card__body { -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
participants (1)
-
chorem.org scm