Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Share URL Widget Redesign #295

Merged
merged 17 commits into from
Jul 16, 2024
Merged

Share URL Widget Redesign #295

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
db1b37d
Share Widget makeover
turner Jun 1, 2024
e2b9a08
Testing TinyURL
turner Jun 3, 2024
51622f7
NOTE: For testing tinyURL. DO NOT PUBLISH.
turner Jun 4, 2024
887c8ad
hacking
turner Jun 4, 2024
5c590b1
edits
turner Jun 4, 2024
5309d48
layout-ing
turner Jun 4, 2024
cb4e98c
Sample Info URL Modal: Do not display index file URL
turner Jun 4, 2024
47c1c70
Share URL edits.
turner Jul 11, 2024
0266860
misc
turner Jul 11, 2024
a78c526
Share URL widget edits
turner Jul 11, 2024
c96966e
Update webconfig.js with more info on share url
jrobinso Jul 12, 2024
fe9f249
Merge branch 'master' into share_url_edits
jrobinso Jul 12, 2024
330b2a2
Share Widget. Reduce button size. Share URL no longer selectable.
turner Jul 13, 2024
d1cad77
Share widget edits
turner Jul 15, 2024
4473b60
Share widget. Better hide/show U/X
turner Jul 15, 2024
d1190ee
misc
turner Jul 16, 2024
378c6c8
Update igvwebConfig.js
jrobinso Jul 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 23 additions & 41 deletions css/_share-modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,67 +11,49 @@ $default-dark-color: #5f5f5f;
font-family: $default-font-family;
font-size: $default-font-size;
font-weight: 400;
padding: unset;
.modal-body-section {
padding: 16px;
}
}
}

#igv-app-qrcode-image {
display:none;
}

#igv-app-embed-container {
display:none;
}

a#igv-app-email-button {
color: $default-dark-color;
text-decoration: none;
button#igv-share-url-button {
padding: unset;
svg {
width: 20px;
height: 20px;
}
}

a#igv-app-email-button:hover,
a#igv-app-email-button:focus,
a#igv-app-email-button:active {
cursor: pointer;
font-weight: 700;
text-decoration: none;
input#igv-app-share-input {
pointer-events: none;
}

#igv-app-embed-button:hover,
#igv-app-embed-button:focus,
#igv-app-embed-button:active {
cursor: pointer;
font-weight: 700;
#igv-app-qrcode-image {
padding: 16px;
display:none;
}

#igv-app-qrcode-button:hover,
#igv-app-qrcode-button:focus,
#igv-app-qrcode-button:active {
cursor: pointer;
font-weight: 700;
#igv-app-embed-container {
padding: 16px;
display:none;
}

.igv-app-social-button-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
justify-content: space-around;
align-items: center;

height: 40px;

div {
margin-left: 8px;
margin-right: 8px;
//background-color: red;
}

div:first-child {
width:65px;
margin-top:4px;
}

margin-bottom: 10px;
}

.igv-app-social-button {
float: left;
}

.custom-btn-group .btn.single-button {
border-radius: 0.25rem !important;
}
57 changes: 21 additions & 36 deletions css/app.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion css/app.css.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 1 addition & 2 deletions igvwebConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ var igvwebConfig = {

// Supply a Google client id to enable the Google file picker in the load menus. This is optional
//clientId: "...",
// apiKey: "...",
//apiKey: "...",

// Provide a URL shorterner function or object. This is optional. If not supplied
// sharable URLs will not be shortened. If using tinyURL supply an api token
Expand All @@ -19,7 +19,6 @@ var igvwebConfig = {
// },
// urlShortener: function(longURL) {... return shortendURL}


enableCircularView: true,

restoreLastGenome: true,
Expand Down
82 changes: 51 additions & 31 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -450,51 +450,70 @@
</div>

<div class="modal-body">
<div class="container-fluid">

<!-- copy url -->
<div class="row">
<div class="col-sm-8">
<div class="form-group">
<input id="igv-app-share-input" type="text" class="form-control" placeholder="">
<!-- copy URL section -->
<div class="modal-body-section">
<div class="container">

<!-- Copy URL radio buttons -->
<div id="igv-share-url-radio-pair-container" class="form-group">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="igv-share-short-url-radio" name="share-url-radio-pair" class="custom-control-input">
<label class="custom-control-label" for="igv-share-short-url-radio">Shortened URL</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="igv-share-long-url-radio" name="share-url-radio-pair" class="custom-control-input" checked>
<label class="custom-control-label" for="igv-share-long-url-radio">Long URL</label>
</div>
</div>
<div class="col-sm-2">
<button id="igv-app-copy-link-button" type="button" class="btn btn-sm btn-default">
COPY
</button>
</div>
</div>

<!-- social buttons -->
<div class="igv-app-social-button-container">

<div id="igv-app-embed-button">EMBED</div>
<!-- Copy URL -->
<div class="row no-gutters">
<div class="col mr-2">
<div class="input-group input-group-sm">
<input id="igv-app-share-input" type="text" class="form-control" placeholder="">
</div>
</div>
<div class="col-4">
<button id="igv-app-copy-link-button" class="btn btn-sm btn-outline-secondary" type="button">Copy Session URL</button>
</div>
</div>

<div id="igv-app-qrcode-button">QR CODE</div>
<!-- Embed iframe Button | Copy iframe Button -->
<div class="row pt-4">
<div class="col text-center">
<div class="d-flex">
<button id="igv-app-embed-button" type="button" class="btn btn-sm btn-outline-secondary mr-2">Embeddable iframe</button>
<button id="igv-app-copy-iframe-button" type="button" class="btn btn-sm btn-outline-secondary">Copy iframe</button>
</div>

</div>
</div>
</div>

<!-- qr code image -->
<div class="row justify-content-center">
<div id="igv-app-qrcode-image" class="col-4"></div>
</div>
<!-- Embed -->
<div id="igv-app-embed-container" class="row">
<div class="col form-group">
<textarea class="form-control" rows="4"></textarea>
</div>
</div>

<!-- embed widget -->
<div id="igv-app-embed-container" class="row">
<div class="col-sm-9 form-group">
<textarea class="form-control" rows="4"></textarea>
<!-- QR Code Button -->
<div id="igv-app-qrcode-container" class="row pt-4">
<div class="col">
<button id="igv-app-qrcode-button" type="button" class="btn btn-sm btn-outline-secondary">Create QR Code</button>
</div>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-default">COPY</button>

<!-- QR Code -->
<div class="row">
<div id="igv-app-qrcode-image" class="col">
</div>
</div>

</div>

</div>
</div>

</div>

</div>

</div>
Expand Down Expand Up @@ -600,6 +619,7 @@ <h5 class="modal-title">About IGV-Web</h5>
</div>
</div>


</main>

<footer class="igv-app-footer">
Expand Down
2 changes: 1 addition & 1 deletion js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -483,7 +483,7 @@ function createSampleInfoMenu(igvMain,
indexTitle: 'Index',
mode: 'url',
fileLoadManager: new FileLoadManager(),
dataOnly: false,
dataOnly: true,
doURL: true
}

Expand Down
Loading
Loading