Skip to content
Permalink
Browse files

Overlay borders (#732)

* draw overlay edges

* change overlay background color

* dinamic border alpha

* always show edit mode border

* full displays overlay (#730) (#747)
  • Loading branch information
Manuel-777 committed Nov 23, 2019
1 parent 3dd01d2 commit 812ed49708e7f6e890d466ed745fc20c22a9996c
@@ -75,12 +75,6 @@ export default function OverlayWindowlet(
const containerRef = useRef(null);
useEditModeOnRef(editMode, containerRef, settings.overlay_scale);

const backgroundImage =
"url(" +
(settings.back_url && settings.back_url !== "default"
? settings.back_url
: DEFAULT_BACKGROUND) +
")";
// useEffect(() => {
// const xhr = new XMLHttpRequest();
// xhr.open("HEAD", arg);
@@ -141,12 +135,35 @@ export default function OverlayWindowlet(
</div>
);
}

const backgroundImage =
"url(" +
(settings.back_url && settings.back_url !== "default"
? settings.back_url
: DEFAULT_BACKGROUND) +
")";

const backgroundColor = settings.overlay_back_color;

const bgStyle:any = {
opacity: overlaySettings.alpha_back.toString()
}

// This needs its own setting, like a checkbox or something
const solidBg:boolean = backgroundColor !== "rgba(0,0,0,0)";
if (!solidBg)
bgStyle.backgroundImage = backgroundImage;
else
bgStyle.backgroundColor = backgroundColor;

const borderAlpha = (overlaySettings.alpha_back * 1.5).toString();
return (
<div
className={"overlay_container " + getEditModeClass(editMode)}
id={"overlay_" + (index + 1)}
ref={containerRef}
style={{
border: "1px solid rgba(128, 128, 128, " + borderAlpha + ")",
opacity: isVisible ? "1" : "0",
visibility: isVisible ? "visible" : "hidden",
height: overlaySettings.bounds.height + "px",
@@ -157,11 +174,8 @@ export default function OverlayWindowlet(
>
<div className="outer_wrapper">
<div
className="overlay_wrapper overlay_bg_image"
style={{
backgroundImage,
opacity: overlaySettings.alpha_back.toString()
}}
className={"overlay_wrapper overlay_bg_image " + (solidBg ? "after_hidden" : "")}
style={bgStyle}
/>
</div>
{overlaySettings.top && (
@@ -39,6 +39,7 @@ body {
}

.overlay_container {
border: 1px solid gray;
background-position: center;
border-radius: 4px;
background-size: cover;
@@ -63,7 +64,7 @@ body {
*/

.editable {
border: 2px var(--color-g) dashed;
border: 2px var(--color-g) dashed !important;
-webkit-transition: none !important;
}

@@ -81,6 +81,7 @@ export interface SettingsData {
cards_quality: string;
cards_size: number;
cards_size_hover_card: number;
overlay_back_color: string;
back_color: string;
back_url: string;
card_tile_style: number | string;
@@ -71,6 +71,7 @@ const defaultCfg = {
cards_size_hover_card: 10,
export_format: "$Name,$Count,$Rarity,$SetName,$Collector",
back_color: "rgba(0,0,0,0.3)",
overlay_back_color: "rgba(0,0,0,0.0)",
back_url: "",
right_panel_width: 400,
last_date_filter: DATE_LAST_30,

Some generated files are not rendered by default. Learn more.

@@ -502,8 +502,8 @@ function appendOverlay(section) {
editModeButton.addEventListener("click", function() {
ipcSend("toggle_edit_mode");
});
/*
displayControls.appendChild(editModeButton);
/*
// Set Overlay Display Screen
const overlayDisplay = pd.settings.overlay_display
? pd.settings.overlay_display
@@ -528,8 +528,33 @@ function appendOverlay(section) {
displaySelect.style.width = "180px";
displaySelect.style.marginLeft = "32px";
displayControls.appendChild(label);
section.appendChild(displayControls);
*/
section.appendChild(displayControls);

// Copy pasta with bolognesa!
const pickerLabel = createLabel(
["but_container_label"],
"<span style='margin-right: 32px;'>Background color <i>(0,0,0,0 to use default background)</i>:</span>"
);
const colorPick = createInput(["color_picker"], "", {
id: "flat",
type: "text",
value: "Example Content"
});
colorPick.style.backgroundColor = pd.settings.overlay_back_color;
colorPick.addEventListener("click", function(e) {
e.stopPropagation();
showColorpicker(
pd.settings.overlay_back_color,
color => (colorPick.style.backgroundColor = color.rgbaString),
color =>
ipcSend("save_user_settings", { overlay_back_color: color.rgbaString }),
() => (colorPick.style.backgroundColor = pd.settings.overlay_back_color),
{ alpha: true }
);
});
pickerLabel.appendChild(colorPick);
section.appendChild(pickerLabel);

const sliderScale = createDiv(["slidecontainer_settings"]);
const sliderScaleLabel = createLabel(

0 comments on commit 812ed49

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