Skip to content

Commit

Permalink
Unified attachment list #1608
Browse files Browse the repository at this point in the history 
Squashed commit of the following:

commit dedc9e5
Author: mekkyz <[email protected]>
Date:   Fri Dec 8 08:31:23 2023 +0000

    Fix: rspec test

commit b0d2c58
Author: mekkyz <[email protected]>
Date:   Fri Dec 8 07:34:50 2023 +0000

    Fix: spec test

commit d7b683b
Author: mekkyz <[email protected]>
Date:   Fri Dec 8 07:08:38 2023 +0000

    Fix: show full attachment name on hover

commit b2ac3c3
Author: mekkyz <[email protected]>
Date:   Fri Dec 8 06:47:44 2023 +0000

    Enhance: hide sorting ui if no attachments

commit 56b08b2
Author: mekkyz <[email protected]>
Date:   Fri Dec 8 06:41:41 2023 +0000

    Fix: invalid date

commit 6599121
Author: mekkyz <[email protected]>
Date:   Fri Dec 8 06:23:58 2023 +0000

    Removed discard btn for 1.9.0

commit ae61144
Author: mekkyz <[email protected]>
Date:   Fri Dec 8 06:21:14 2023 +0000

    Enhance: strike attachment name when deleted

commit 8e532e1
Author: mekkyz <[email protected]>
Date:   Fri Dec 8 06:06:33 2023 +0000

    Fix: uploaded attachment not showing

commit 8a391de
Author: mekkyz <[email protected]>
Date:   Fri Dec 8 04:35:23 2023 +0000

    Fix: issues adapting new attach ls to datasets

commit 03624ae
Author: mekkyz <[email protected]>
Date:   Fri Dec 8 02:43:15 2023 +0000

    Refactor: changing bad child name

commit b69691c
Author: mekkyz <[email protected]>
Date:   Fri Dec 8 00:54:13 2023 +0000

    Fix: eslint and Hyperlinks UI

commit 7648505
Author: mekkyz <[email protected]>
Date:   Fri Dec 8 00:29:03 2023 +0000

    Fix: eslint

commit 72fa89f
Author: mekkyz <[email protected]>
Date:   Thu Dec 7 11:37:08 2023 +0000

    Applying feedback and adding dynamic tooltips

commit bc90f97
Author: mekkyz <[email protected]>
Date:   Thu Nov 30 12:06:27 2023 +0000

    Fix: rspec

commit a5cab78
Author: mekkyz <[email protected]>
Date:   Thu Nov 30 11:27:16 2023 +0000

    Fix: rspec

commit 9e00dac
Author: mekkyz <[email protected]>
Date:   Thu Nov 30 11:20:27 2023 +0000

    Feat: applying new attachment list to Datasets

commit 5037933
Author: mekkyz <[email protected]>
Date:   Tue Nov 28 16:07:05 2023 +0000

    Fix: instant update after dropping attachment

commit d5c945a
Author: mekkyz <[email protected]>
Date:   Tue Nov 28 13:08:07 2023 +0000

    Fix: image warning css changes

commit 39c2f6a
Author: mekkyz <[email protected]>
Date:   Tue Nov 28 12:11:03 2023 +0000

    Fix: annotating wellplate attachments

commit d70934a
Author: mekkyz <[email protected]>
Date:   Tue Nov 28 12:03:16 2023 +0000

    Fix: eslint

commit 92b3b18
Author: mekkyz <[email protected]>
Date:   Mon Nov 27 14:39:02 2023 +0000

    Refactor: renaming const for better readability

commit cbcc809
Author: mekkyz <[email protected]>
Date:   Mon Nov 27 01:14:51 2023 +0000

    Fix: eslint

commit ad1adbd
Author: mekkyz <[email protected]>
Date:   Tue Nov 21 15:03:18 2023 +0000

    Fix: not importing as element data

commit 7f6181e
Author: mekkyz <[email protected]>
Date:   Fri Nov 17 18:54:15 2023 +0000

    Fix: eslint

commit 563696e
Author: mekkyz <[email protected]>
Date:   Fri Nov 17 17:27:30 2023 +0000

    Fix: eslint

commit d86a7de
Author: mekkyz <[email protected]>
Date:   Thu Nov 16 16:28:01 2023 +0000

    Fix: adapting two tests and deleting obsolete test

commit 03a2ef4
Author: mekkyz <[email protected]>
Date:   Thu Nov 16 16:16:28 2023 +0000

    Refactor: wellplate to use the new attachment list

commit 571e6d5
Author: mekkyz <[email protected]>
Date:   Thu Nov 16 11:15:16 2023 +0000

    Fix: eslint

commit 84719d9
Author: mekkyz <[email protected]>
Date:   Thu Nov 16 11:13:59 2023 +0000

    Style: adjusting time format

commit 40cf029
Author: mekkyz <[email protected]>
Date:   Wed Nov 15 22:51:14 2023 +0000

    Enhancing UI

commit 70bdf22
Author: mekkyz <[email protected]>
Date:   Wed Nov 15 22:09:29 2023 +0000

    Feat: adding option to sort by upload date

commit 9a22083
Author: mekkyz <[email protected]>
Date:   Wed Nov 15 22:03:38 2023 +0000

    Fix: correct file sizes with correct units

commit 99c7201
Author: mekkyz <[email protected]>
Date:   Wed Nov 15 21:37:07 2023 +0000

    Style: eslint fixes and css enhancements

commit 844cfc0
Author: mekkyz <[email protected]>
Date:   Wed Nov 15 20:18:11 2023 +0000

    Refactor: introducing AttachmentList.js

commit 437635b
Author: mekkyz <[email protected]>
Date:   Wed Nov 15 20:17:12 2023 +0000

    Fix: adjusting to the new file name

commit 351bb33
Author: mekkyz <[email protected]>
Date:   Wed Nov 15 19:58:20 2023 +0000

    Style: unifying edited image warning text

commit 374772c
Author: mekkyz <[email protected]>
Date:   Wed Nov 15 15:07:05 2023 +0000

    Style: remove redundant name field

commit c50c534
Author: mekkyz <[email protected]>
Date:   Wed Nov 15 15:06:34 2023 +0000

    Fix: ensure consistent title name editing

commit bf61de7
Author: mekkyz <[email protected]>
Date:   Wed Nov 15 10:33:44 2023 +0000

    Fix: eslint

commit 0bc248e
Author: mekkyz <[email protected]>
Date:   Wed Nov 15 10:16:20 2023 +0000

    Style: converting inline styles to scss

commit 4da8aef
Author: mekkyz <[email protected]>
Date:   Wed Nov 15 09:18:02 2023 +0000

    Fix: added on "date"

commit 613b94f
Author: mekkyz <[email protected]>
Date:   Wed Nov 15 08:59:51 2023 +0000

    UI changes and minor eslint fixes

commit 5494068
Author: mekkyz <[email protected]>
Date:   Thu Nov 9 15:31:15 2023 +0000

    Fix: dataset modal discarding logic

commit 94d708b
Author: mekkyz <[email protected]>
Date:   Thu Nov 9 11:34:45 2023 +0000

    Style: cleaner code and linking to new css classes

commit 8a69e5b
Author: mekkyz <[email protected]>
Date:   Thu Nov 9 11:34:06 2023 +0000

    Fix: enhance UI and linking to new css classes

commit 3c84770
Author: mekkyz <[email protected]>
Date:   Thu Nov 9 11:33:04 2023 +0000

    Fix: better styling (Annotation & Attachments)

commit 559d5c4
Author: mekkyz <[email protected]>
Date:   Wed Nov 8 11:07:53 2023 +0000

    Fix: ignore `.peak` when grouping

commit ad26b9c
Author: mekkyz <[email protected]>
Date:   Mon Nov 6 14:09:51 2023 +0000

    Feat: introducing attachment grouping

commit 28d79f0
Author: mekkyz <[email protected]>
Date:   Fri Nov 3 15:41:51 2023 +0000

    Fix: test error

commit e0b56fd
Author: mekkyz <[email protected]>
Date:   Fri Nov 3 15:29:39 2023 +0000

    fix: discard and keep changes

commit 6c3ef9c
Author: mekkyz <[email protected]>
Date:   Fri Nov 3 06:56:54 2023 +0000

    Feature: Dataset Modal Redesign

commit 918d129
Author: mekkyz <[email protected]>
Date:   Tue Oct 31 14:21:14 2023 +0000

    Fix: eslint errors

commit 764fbc1
Author: mekkyz <[email protected]>
Date:   Mon Oct 30 05:25:34 2023 +0000

    UI: enhancing attachment list

commit b914b9a
Author: mekkyz <[email protected]>
Date:   Mon Oct 30 05:24:53 2023 +0000

    Style: enabling style prop on component

commit b8cde52
Author: TasnimMehzabin <[email protected]>
Date:   Thu Dec 7 08:46:27 2023 +0100

    test: fix test with deviceBox sorting in inbox

    Co-authored-by: Tasnim Mehzabin <[email protected]>

    Refs: #1657 , #1446
  • Loading branch information
@PiTrem
PiTrem committed Dec 8, 2023
1 parent b137553 commit fbbc50e
Show file tree
Hide file tree
Showing 33 changed files with 2,847 additions and 1,971 deletions.
137 changes: 137 additions & 0 deletions app/assets/stylesheets/attachment-list.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
.attachment-dropzone {
width: 100%;
padding: 20px;
border: 4px dashed #cccccc;
text-align: center;
margin-bottom: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0px 2px 4px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}

.attachment-dropzone:hover {
border-color: #a0a0a0;
box-shadow: 0px 4px 8px rgba(0,0,0,0.15);
}

.sorting-row-style {
padding: 5px;
border-radius: 5px;
border: 1px solid #ccc;
height: 35px;
}

.sort-icon-style {
margin-left: 5px;
cursor: auto;
font-size: 20px !important;
color: #000;
border-radius: 50%;
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s;
background: none !important;
border: none !important;
outline: inherit !important;
}

.sort-icon-style:focus {
box-shadow: none !important;
}

.sort-icon-style:hover {
color: #797979 !important;
transform: scale(1.1);
transition: color 0.3s, transform 0.3s
}

.attachment-row {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 5px;
padding: 5px;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease, transform 0.2s ease-out;
transform-origin: center;
position: relative;
}

.attachment-row:hover {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

.attachment-row-image {
flex: 0.1;
margin-left: 5px;
display: flex;
justify-content: center;
align-items: center;
}

.attachment-row-text {
flex: 0.5;
margin-left: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
font-size: 16px;
font-weight: bold;
}

.attachment-row-subtext {
font-size: 12px;
color: #777;
}

.attachment-row-size {
flex: 0.2;
display: flex;
align-items: center;
justify-content: center;
color: #777;
margin-left: 10px;
}

.attachment-row-actions {
flex: 0.4;
display: flex;
margin-right: 5px;
justify-content: flex-end;
}

.attachment-image-modal {
width: 50px;
height: 50px;
border-radius: 5px;
object-fit: cover;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.attachment-button-size {
width: 30px !important;
height: 30px !important;
}

.attachment-gray-button {
background-color: #c0c0c0 !important;
border-color: #c0c0c0 !important;
}

.attachment-main-container {
padding: 20px;
background-color: #ffffff;
border-radius: 5px;
}

.no-attachments-text {
text-align: center;
font-size: 16px;
color: #888;
}
59 changes: 43 additions & 16 deletions app/assets/stylesheets/format-container.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,32 +7,59 @@
max-height: calc(100vh - 250px);
}

.attachment-dataset-modal {
.attachment-annotation-modal {
height: 95%;
top: 52% !important;
margin: unset !important;
width: calc(80vw) !important;
.modal-content {
height: 95%;
.modal-header .modal-title .btn-toolbar {
float: right;
.modal-title{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.modal-body {
height: 90%;
overflow: auto;
.row {
height: 100%;
.col-base .desc {
min-height: 200px;
}
.col-full {
// height: 100%;
.list {
overflow: auto;
max-height: calc(100% - 70px) !important;
}
}
}
max-height: calc(100% - 130px) !important;
}
}
}

.attachment-modal {
top: 55% !important;
height: 90%;
margin: unset !important;
width: 50vw !important;
.modal-content {
height: 90%;
.modal-title{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.modal-body {
height: 90%;
overflow: auto;
max-height: calc(100% - 170px) !important;
}
}
}

.attachment-name-input-div {
display: flex;
flex-grow: 1;
align-items: center;
}

.attachment-name-input {
font-weight: bold;
color: #495057;
width: 100%;
border: none;
border-bottom: 1px solid #ccc;
padding: 2px 0;
}
33 changes: 23 additions & 10 deletions app/assets/stylesheets/research-plan.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,20 +164,33 @@
}
}

.research-plan-attachments-annotation-download{
button{
.research-plan-attachments-annotation-download{
button{
margin-right: 10px;
}
}
}
}

.imageEditedWarning{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
white-space: nowrap;

div{
background-color: rgba(252, 252, 138, 0.952);
border-color: #d0d0d0;
color: rgba(102, 102, 60, 0.95);
margin-top: 3px;
}
}
background-color: #ffcc00;
border: 1px solid #d0d0d0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
color: #333;
padding: 10px;
margin: 0;
border-radius: 4px;
transition: all 0.3s ease;
overflow: hidden;
text-overflow: ellipsis;
}
}

.research-plan-table-grid.grid-with-collapsed-rows {
.ag-body-viewport {
Expand Down
96 changes: 39 additions & 57 deletions app/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton.js
View file
Original file line number Diff line number Diff line change
@@ -1,86 +1,68 @@
/* eslint-disable react/prefer-stateless-function */
import React, { Component } from "react";
import PropTypes from "prop-types";
import { Button, OverlayTrigger, Tooltip } from "react-bootstrap";
/* eslint-disable react/destructuring-assignment */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
import Attachment from 'src/models/Attachment';

export default class ImageAnnotationEditButton extends Component {
allowedFileTypes = ['png', 'jpg', 'bmp', 'tif', 'svg', 'jpeg', 'tiff']
allowedFileTypes = ['png', 'jpg', 'bmp', 'tif', 'svg', 'jpeg', 'tiff'];

constructor(props) {
super(props);
}

renderActiveAnnotationButton() {
renderButton(isActive, tooltipText) {
return (
<OverlayTrigger
placement="top"
overlay={<Tooltip id="annotate_tooltip">Annotate image</Tooltip>}
overlay={<Tooltip id="annotate_tooltip">{tooltipText}</Tooltip>}
>
<Button
bsSize="xsmall"
bsStyle="warning"
className={
this.props.horizontalAlignment ? this.props.horizontalAlignment : ""
}
onClick={() => {
this.props.parent.setState({
imageEditModalShown: true,
choosenAttachment: this.props.attachment,
imageName: this.props.attachment.filename,
});
}}
>
<i className="fa fa-pencil" aria-hidden="true" />
</Button>
</OverlayTrigger>
);
}

renderInactiveAnnotationButton(attachment) {
return (
<OverlayTrigger
overlay={
<Tooltip id="annotate_tooltip">
Please save the research plan to annotate the image
</Tooltip>
}
>
<span
className={
this.props.horizontalAlignment ? this.props.horizontalAlignment : ""
}
>
<span>
<Button
disabled
style={{ pointerEvents: "none" }}
bsSize="xsmall"
bsSize="xs"
bsStyle="warning"
style={this.props.style}
className={this.props.className}
onClick={() => {
if (isActive) {
this.props.parent.setState({
imageEditModalShown: true,
chosenAttachment: this.props.attachment,
imageName: this.props.attachment.filename,
});
}
}}
disabled={!isActive}
>
<i className="fa fa-pencil" aria-hidden="true" />
<i className="fa fa-pencil-square-o" aria-hidden="true" />
</Button>
</span>
</OverlayTrigger>
);
}

render() {
if (!this.props.attachment||!this.props.attachment.filename) {
if (!this.props.attachment || !this.props.attachment.filename) {
return null;
}

const extension = this.props.attachment.filename.split('.').pop();
if (!this.allowedFileTypes.includes(extension)) {
return null;
}
const isAllowedFileType = this.allowedFileTypes.includes(extension);
const isActive = isAllowedFileType && !this.props.attachment.isNew;

const tooltipText = isActive
? 'Annotate image'
: 'Cannot annotate - invalid file type or the image is new';

return this.props.attachment.isNew
? this.renderInactiveAnnotationButton()
: this.renderActiveAnnotationButton();
return this.renderButton(isActive, tooltipText);
}
}

ImageAnnotationEditButton.propTypes = {
attachment: PropTypes.instanceOf(Attachment),
parent: PropTypes.object.isRequired,
horizontalAlignment: PropTypes.string
style: PropTypes.object,
className: PropTypes.string
};

ImageAnnotationEditButton.defaultProps = {
attachment: null,
style: {},
className: ''
};
Loading

0 comments on commit fbbc50e

Please sign in to comment.