Skip to content

Commit

Permalink
Merge pull request #95 from InetIntel/feature/share-link
Browse files Browse the repository at this point in the history 
Introduce Share Link Modal
  • Loading branch information
@salcock
salcock authored May 10, 2023
2 parents 5501182 + 40ae2f1 commit 88d780f
Show file tree
Hide file tree
Showing 9 changed files with 533 additions and 99 deletions.
118 changes: 99 additions & 19 deletions assets/css/ioda/sass/components/modal/_modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
@include panel;

& .horizon-series .label {
background-color: rgba(255,255,255,0.4);
background-color: rgba(255, 255, 255, 0.4);
padding: 0 0.4rem;
border-radius: 0.3rem;
max-height: 100%;
Expand Down Expand Up @@ -122,7 +122,6 @@
&__table {
margin-bottom: 1.5rem;


&-heading {
display: flex;
justify-content: space-between;
Expand Down Expand Up @@ -170,13 +169,13 @@
}

// safari-only media query
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {

.modal__button {
align-items: flex-end;
@media not all and (min-resolution: 0.001dpcm) {
@supports (-webkit-appearance: none) {
.modal__button {
align-items: flex-end;
}
}
}}
}

.chartShare__modal {
&--disabled {
Expand Down Expand Up @@ -244,7 +243,7 @@
padding: 2rem;

&__canvas {
position: absolute;
position: absolute;

&--drawingLocked {
pointer-events: none;
Expand All @@ -258,17 +257,19 @@
}

& .chartShare__button {
background: linear-gradient(2deg, #1A5DAE, #598DCC, #1A5DAE, #598DCC);
background: linear-gradient(2deg, #1a5dae, #598dcc, #1a5dae, #598dcc);
color: $color-white;
font-weight: 700;
cursor: pointer;
text-align: center;
border: none;
background-size: 100% 300%;
transition: all .4s ease-in-out;
transition: all 0.4s ease-in-out;
position: relative;
z-index: 10;
box-shadow: inset 0 0.2rem 0.1rem rgba(255, 255, 255, .2), inset 0 0 0 0.1rem rgba(0, 0, 0, .15), 0 0.1rem 0 rgba(255, 255, 255, .15);
box-shadow: inset 0 0.2rem 0.1rem rgba(255, 255, 255, 0.2),
inset 0 0 0 0.1rem rgba(0, 0, 0, 0.15),
0 0.1rem 0 rgba(255, 255, 255, 0.15);
height: 3rem;
font-size: 1rem;
margin: 0;
Expand Down Expand Up @@ -311,7 +312,7 @@
display: flex;
justify-content: center;
align-items: center;
position: absolute!important;
position: absolute !important;
top: 50%;

&__textarea {
Expand All @@ -321,7 +322,7 @@
font-family: $font-lato-regular;
font-size: 1.3rem;
resize: none;
background: rgba(255,255,255,0.35);
background: rgba(255, 255, 255, 0.35);
color: $color-primary;
padding: 0.5rem;

Expand All @@ -332,7 +333,7 @@
}

& .arrow {
position: absolute!important;
position: absolute !important;
background-color: transparent;
z-index: 15;
padding: 0.5rem;
Expand Down Expand Up @@ -382,21 +383,23 @@
& .chartShare__button--download {
width: 100%;
min-width: 26rem;
max-width:52rem;
max-width: 52rem;
height: 5rem;
margin: 3rem auto 0;
border-radius: 0.5rem;
background: linear-gradient(2deg, #1A5DAE, #598DCC, #1A5DAE, #598DCC);
background: linear-gradient(2deg, #1a5dae, #598dcc, #1a5dae, #598dcc);
color: $color-white;
font-weight: 700;
cursor: pointer;
text-align: center;
border: none;
background-size: 100% 300%;
transition: all .4s ease-in-out;
transition: all 0.4s ease-in-out;
position: relative;
z-index: 10;
box-shadow: inset 0 0.2rem 0.1rem rgba(255, 255, 255, .2), inset 0 0 0 0.1rem rgba(0, 0, 0, .15), 0 0.1rem 0 rgba(255, 255, 255, .15);
box-shadow: inset 0 0.2rem 0.1rem rgba(255, 255, 255, 0.2),
inset 0 0 0 0.1rem rgba(0, 0, 0, 0.15),
0 0.1rem 0 rgba(255, 255, 255, 0.15);
font-size: 2.4rem;
padding: 0 1rem;
display: flex;
Expand All @@ -410,3 +413,80 @@
}
}
}

// Styles for ShareLinkModal component
.linkShareModal {
font-size: 1rem;
margin: 0;
padding: 0 1rem;

&__download-link {
display: inline-block;
font-size: 16px;
margin-bottom: 8px;
cursor: pointer;
color: #3975bb;
font-weight: 600;
}

&__download-link:hover {
text-decoration: underline;
}

&__copy-link {
display: flex;
gap: 0.75rem;
align-items: stretch;
width: 100%;
}

&__link {
flex: 1;
flex-grow: 1;
flex-shrink: 1;
padding: 1rem;
font-size: 1.5rem;
background-color: #ccc;
border: 1px solid #555;
color: #000;
border-radius: 5px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
white-space: nowrap;

// Show scrollbar but hide it
overflow-x: auto;
-ms-overflow-style: none;
scrollbar-width: none;

::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
}

&__modal-body {
padding: 2rem;
}

&__modal-title {
font-size: 2rem;
}

&__modal-content {
margin-top: 2rem;
}

&__share-items {
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4px 10px;
}

&__copy-message {
font-size: 0.75rem;
font-style: italic;
}
}
128 changes: 94 additions & 34 deletions assets/css/style.comp.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2351,14 +2351,14 @@ body {
width: 2.4rem; }

.chartShare__modal .chartShare__button {
background: linear-gradient(2deg, #1A5DAE, #598DCC, #1A5DAE, #598DCC);
background: linear-gradient(2deg, #1a5dae, #598dcc, #1a5dae, #598dcc);
color: #fff;
font-weight: 700;
cursor: pointer;
text-align: center;
border: none;
background-size: 100% 300%;
transition: all .4s ease-in-out;
transition: all 0.4s ease-in-out;
position: relative;
z-index: 10;
box-shadow: inset 0 0.2rem 0.1rem rgba(255, 255, 255, 0.2), inset 0 0 0 0.1rem rgba(0, 0, 0, 0.15), 0 0.1rem 0 rgba(255, 255, 255, 0.15);
Expand Down Expand Up @@ -2498,14 +2498,14 @@ body {
height: 5rem;
margin: 3rem auto 0;
border-radius: 0.5rem;
background: linear-gradient(2deg, #1A5DAE, #598DCC, #1A5DAE, #598DCC);
background: linear-gradient(2deg, #1a5dae, #598dcc, #1a5dae, #598dcc);
color: #fff;
font-weight: 700;
cursor: pointer;
text-align: center;
border: none;
background-size: 100% 300%;
transition: all .4s ease-in-out;
transition: all 0.4s ease-in-out;
position: relative;
z-index: 10;
box-shadow: inset 0 0.2rem 0.1rem rgba(255, 255, 255, 0.2), inset 0 0 0 0.1rem rgba(0, 0, 0, 0.15), 0 0.1rem 0 rgba(255, 255, 255, 0.15);
Expand All @@ -2519,6 +2519,60 @@ body {
width: 4rem;
margin-right: 1rem; }

.linkShareModal {
font-size: 1rem;
margin: 0;
padding: 0 1rem; }
.linkShareModal__download-link {
display: inline-block;
font-size: 16px;
margin-bottom: 8px;
cursor: pointer;
color: #3975bb;
font-weight: 600; }
.linkShareModal__download-link:hover {
text-decoration: underline; }
.linkShareModal__copy-link {
display: flex;
gap: 0.75rem;
align-items: stretch;
width: 100%; }
.linkShareModal__link {
flex: 1;
flex-grow: 1;
flex-shrink: 1;
padding: 1rem;
font-size: 1.5rem;
background-color: #ccc;
border: 1px solid #555;
color: #000;
border-radius: 5px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
white-space: nowrap;
overflow-x: auto;
-ms-overflow-style: none;
scrollbar-width: none; }
.linkShareModal__link ::-webkit-scrollbar {
display: none;
/* Safari and Chrome */ }
.linkShareModal__modal-body {
padding: 2rem; }
.linkShareModal__modal-title {
font-size: 2rem; }
.linkShareModal__modal-content {
margin-top: 2rem; }
.linkShareModal__share-items {
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4px 10px; }
.linkShareModal__copy-message {
font-size: 0.75rem;
font-style: italic; }

.timestamp {
display: flex;
justify-content: flex-end;
Expand Down Expand Up @@ -3974,41 +4028,47 @@ button[class*="searchButton"] {
left: -8.8rem; } } }
.entity .overview__xy-wrapper .canvasjs-chart-credit {
display: none; }
@media only screen and (max-width: 30em) {
.entity .overview__xy-wrapper:before {
/*
.entity .overview__xy-wrapper:before {
/*
@include respond(phone) {
content: "";
position: absolute;
bottom: 0.5rem;
left: 0;
background-color: $color-white;
width: 17.5rem;
height: 1.6rem;
z-index: 10;
}
*/ }
.entity .overview__xy-wrapper:after {
/*
content: "";
position: absolute;
bottom: 0.5rem;
bottom: 0;
left: 0;
background-color: #fff;
width: 17.5rem;
height: 1.6rem;
z-index: 10;
*/
} }
.entity .overview__xy-wrapper:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
/*background-color: #fff;*/
height: 1.5rem;
width: 14rem; }
@media only screen and (min-width: 112.5em) {
.entity .overview__xy-wrapper:after {
width: 11.5rem; } }
@media only screen and (max-width: 80em) {
.entity .overview__xy-wrapper:after {
width: 15.5rem; } }
@media only screen and (max-width: 64em) {
.entity .overview__xy-wrapper:after {
background-color: $color-white;
height: 1.5rem;
width: 14rem;
@include respond(big-desktop) {
width: 11.5rem;
}
@include respond(tab-land) {
width: 15.5rem;
}
@include respond(tab-port) {
width: 17.5rem;
height: 2rem; } }
@media only screen and (max-width: 30em) {
.entity .overview__xy-wrapper:after {
height: 2rem;
}
@include respond(phone) {
width: 19.5rem;
height: 1.6rem; } }
height: 1.6rem;
}
*/ }
.entity .overview__table-config {
display: flex;
flex-direction: column;
Expand Down
2 changes: 1 addition & 1 deletion assets/css/style.css
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 88d780f

Please sign in to comment.