Skip to content

Commit

Permalink
Databases tree element with tailwind & remove custom styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@3lviend
3lviend committed Aug 8, 2024
1 parent 1b805d2 commit 79c8688
Show file tree
Hide file tree
Showing 12 changed files with 157,522 additions and 76 deletions.
2 changes: 1 addition & 1 deletion public/css/app.min.css
View file

Large diffs are not rendered by default.

24 changes: 0 additions & 24 deletions public/css/sequenceserver.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,14 +81,6 @@ a.disabled:hover,
overflow-wrap: break-word;
}

/**
* Set max-width and font-family on tooltips.
*/
.tooltip-inner {
max-width: 350px;
font-family: "Source sans pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/**
* Do not wrap text or show horizontal scrollbar if text overflows the width of
* the element. Show ellipsis instead.
Expand Down Expand Up @@ -166,22 +158,6 @@ td.nowrap-ellipsis {
border-left: 2px solid #c74f14;
}

.btn-primary {
background-color: #1b557a;
border-color: #174465;
}

.btn-primary:hover {
background-color: #174465;
border-color: #174465;
}

.btn-primary:disabled,
.btn-primary[disabled]:hover {
background-color: #881c14;
border-color: #881c14;
}

/* CSS class to facilitate the hit header wrapping */
.hit-header {
display: table-cell;
Expand Down
9 changes: 7 additions & 2 deletions public/js/cloud_share_modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,9 +148,14 @@ export default class CloudShareModal extends React.Component {
</label>
</div>
<div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
<button type="submit" className="btn btn-primary py-2 px-3 rounded-md text-white" disabled={isSubmitDisabled}>
<button
type="submit"
style={{ backgroundColor: isSubmitDisabled ? '#C74F13' : '#1B557A' }}
className='border-seqblue py-2 px-3 rounded-md text-white'
disabled={isSubmitDisabled}
>
Submit
</button>
</button>
</div>
</form>
)
Expand Down
32 changes: 21 additions & 11 deletions public/js/databases_tree.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,15 +59,18 @@ export default class extends Databases {
// Panel name and column width.
var panelTitle = category[0].toUpperCase() +
category.substring(1).toLowerCase() + ' databases';
var columnClass = this.categories().length === 1 ? 'col-md-12' :
'col-md-6';
var columnClass = this.categories().length === 1 ? 'col-span-2' : '';

// Toggle button.
var toggleState = '[Select all]';
var toggleClass = 'btn-link';
var toggleClass = 'px-2 text-sm';
var toggleShown = this.databases(category).length > 1;
var toggleDisabled = this.state.type && this.state.type !== category;
if (toggleShown && toggleDisabled) toggleClass += ' disabled';
if (toggleShown && toggleDisabled) {
toggleClass += ' text-gray-400';
} else {
toggleClass += ' text-seqblue';
}
if (!toggleShown) toggleClass += ' hidden';
if (this.nselected() === this.databases(category).length) {
toggleState = '[Deselect all]';
Expand All @@ -76,22 +79,29 @@ export default class extends Databases {
// JSX.
return (
<div className={columnClass} key={'DB_' + category}>
<div className='panel panel-default' id='database_list'>
<div className='panel-heading'>
<h4 style={{ display: 'inline' }}>{panelTitle}</h4> &nbsp;&nbsp;
<div>
<div className="border-b border-seqorange mb-2" id="database_list">
<h4 style={{ display: 'inline' }} className="font-medium">{panelTitle}</h4>
{
this.renderDatabaseSearch(category)
}
<button type='button' className={toggleClass} disabled={toggleDisabled} style={{ display: 'none' }}
onClick={function () { this.handleToggle(toggleState, category); }.bind(this)}>
<button
type="button"
className={toggleClass}
disabled={toggleDisabled}
style={{ display: 'none' }}
onClick={function () {
this.handleToggle(toggleState, category);
}.bind(this)}
>
{toggleState}
</button>
</div>
<ul className={'list-group databases ' + category} style={{ display: 'none' }}>
<ul className={'databases ' + category} style={{ display: 'none' }}>
{
_.map(this.databases(category), _.bind(function (database, index) {
return (
<li className='list-group-item' key={'DB_' + category + index}>
<li key={'DB_' + category + index}>
{this.renderDatabase(database)}
</li>
);
Expand Down
2 changes: 1 addition & 1 deletion public/js/hit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ export default class extends Component {
}

return <div className="section-header border-b border-seqorange pl-px table w-full">
<h4 className="text-sm cursor-pointer pl-1">
<h4 className="text-sm cursor-pointer">
<i className="fa-regular fa-square-minus align-bottom"></i>&nbsp;
<strong className="cursor-text">{this.props.hit.id}</strong>&nbsp;
{this.props.hit.title}
Expand Down
2 changes: 1 addition & 1 deletion public/js/report.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,7 @@ class Report extends Component {
})}
</p>
<p>
<a href={location.pathname + '?bypass_file_size_warning=true'} className="btn btn-primary">
<a href={location.pathname + '?bypass_file_size_warning=true'} className="py-2 px-3 border border-transparent rounded-md shadow-sm text-white bg-seqblue hover:bg-seqorange focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-seqorange">
View results in browser anyway
</a>
</p>
Expand Down
2 changes: 1 addition & 1 deletion public/js/share_url.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const ShareURLComponent = ({ querydb, program, queryLength, url }) => {
<div className="share-url-component">
<input className="w-full" name="shareableUrl" type="text" value={url} readOnly />
<div className="py-4 flex justify-between">
<button className="btn btn-primary" onClick={copyToClipboard}>{copied ? 'Copied!' : 'Copy to Clipboard'}</button>
<button className="py-2 px-3 border border-transparent rounded-md shadow-sm text-white bg-seqblue hover:bg-seqorange focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-seqorange" onClick={copyToClipboard}>{copied ? 'Copied!' : 'Copy to Clipboard'}</button>
<a href={asMailtoHref(querydb, program, queryLength, url, true)}>Share via email</a>
</div>
</div>
Expand Down
72 changes: 43 additions & 29 deletions public/js/sidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -285,22 +285,26 @@ export default class extends Component {
</div>
<ul>
{
!(this.props.data.imported_xml || this.props.data.non_parse_seqids) && <li className="hover:bg-gray-200">
<a href="#" className={`text-sm text-seqblue download-fasta-of-all hover:text-seqorange cursor-pointer py-0.5 px-0.5 ${!this.props.atLeastOneHit && 'disabled'}`}
onClick={this.downloadFastaOfAll}>
FASTA of all hits
</a>
!(this.props.data.imported_xml || this.props.data.non_parse_seqids) && <li className={`${!this.props.atLeastOneHit ? 'cursor-not-allowed' : 'hover:bg-gray-200'}`}>
<a
href="#"
className={`text-sm text-seqblue download-fasta-of-all hover:text-seqorange cursor-pointer py-0.5 px-0.5 ${!this.props.atLeastOneHit && 'disabled'}`}
onClick={this.props.atLeastOneHit ? this.downloadFastaOfAll : (e) => e.preventDefault()}>
FASTA of all hits
</a>
</li>
}
{
!(this.props.data.imported_xml || this.props.data.non_parse_seqids) && <li>
<a href="#" className="text-sm text-seqblue download-fasta-of-selected disabled py-0.5 px-0.5"
<a
href="#"
className="text-sm text-seqblue download-fasta-of-selected disabled py-0.5 px-0.5"
onClick={this.downloadFastaOfSelected}>
FASTA of <span className="text-bold"></span> selected hit(s)
</a>
</li>
}
<li className="hover:bg-gray-200">
<li className={`${!this.props.atLeastOneHit ? 'cursor-not-allowed' : 'hover:bg-gray-200'}`}>
<a href="#" className={`text-sm text-seqblue download-alignment-of-all hover:text-seqorange cursor-pointer py-0.5 px-0.5 ${!this.props.atLeastOneHit && 'disabled'}`}>
Alignment of all hits
</a>
Expand Down Expand Up @@ -400,13 +404,23 @@ export default class extends Component {
</div>
<ul>
{!this.props.cloudSharingEnabled &&
<li className="hover:text-seqorange hover:bg-gray-200 relative">
<a id="copyURL" className="text-sm text-seqblue hover:text-seqorange copy-URL cursor-pointer py-0.5 px-0.5" onClick={this.copyURL}>
<i className="fa fa-copy"></i> Copy URL to clipboard
</a>
<div id="tooltip" className="absolute left-1/2 transform -translate-x-1/2 -translate-y-full w-32 bg-black text-white text-center text-xs rounded py-1">
copied!
</div>
<li className="hover:text-seqorange hover:bg-gray-200">
<a id="copyURL" className="flex text-sm text-seqblue hover:text-seqorange copy-URL cursor-pointer py-0.5 px-0.5 w-full" onClick={this.copyURL}>
<div className="relative flex gap-2 items-center group w-full">
<i className="fa fa-copy"></i>
<div className="flex items-center">
<span className="w-full">Copy URL to clipboard</span>
<div id="tooltip" className="absolute hidden left-full ml-2 items-center">
<div className="flex items-center">
<div className="w-0 h-0 border-t-[8px] border-b-[7px] border-r-[7px] border-t-transparent border-b-transparent border-r-black -mr-[1px]"></div>
<span className="relative z-10 p-2 text-xs leading-4 text-center text-white whitespace-no-wrap bg-black shadow-lg rounded-[5px]">
Copied!
</span>
</div>
</div>
</div>
</div>
</a>
</li>
}
{!this.props.cloudSharingEnabled &&
Expand All @@ -431,23 +445,23 @@ export default class extends Component {
}
{this.props.cloudSharingEnabled &&
<li className="hover:text-seqorange hover:bg-gray-200">
<button className="flex text-sm text-seqblue hover:text-seqorange cloud-Post cursor-pointer py-0.5 px-0.5 w-full" onClick={this.shareCloudInit}>
<div className="relative flex gap-2 items-center group w-full">
<i className="fa fa-cloud"></i>
<div className="flex items-center">
<span className="w-full">Share to cloud</span>
<div className="absolute hidden left-full ml-2 items-center group-hover:flex w-[300px]">
<div className="w-0 h-0 border-t-[8px] border-b-[7px] border-r-[7px] border-t-transparent border-b-transparent border-r-black -mr-[1px]"></div>
<span className="relative z-10 p-2 text-xs leading-4 text-center text-white whitespace-no-wrap bg-black shadow-lg rounded-[5px]">
Results in pairwise format
Upload results to SequenceServer Cloud where it will become accessable
to everyone who has a link.
</span>
<button className="flex text-sm text-seqblue hover:text-seqorange cloud-Post cursor-pointer py-0.5 px-0.5 w-full" onClick={this.shareCloudInit}>
<div className="relative flex gap-2 items-center group w-full">
<i className="fa fa-cloud"></i>
<div className="flex items-center">
<span className="w-full">Share to cloud</span>
<div className="absolute hidden left-full ml-2 items-center group-hover:flex w-[300px]">
<div className="w-0 h-0 border-t-[8px] border-b-[7px] border-r-[7px] border-t-transparent border-b-transparent border-r-black -mr-[1px]"></div>
<span className="relative z-10 p-2 text-xs leading-4 text-center text-white whitespace-no-wrap bg-black shadow-lg rounded-[5px]">
Results in pairwise format
Upload results to SequenceServer Cloud where it will become accessable
to everyone who has a link.
</span>
</div>
</div>
</div>
</div>
</button>
</li>
</button>
</li>
}
</ul>
{
Expand Down
79,474 changes: 79,472 additions & 2 deletions public/sequenceserver-report.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion public/sequenceserver-report.min.js.map
View file

Large diffs are not rendered by default.

77,975 changes: 77,973 additions & 2 deletions public/sequenceserver-search.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion public/sequenceserver-search.min.js.map
View file

Large diffs are not rendered by default.

0 comments on commit 79c8688

Please sign in to comment.