Skip to content

Commit ba91b11

Browse files
marthacryanmarthacryan
committed
Create a confirmation dialog
1 parent fddd50e commit ba91b11

5 files changed

Lines changed: 169 additions & 1 deletion

File tree

‎build/plotcss.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,17 @@ var rules = {
5050
"X [data-title]:after": "content:attr(data-title);background:#69738a;color:#fff;padding:8px 10px;font-size:12px;line-height:12px;white-space:nowrap;margin-right:-18px;border-radius:2px;",
5151
"X .vertical [data-title]:before,X .vertical [data-title]:after": "top:0%;right:200%;",
5252
"X .vertical [data-title]:before": "border:6px solid rgba(0,0,0,0);border-left-color:#69738a;margin-top:8px;margin-right:-30px;",
53+
"X .plotly-cloud-dialog": "font-family:\"Open Sans\",verdana,arial,sans-serif;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1001;display:flex;align-items:center;justify-content:center;background-color:rgba(0,0,0,.4);",
54+
"X .plotly-cloud-dialog .plotly-cloud-dialog-box": "box-sizing:border-box;min-width:300px;max-width:420px;padding:20px 24px;background-color:#fff;border:1px solid #e0e2e5;border-radius:4px;box-shadow:0 4px 16px rgba(0,0,0,.25);font-size:13px;color:#2a3f5f;",
55+
"X .plotly-cloud-dialog .plotly-cloud-dialog-title": "font-size:16px;font-weight:bold;margin-bottom:12px;",
56+
"X .plotly-cloud-dialog .plotly-cloud-dialog-message": "line-height:1.5;overflow-wrap:break-word;word-wrap:break-word;",
57+
"X .plotly-cloud-dialog .plotly-cloud-dialog-buttons": "display:flex;justify-content:flex-end;margin-top:20px;",
58+
"X .plotly-cloud-dialog .plotly-cloud-dialog-btn": "font-family:inherit;font-size:13px;padding:7px 16px;margin-left:8px;border-radius:3px;border:1px solid rgba(0,0,0,0);cursor:pointer;",
59+
"X .plotly-cloud-dialog .plotly-cloud-dialog-btn:focus-visible": "outline:2px solid #447adb;outline-offset:1px;",
60+
"X .plotly-cloud-dialog .plotly-cloud-dialog-btn--cancel": "background-color:#fff;border-color:#e0e2e5;color:#777;",
61+
"X .plotly-cloud-dialog .plotly-cloud-dialog-btn--cancel:hover": "background-color:#f3f3f3;",
62+
"X .plotly-cloud-dialog .plotly-cloud-dialog-btn--confirm": "background-color:#447adb;color:#fff;",
63+
"X .plotly-cloud-dialog .plotly-cloud-dialog-btn--confirm:hover": "background-color:#1d3b84;",
5364
Y: "font-family:\"Open Sans\",verdana,arial,sans-serif;position:fixed;top:50px;right:20px;z-index:10000;font-size:10pt;max-width:180px;",
5465
"Y p": "margin:0;",
5566
"Y .notifier-note": "min-width:180px;max-width:250px;border:1px solid #fff;z-index:3000;margin:0;background-color:#8c97af;background-color:rgba(140,151,175,.9);color:#fff;padding:10px;overflow-wrap:break-word;word-wrap:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto;",

‎src/components/modebar/buttons.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ var Plots = require('../../plots/plots');
55
var axisIds = require('../../plots/cartesian/axis_ids');
66
var Icons = require('../../fonts/ploticon');
77
var eraseActiveShape = require('../shapes/draw').eraseActiveShape;
8+
var confirmCloudDialog = require('./cloud_confirm');
89
var Lib = require('../../lib');
910
var _ = Lib._;
1011

@@ -72,7 +73,10 @@ modeBarButtons.sendChartToCloud = {
7273
title: function(gd) { return _(gd, 'Share with Plotly Cloud'); },
7374
icon: Icons.cloudupload,
7475
click: function(gd) {
75-
Plots.sendDataToCloud(gd);
76+
var serverUrl = (window.PLOTLYENV || {}).BASE_URL || gd._context.plotlyServerURL;
77+
confirmCloudDialog(gd, serverUrl, function() {
78+
Plots.sendDataToCloud(gd);
79+
});
7680
}
7781
};
7882

‎src/components/modebar/cloud_confirm.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
'use strict';
2+
3+
var d3 = require('@plotly/d3');
4+
5+
/**
6+
* Show a styled confirmation dialog before sharing a chart with Plotly Cloud.
7+
*
8+
* The dialog is appended to the plot's positioning container (.svg-container)
9+
* so it is centered over the plot rather than the whole viewport. It can be
10+
* dismissed by clicking Cancel, clicking the backdrop, or pressing Escape.
11+
*
12+
* @param {DOM node} gd - the graph div, used to scope the dialog to the plot
13+
* @param {string} serverUrl - destination shown in the dialog message
14+
* @param {function} onConfirm - called when the user confirms the upload
15+
*/
16+
module.exports = function confirmCloudDialog(gd, serverUrl, onConfirm) {
17+
var container = d3.select(gd._fullLayout._paperdiv.node());
18+
19+
// Never stack dialogs - drop any that is already open.
20+
container.selectAll('.plotly-cloud-dialog').remove();
21+
22+
var overlay = container
23+
.append('div')
24+
.classed('plotly-cloud-dialog', true);
25+
26+
var dialog = overlay.append('div')
27+
.classed('plotly-cloud-dialog-box', true);
28+
29+
dialog.append('div')
30+
.classed('plotly-cloud-dialog-title', true)
31+
.text('Share with Plotly Cloud');
32+
33+
dialog.append('div')
34+
.classed('plotly-cloud-dialog-message', true)
35+
.text('Your chart data will be sent to ' + serverUrl + '.');
36+
37+
var buttons = dialog.append('div')
38+
.classed('plotly-cloud-dialog-buttons', true);
39+
40+
function close() {
41+
overlay.remove();
42+
document.removeEventListener('keydown', onKeydown);
43+
}
44+
45+
function onKeydown(e) {
46+
if(e.key === 'Escape' || e.keyCode === 27) close();
47+
}
48+
document.addEventListener('keydown', onKeydown);
49+
50+
// Clicking the backdrop (but not the dialog box) cancels.
51+
overlay.on('click', function() {
52+
if(d3.event.target === overlay.node()) close();
53+
});
54+
55+
buttons.append('button')
56+
.classed('plotly-cloud-dialog-btn', true)
57+
.classed('plotly-cloud-dialog-btn--cancel', true)
58+
.text('Cancel')
59+
.on('click', close);
60+
61+
buttons.append('button')
62+
.classed('plotly-cloud-dialog-btn', true)
63+
.classed('plotly-cloud-dialog-btn--confirm', true)
64+
.text('Share')
65+
.on('click', function() {
66+
close();
67+
onConfirm();
68+
});
69+
};

‎src/css/_cloud_dialog.scss‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
.plotly-cloud-dialog {
2+
font-family: 'Open Sans', verdana, arial, sans-serif; // Because not all contexts have this specified.
3+
position: absolute;
4+
top: 0;
5+
left: 0;
6+
width: 100%;
7+
height: 100%;
8+
z-index: 1001;
9+
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
14+
background-color: rgba(0, 0, 0, 0.4);
15+
16+
.plotly-cloud-dialog-box {
17+
box-sizing: border-box;
18+
min-width: 300px;
19+
max-width: 420px;
20+
padding: 20px 24px;
21+
22+
background-color: $color-bg-light;
23+
border: 1px solid $color-bg-darker;
24+
border-radius: 4px;
25+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
26+
27+
font-size: 13px;
28+
color: #2a3f5f;
29+
}
30+
31+
.plotly-cloud-dialog-title {
32+
font-size: 16px;
33+
font-weight: bold;
34+
margin-bottom: 12px;
35+
}
36+
37+
.plotly-cloud-dialog-message {
38+
line-height: 1.5;
39+
overflow-wrap: break-word;
40+
word-wrap: break-word;
41+
}
42+
43+
.plotly-cloud-dialog-buttons {
44+
display: flex;
45+
justify-content: flex-end;
46+
margin-top: 20px;
47+
}
48+
49+
.plotly-cloud-dialog-btn {
50+
font-family: inherit;
51+
font-size: 13px;
52+
padding: 7px 16px;
53+
margin-left: 8px;
54+
55+
border-radius: 3px;
56+
border: 1px solid transparent;
57+
cursor: pointer;
58+
59+
&:focus-visible {
60+
outline: 2px solid $color-brand-primary;
61+
outline-offset: 1px;
62+
}
63+
}
64+
65+
.plotly-cloud-dialog-btn--cancel {
66+
background-color: $color-bg-light;
67+
border-color: $color-bg-darker;
68+
color: $color-muted-text;
69+
70+
&:hover {
71+
background-color: $color-bg-base;
72+
}
73+
}
74+
75+
.plotly-cloud-dialog-btn--confirm {
76+
background-color: $color-brand-primary;
77+
color: $color-bg-light;
78+
79+
&:hover {
80+
background-color: $color-brand-accent;
81+
}
82+
}
83+
}

‎src/css/style.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,6 @@
66
@import "cursor.scss";
77
@import "modebar.scss";
88
@import "tooltip.scss";
9+
@import "cloud_dialog.scss";
910
}
1011
@import "notifier.scss";

0 commit comments

Comments
 (0)