Skip to content
Permalink
Browse files

whats new dialog

still missing:
- activate only when launching the first time on selected version
- Prettier images!
  • Loading branch information...
Manuel-777 committed Jun 23, 2019
1 parent 3a38217 commit 13083558f2064d39dedfb5b30a9a2fe72fa46fac
BIN +227 KB images/new/01.png
Binary file not shown.
BIN +265 KB images/new/02.png
Binary file not shown.
@@ -3267,4 +3267,107 @@ a:hover {
width: 20px;
height: 20px;
margin: auto 24px auto auto;
}
}

.wnew_image {
width: -webkit-fill-available;
height: -webkit-fill-available;
background-position: center;
background-size: cover;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.wnew_image_cont {
width: 100%;
height: 100%;
}

.wnew_scroller {
height: 60%;
position: relative;
display: flex;
overflow: hidden;
-webkit-transition: all .2s ease-in;
}

.wnew_title {
font-family: var(--main-font-name-it);
font-size: 32px;
text-align: center;
padding-bottom: 8px;
color: var(--color-u);
}

.wnew_sub_version {
font-family: var(--sub-font-name-it);
font-size: 14px;
text-align: center;
padding-bottom: 8px;
color: var(--color-light-50);
}

.wnew_image_title {
font-family: var(--sub-font-name-it);
font-size: 28px;
color: var(--color-light);
padding: 16px;
background-color: rgba(0,0,0,0.5);
}

.wnew_image_desc {
font-family: var(--sub-font-name-it);
font-size: 15px;
color: var(--color-w);
padding: 10px;
background-color: rgba(0,0,0,0.5);
}

.wnew_prev, .wnew_next {
pointer-events: all;
margin: 0 12px;
position: absolute;
cursor: pointer;
z-index: 51;
opacity: 0.5;
width: calc(50% - 24px);
height: 60%;
-webkit-transition: all .2s ease-in;
}

.wnew_prev:hover, .wnew_next:hover {
opacity: 1;
}

.wnew_prev {
background: url(../images/prev.png) no-repeat;
background-position: left;
}

.wnew_next {
background: url(../images/next.png) no-repeat;
background-position: right;
left: 50%;
}

.wnew_scroller_pos_cont {
margin: 24px auto 0 auto;
display: flex;
}

.wnew_pos_ball {
width: 8px;
height: 8px;
margin: 4px;
border-radius: 50%;
background-color: var(--color-w);
-webkit-transition: all .2s ease-in;
}

.wnew_pos_ball_selected {
width: 12px;
height: 12px;
margin: 2px 4px;
}
@@ -59,6 +59,7 @@ const { openEconomyTab } = require("./economy");
const { openExploreTab, setExploreDecks } = require("./explore");
const { openCollectionTab } = require("./collection");
const { openSettingsTab, setCurrentOverlaySettings } = require("./settings");
const { showWhatsNew } = require("./whats-new");

const byId = id => document.getElementById(id);
let sidebarActive = -2;
@@ -355,6 +356,8 @@ ipc.on("initialize", function() {
setLocalState({ totalAgg });
openTab(sidebarActive);

//showWhatsNew();

$$(".top_nav")[0].classList.remove("hidden");
$$(".overflow_ux")[0].classList.remove("hidden");
$$(".message_center")[0].style.display = "none";
@@ -0,0 +1,123 @@
const { createDiv, queryElements } = require("../shared/dom-fns");
const { remote } = require("electron");

const upToVersion = "2.7.3";
const screens = [
{
title: "Multiple Overlays",
desciption: "Enable up to 5 simultaneous overlay windows",
image: "01.png"
},
{
title: "Hotkeys",
desciption:
"Use the hotkeys to quickly show and hide the windows you need!",
image: "02.png"
},
{
title: "Customize everything",
desciption: "Customize every aspect of each window.",
image: "02.png"
}
];

let selectedScreen = 0;

function showWhatsNew() {
const dialog = queryElements(".dialog")[0];
dialog.innerHTML = "";
dialog.style.width = "80vw";
dialog.style.height = "70vh";
dialog.style.top = "15vh";
dialog.style.justifyContent = "center";
dialog.style.overflow = "hidden";
dialog.addEventListener("click", function(e) {
e.stopPropagation();
});

let title = createDiv(["wnew_title"], "What is new?");
let subVersion = createDiv(
["wnew_sub_version"],
"Version " + remote.app.getVersion()
);
let scrollerContainer = createDiv(["wnew_scroller"]);
scrollerContainer.style.width = screens.length * 100 + "%";
scrollerContainer.style.left = selectedScreen * -100 + "%";

let scrollerPosCont = createDiv(["wnew_scroller_pos_cont"]);
let prev = createDiv(["wnew_prev"]);
let next = createDiv(["wnew_next"]);

screens.forEach((sc, index) => {
let imageCont = createDiv(["wnew_image_cont"]);
let image = createDiv(["wnew_image"]);
image.style.backgroundImage = `url(../images/new/${sc.image})`;
let imageTitle = createDiv(["wnew_image_title"], sc.title);
let imageDesc = createDiv(["wnew_image_desc"], sc.desciption);

image.appendChild(imageTitle);
image.appendChild(imageDesc);
imageCont.appendChild(image);
scrollerContainer.appendChild(imageCont);

let pName = "pos_ball_" + index;
let posBall = createDiv(["wnew_pos_ball", pName]);
scrollerPosCont.appendChild(posBall);

if (selectedScreen == index) {
posBall.classList.toggle("wnew_pos_ball_selected");
}
});

let updateScroller = function() {
let scrollerContainer = queryElements(".wnew_scroller")[0];
scrollerContainer.style.left = selectedScreen * -100 + "%";

screens.forEach((sc, index) => {
let pName = ".pos_ball_" + index;
let ball = queryElements(pName)[0];
ball.classList.remove("wnew_pos_ball_selected");
if (index == selectedScreen) {
ball.classList.toggle("wnew_pos_ball_selected");
}
});
};

prev.addEventListener("click", () => {
selectedScreen -= 1;
if (selectedScreen < 0) selectedScreen = screens.length - 1;
updateScroller();
});

next.addEventListener("click", () => {
selectedScreen += 1;
if (selectedScreen > screens.length - 1) selectedScreen = 0;
updateScroller();
});

dialog.appendChild(title);
dialog.appendChild(subVersion);
dialog.appendChild(scrollerContainer);
dialog.appendChild(scrollerPosCont);
dialog.appendChild(prev);
dialog.appendChild(next);

const wrapper = queryElements(".dialog_wrapper")[0];
wrapper.style.opacity = 1;
wrapper.style.pointerEvents = "all";
wrapper.style.display = "block";

wrapper.addEventListener("click", function() {
wrapper.style.opacity = 0;
wrapper.style.pointerEvents = "none";

setTimeout(() => {
wrapper.style.display = "none";
dialog.style.width = "400px";
dialog.style.height = "160px";
dialog.style.top = "calc(50% - 80px)";
}, 250);
});
}

module.exports = { showWhatsNew };

0 comments on commit 1308355

Please sign in to comment.
You can’t perform that action at this time.