dock-root-pane in DockPane.java becomes dark instead of transparent while dragging.
kuldeep9922 opened this issue · 15 comments
Hi,
While dragging one node the entire dockpane gets black layout with position indicators only. I want it to be transparent as it is in the demo. Please see the image to get a better idea.
Here in this image, I want the background of position indicators to be transparent and expose the internal components. I tried using "-fx-background-color: transparent" in dock-root-pane css class.
Please suggest, what can be done about it?
I am having a hard time understanding what exactly the issue is with this one. I would need to see a reproducible test case that shows the issue. How exactly are you setting the background color to black?
I think you are asking to set the background of the docking buttons transparent and only show the icon. So I think you want this at the end of your stylesheet:
.dock-pos-indicator .button {
-fx-background-color: transparent;
}
.dock-root-pane .button {
-fx-background-color: transparent;
}This may also be what you are looking for. If you want the docking area to be black behind the nodes, then you set it on the dock-pane not the dock-root-pane. The latter is only for laying out the indicators.
.dock-pane {
-fx-background-color: black;
}Hi,
I'm sorry if you didn't get it previously. The solution you suggest is for buttons but for me buttons are fine and I don't want to change that. My problem is the large black background of position indicators, i.e. dockpane where floating node can be dropped, is black. I've highlighted the black area I'm talking about in attached photo.
I hope its clear now, I wanna see components beneath it, instead of black window. For example, in your demo file, the dockpane where over which the node is floating, is transparent and while dragging, I can see the components at back. However, I can't see the same in mine. It's hidden by something black.
Here's one more image to illustrate my problem.
Let me know, if its still unclear.
Alright, thank you, that helps me understand better. Can you show me how exactly you are setting those areas to be black? Or just show me your whole stylesheet.
No, I'm not setting it black. Still, I'm pasting my complete css. I've specified all properties here in this file and nothing related to css is in java.
I've noticed just now that, after removing code in this css from ".body" attributes till end of the file then current issue works fine as expected. What could be the conflicting class/property?
/**
* @file Default.css
* @brief Default styling for docking controls.
*
* @section License
*
* Copyright (C) 2015 Robert B. Colton
* This file is a part of the DockFX Library.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of thDockTitleBare GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
**/
/*******************************************************************************
* *
* DockPane *
* *
******************************************************************************/
.color-palette {
-fx-background-radius: 0, 0;
-fx-effect: null;
}
/* .dock-area-indicator {
-fx-fill: -fx-selection-bar;
-fx-opacity: 0.5;
-fx-stroke: rgba(50, 50, 100, 0.4);
-fx-stroke-width: 6;
-fx-stroke-type: inside;
-fx-stroke-dash-array: 8 4;
-fx-stroke-line-cap: butt;
} */
.dock-pos-indicator {
-fx-padding: 10;
-fx-hgap: 30;
-fx-vgap: 30;
-fx-shape: "M0,10 a10,10 0 1,0 20,0 a10,10 0 1,0 -20,0";
-fx-background-color: rgba(50, 50, 100, 0.4);
-fx-border-width: 50;
-fx-border-color: rgba(50, 50, 100, 0.2);
}
/* JavaFX developers really seem to have fat fingers? */
.dock-pos-indicator .button {
-fx-padding: 4;
}
/* This stops the stack pane containing the aligned
* root dock position indicators from offsetting
* them when one of them is set to the hover style.
* It gives them just enough room to breathe from the border.
*/
.dock-root-pane {
-fx-padding: 5;
-fx-background-color: transparent;
}
/* JavaFX developers really seem to have fat fingers? */
.dock-root-pane .button {
-fx-padding: 4;
}
/* Set the icons for the indicator buttons here. */
.dock-center {
-fx-graphic: url(center.png);
}
.dock-top {
-fx-graphic: url(top.png);
}
.dock-right {
-fx-graphic: url(right.png);
}
.dock-bottom {
-fx-graphic: url(bottom.png);
}
.dock-left {
-fx-graphic: url(left.png);
}
.dock-top-root {
-fx-graphic: url(top.png);
}
.dock-right-root {
-fx-graphic: url(right.png);
}
.dock-bottom-root {
-fx-graphic: url(bottom.png);
}
.dock-left-root {
-fx-graphic: url(left.png);
}
/*******************************************************************************
* *
* DockNode *
* *
******************************************************************************/
.dock-node-border {
-fx-padding: 5;
-fx-background-radius: 5;
-fx-effect: dropshadow( three-pass-box, rgba(0,0,0,0.4), 10,0.2,0,0 );
}
.dock-node-border:maximized {
-fx-padding: 0;
}
/* It is necessary that dock node's have a background color
* because some panes used as content such as TabPane with empty
* tabs will be fully transparent.
*/
.dock-node {
-fx-background-color: -fx-background;
}
.dock-title-bar {
-fx-background-color: -fx-background;
-fx-padding: 2;
-fx-spacing: 3;
-fx-border-width: 1;
-fx-border-color: -fx-outer-border;
}
.dock-title-label {
-fx-graphic: url(docknode.png);
-fx-padding: 0 0 3 0;
-fx-text-fill: white;
-fx-effect: dropshadow( gaussian, rgba(255,255,255,0.2), 0,0,0,1 );
}
/* We want small buttons for our dock's title bar
* but we have to make sure that the top and bottom
* are a good ratio of the left and right padding.
* If not we get extra padding on the bottom when the
* button is hovered, some factor of the default style's
* excessively wide buttons.
*/
.dock-title-bar .button {
-fx-padding: 1 4 1 4;
}
.dock-add-ticker-button {
-fx-graphic: url(plus.png);
-fx-background-color: transparent;
-fx-focus-color: transparent;
}
#add-ticker-button:focused {
-fx-graphic: url(plus.png);
-fx-background-color: transparent;
-fx-focus-color: transparent;
}
/* Set the icons for the dock title bar's buttons here. */
.dock-state-button {
-fx-graphic: url(restore.png);
-fx-background-color: transparent;
}
.dock-node:floating .dock-state-button {
-fx-graphic: url(restore.png);
-fx-background-color: transparent;
}
.dock-node:maximized .dock-state-button {
-fx-graphic: url(maximize.png);
-fx-background-color: transparent;
}
.dock-close-button {
-fx-graphic: url(close.png);
-fx-background-color: transparent;
}
/* JavaFX CSS - Leave this comment until you have at least create one rule which uses -fx-Property */
.body{ -fx-background-color:#eeeeee; -fx-font-family: 'Open Sans', sans-serif;}
.login { -fx-background-color:#fff; -fx-pref-width: 600.0px; -fx-min-height:500.0px; -fx-pref-height: 500.0px;
-fx-alignment: center;
-fx-effect: dropshadow(three-pass-box, rgba(0.0,0.0,0.0,0.2), 10.0, 0.0, 0.0, 0.0);
}
.logo{-fx-padding:0.0px 0.0 25.0px 0.0;}
.btn{ -fx-background-color: #3789d4; /* Old browsers */
-fx-background-color: linear-gradient( #3789d4 0.0%, #3fcf7b 100.0%); /* FF3.6-15 */
-fx-padding:15.0px 20.0px; -fx-text-alignment:center;-fx-font-size:28.0px; -fx-border-width:0.0; -fx-text-fill:#fff;-fx-font-family: 'Open Sans', sans-serif;
}
.user, .pass{ -fx-pref-width:100.0%; -fx-pref-height:50.0px; -fx-border-width:none; -fx-font-size:16.0px; -fx-text-fill:#333;-fx-border-color:#f0f0f0;-fx-border-width:1.0px; -fx-border-style: solid;}
.root{
-fx-background-color: black;
}
.menu-item .label{
-fx-text-fill: #B5B5B8;
}
.context-menu {
-fx-skin: "com.sun.javafx.scene.control.skin.ContextMenuSkin";
-fx-background-color: #48484F;
-fx-padding: 0.333333em 0.083333em 0.666667em 0.083333em;
-fx-border-radius: 5 5 5 5;
-fx-background-radius: 5 5 5 5;
}
#toggleButton{
-fx-background:none;
}
#toggleButton:selected{
-fx-background:none;
}
#newButton{
-fx-graphic: url('newButton.png');
-fx-background-repeat: no-repeat;
-fx-background:none;
}
#graphButton{
-fx-graphic: url('graphButton.png');
-fx-background-repeat: no-repeat;
-fx-background:none;
}
#calculateButton{
-fx-graphic: url('calculateButton.png');
-fx-background-repeat: no-repeat;
-fx-background:none;
}
#arrowButton{
-fx-graphic: url('arrowButton.png');
-fx-background-repeat: no-repeat;
-fx-background:none;
}
#notesButton{
-fx-graphic: url('notesButton.png');
-fx-background-repeat: no-repeat;
-fx-background:none;
}
#blocksButton{
-fx-graphic: url('blocksButton.png');
-fx-background-repeat: no-repeat;
-fx-background:none;
}
#bookButton{
-fx-graphic: url('bookButton.png');
-fx-background-repeat: no-repeat;
-fx-background:none;
}
#newButton:selected{
-fx-background:none;
}
.text-area {
-fx-font-size: 12pt;
-fx-font-family: "Segoe UI Semibold";
-fx-text-fill: #3CB371;
-fx-background-color: #141416;
}
.text-area .content{
-fx-background-color: #141416;
}
.DockTitleBar{
-fx-background-color: #242426;
-fx-border-radius: 3 3 3 3;
-fx-background-radius: 3 3 3 3;
-fx-font-size: 11;
-fx-border-color:#242426;
-fx-box-border: #242426;
}
.titled-pane{
-fx-border-color:#141416;
-fx-box-border: transparent;
}
.titled-pane > *.content {
-fx-border-color: #141416;
}
.titled-pane > .title{
-fx-padding:6 ;
-fx-background-color: #242426;
-fx-border-radius: 3 3 3 3;
-fx-background-radius: 3 3 3 3;
-fx-font-size: 11;
}
.table-view{
-fx-base: #141416;
-fx-control-inner-background: #141416;
-fx-background-color: #141416;
-fx-border-color:transparent;
-fx-table-cell-border-color: transparent;
-fx-table-header-border-color: transparent;
}
.table-view:focused{
-fx-base: #141416;
-fx-control-inner-background: #141416;
}
.table-view .column-header-background{
-fx-background-color: #141416;
}
.table-view .column-header-background .label{
-fx-background-color: transparent;
-fx-text-fill: #717172;
}
.table-view .column-header ,
.table-view > .column-header-background > .filler{
-fx-background-color: #141416;
-fx-border-width:0 0 1 0;
-fx-border-color:#242426;
-fx-font-size: 12;
}
.table-view {
-fx-text-fill: white;
}
.table-row-cell{
-fx-background-color: #141416;
-fx-background-insets: 0, 0 0 1 0;
-fx-border-width:0 0 1 0;
-fx-border-color:#242426;
-fx-padding: 0.0em;
-fx-font-size: 11;
}
.table-row-cell:selected {
-fx-background-color: #242426;
-fx-background-radius: 1;
-fx-border-width:1 0 1 0;
-fx-border-color:#242426;
-fx-table-cell-border-color: transparent;
-fx-table-header-border-color: transparent;
}
.table-view > .virtual-flow > .scroll-bar ,
.table-view > .virtual-flow > .scroll-bar > .track-background ,
.table-view > .virtual-flow > .scroll-bar > .track {
-fx-background-color:#141416;
}
.table-view > .virtual-flow > .scroll-bar > .thumb {
-fx-background-color:#434344;
-fx-background-insets: 2, 0, 0;
-fx-background-radius: 2em;
}
.table-view > .virtual-flow > .scroll-bar > .increment-button,
.table-view > .virtual-flow > .scroll-bar > .decrement-button {
-fx-opacity: 0;
}
.split-pane{
-fx-box-border: transparent;
-fx-background-color: #141416;
}
.split-pane > .split-pane-divider {
-fx-background-color: #161618;
-fx-padding: 0 5 0 0;
}
.f1-list-cell-in-play {
-fx-background-color: #FCD134;
-fx-text-fill: black;
}
.f1-list-cell-in-play-fore-color {
-fx-text-fill: #36964A;
}
.f1-list-cell-hod-trigger {
-fx-background-color: #E35353;
-fx-text-fill: white;
}
.f1-list-cell-status-neutral {
-fx-text-fill: #FCD134;
}
.background-color{
-fx-background-color:#161618;
}
.background-color-sidebar{
-fx-background-color:#262628;
}
.border-color{
-fx-border-color:#2D2D2E;
-fx-border-width:1 1 1 1;
}
.button-background{
-fx-background-color:transparent;
-fx-text-fill:white;
}
.button-background:focused{
-fx-background-color:transparent;
}
.top-center-menu-padding{
-fx-padding:0 20 0 0;
}
.right-menu-bar-padding{
-fx-padding:4 4 20 4;
}
.bottom-menu-Button{
-fx-background-color:#151518;
-fx-text-fill: #7F7F80;
-fx-padding:5 5 5 5;
-fx-margin:0 0 0 0 ;
-fx-border-radius: 0 0 0 0;
-fx-background-radius: 0 0 0 0;
}
.bottom-menu-Button:focused{
-fx-background-color:#49B649;
-fx-border-color:#49B649;
-fx-text-fill: #FFFFFF;
-fx-focus-color: #49B649;
}I am not seeing what you are seeing. I pasted your css into the demo and for me it is still transparent:
I've edited my last comment. By mistake I missed some part of my css. I've edited and pasted the complete css code. I've observed something new, please see my edited last comment and try again if its still not reproducible.
The culprit appears to be the following code:
/* .dock-area-indicator {
-fx-fill: -fx-selection-bar;
-fx-opacity: 0.5;
-fx-stroke: rgba(50, 50, 100, 0.4);
-fx-stroke-width: 6;
-fx-stroke-type: inside;
-fx-stroke-dash-array: 8 4;
-fx-stroke-line-cap: butt;
} */If you want this to be invisible then you should change it to this:
.dock-area-indicator {
-fx-fill: transparent;
display: none;
}No, I already tried it. This code is not creating any problem :( . After uncommenting it, I still face the problem.
Oh no, I was saying I only see the problem when it is commented. When it is uncommented I do not see the problem.
It's not working even after uncommenting :(
When I uncomment that code it looks exactly like the screenshot I posted just a little bit ago. :/
Yes, I understood your approach perfectly. I need to play around with this to make it work. Thanks :)
Alright, I am not really sure what else could be the problem. If you have any other issues please let me know!
Finally, I found out that "root" class in stylesheet was creating problem. It was conflicting with some other stylesheet class/property of docking node/pane. I removed this root class and everything worked well as expected. Btw thanks for the time.
No problem I am glad you got it solved, I am sorry I didn't manage to figure it out for you!