I have tooltip component created with antd library.
I would like to change arrow style to something like that.
import { Button, Tooltip } from 'antd';
import styled from 'styled-components';
export const TooltipOK = () => (
<>
<Tooltip placement='topLeft' title="Cool Tooltip" color='purple' getPopupContainer={(triggerNode) => triggerNode}>
<Button>Cool Text</Button>
</Tooltip>
</ >
);
export default TooltipOK;
const StyledTooltip = styled.div`
.ant-tooltip-arrow { // arrow wrapper
right: 0;
left: initial;
}
.ant-tooltip-arrow-content { // arrow itself
background: white;
}
.ant-tooltip-inner { // tooltip
background-color: white;
box-shadow: none;
border: 1px solid #D04A02;
color: black;
}
`
Related
In my Vaadin application (Vaadin 23.2.0) I use tabs to group my content. The main colours of my application are white, grey and some accents in red. Accordingly, I would like to style my selected tabs in red.
I have already managed the following:
Unselected tabs are displayed in black.
Selected tabs are displayed in red.
Now Vaadin has a transition between clicking on the tab and the selection of the tab. By default, this transition is kept in Vaadin blue, which of course does not fit my theme. And I can't manage to style this transition. I would like to either style it dark red (to make the transition from dark red to my already used lighter red #DE323C) or omit it completely.
How does this work in Vaadin?
For styling the tabs I have used the following CSS snippets so far:
vaadin-tab[selected] {
colour: #DE323C;
}
vaadin-tab[selected]::before, vaadin-tab[selected]::after {
background-color: #DE323C;
}
I did some more tests with ::before and ::after, but Vaadin is very unimpressed.
Here is a simplified version of my Java code:
package ch.abacus.apihub.views.list;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.component.tabs.TabsVariant;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;
#PageTitle("Test")
#Route(value = "test", layout = MainLayout.class)
public class TestView extends Div {
private final Tab tab1;
private final Tab tab2;
private final Tab tab3;
private final VerticalLayout content;
public TestView() {
// Create Tabs
tab1 = new Tab("This is tab 1");
tab2 = new Tab("This is tab 2");
tab3 = new Tab("This is tab 3");
// Event-Listener for clicking tabs
Tabs tabs = new Tabs(tab1, tab2, tab3);
tabs.addSelectedChangeListener(event ->
setContent(event.getSelectedTab())
);
// Tabs use available space
tabs.addThemeVariants(TabsVariant.LUMO_EQUAL_WIDTH_TABS);
// Create VerticalLayout for Tabs
content = new VerticalLayout();
content.setSpacing(false);
setContent(tabs.getSelectedTab());
// Add Tabs to created VerticalLayout
add(tabs, content);
}
private void setContent(Tab tab) {
content.removeAll();
if (tab.equals(tab1)) {
Paragraph tab1Paragraph = new Paragraph("Test tab 1");
content.add(tab1Paragraph);
} else if (tab.equals(tab2)) {
Paragraph tab2Paragraph = new Paragraph("Test tab 2");
content.add(tab2Paragraph);
} else if (tab.equals(tab3)) {
Paragraph tab3Paragraph = new Paragraph("Test tab 3");
content.add(tab3Paragraph);
}
}
}
You should create a file called vaadin-tab.css in frontend/themes//components
Inside that you can style all styles of a component
For example:
:host {
color: var(--lumo-primary-text-color);
font-weight: 400;
}
:host([selected]) {
color: black;
background-color: var(--tosca-selection-nonfocus);
transition: 0.6s color;
}
:host([selected].focused) {
color: black;
background-color: #8fc8d5;
transition: 0.6s color;
}
:host([selected])::before, :host([selected])::after {
display: none;
}
Learn more about styling components:
https://vaadin.com/docs/latest/styling/custom-theme/styling-components
Thank you very much for your answers.
The typo only crept in on Stackoverflow. It is not present in my CSS.
I placed the CSS code in the styles.css file.
I have now created a separate style sheet for the tabs. It probably wouldn't have been necessary, but I find it quite good that all the style things for the tabs can then be found in one place.
I was able to solve the problem by copying the default styles of the tabs from the #shadow-root of the tabs and overwriting them. My vaadin-tab.css now looks like this:
:host { /* Styling tab not focused etc. */
box-sizing: border-box;
padding: 0.5rem 0.75rem;
font-size : 16px;
line-height: 1;
font-weight: 500;
opacity: 1;
color: #282828;
transition: 0.15s color, 0.2s transform;
flex-shrink: 0;
display: flex;
align-items: center;
position: relative;
transform-origin: 50% 100%;
outline: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
min-width: var(--lumo-size-m);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
text-transform : UPPERCASE;
letter-spacing : 1px;
}
:host(:hover), :host([focus-ring]) { /* Styling tab hovered */
color: #B11D24; /* darker red */
}
:host([selected]) { /* Styling tab selected */
color: #DE323C;
transition: 0.6s color;
}
:host([active]:not([selected])) { /* relevant for transition */
color: #DE323C;
transition-duration: 0.1s;
}
:host::before, :host::after { /* Styling color line below text of tab */
content: '';
position: absolute;
display: var(--_lumo-tab-marker-display, block);
bottom: 0;
left: 50%;
width: var(--lumo-size-s);
height: 2px;
background-color: #282828;
border-radius: var(--lumo-border-radius-s) var(--lumo-border-radius-s) 0 0;
transform: translateX(-50%) scale(0);
transform-origin: 50% 100%;
transition: 0.14s transform cubic-bezier(0.12, 0.32, 0.54, 1);
will-change: transform;
}
:host([selected])::before, :host([selected])::after { /* Styling color line below text of tab selected */
background-color: #DE323C;
}
Probably some CSS configurations could be removed, but I am quite satisfied: When hovering over it, the tabs are displayed in dark red and when clicking on a tab, the transition to my lighter red takes place. The Vaadin blue has now completely disappeared.
I wrote some kind of that: http://jsfiddle.net/py3DE/203/ but when element is dragged into proper container, we can override it by dragging other div into its area. Could you tel me how i can block dragged elements, and if someone will try to override any element, div returns back into area with undragged divs?
if (!ui.draggable.closest('.empty').length) item = item.draggable()'
There is a simple way to do this. Basically, we'll remove the class empty and use the disable method.
Working Example: http://jsfiddle.net/Twisty/5rdxmp4p/
Minor CSS Change
.filled .item .closer {
display: block;
}
Drop Function
drop: function(ev, ui) {
if ($(this).hasClass("empty")) {
$(this).removeClass("empty").addClass("filled");
$(this).droppable("disable");
} else {
return false;
}
var item = ui.draggable;
if (!ui.draggable.closest('.empty').length) item = item.draggable(); // if item was dragged from the source list - clone it
this.innerHTML = ''; // clean the placeholder
item.css({
top: 0,
left: 0
}).appendTo(this); // append item to placeholder
}
Swapping the class allows the X button to appear. We then run the disable method to ensure that this specific item will no longer accept a dragged item. If the user drags an item to this spot, it is then reverted.
Update
Using Sortable: http://jsfiddle.net/Twisty/5rdxmp4p/2/
HTML
<div id="dragItems" class="source">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
</div>
<div id="sortItems" class="target">
</div>
CSS
body {
background: #fff;
}
.source,
.target {
margin: 20px;
min-height: 190px;
width: 400px;
border: 1px solid green;
}
.target {
border: 1px solid blue;
}
.item {
height: 20px;
margin: 5px;
padding: 5px;
border: 1px solid gray;
background-color: #cd8;
position: relative;
}
.closer {
float: right;
width: 20px;
height: 20px;
border: 0;
background-color: transparent;
}
.closer:hover {
background-color: transparent;
border: 0;
}
.empty {
height: 30px;
margin: 5px;
background: #eee;
border: 1px dashed #999;
}
.highlight {
border: 1px solid red;
background: #fff;
}
.highlight .item {
opacity: 0.3;
}
.ui-draggable-dragging {
z-index: 99;
opacity: 1 !important;
width: 378px;
}
jQuery
$(function() {
$("#sortItems").sortable({
axis: "y",
items: "> div",
placeholder: "empty",
dropOnEmpty: true,
stop: function(e, ui) {
var $it = ui.item;
if ($it.find(".closer").length == 0) {
var closeBtn = $("<span>", {
class: "closer"
});
$it.append(closeBtn);
closeBtn.button({
icon: "ui-icon-close",
label: "Close",
showLabel: false
}).click(function(ev) {
console.log("[INFO]: Closing ", $it);
$it.fadeTo(200, 0.0, function() {
$it.remove();
$("#sortItems").sortable("refresh");
});
});
}
}
});
$("#dragItems .item").draggable({
connectToSortable: "#sortItems",
revert: "invalid"
});
$("#sortItems").disableSelection();
});
I use a kendo grid in my application with custom command for each line like this:
.Columns(
columns =>
{
//fields 1
//fields 2
columns.Command(command =>
{
command.Custom("View").Click("view");
command.Custom("Edit").Click("edit");
command.Custom("Delete").Click("delete");
}).Width(300);
}
)
It work but now I need to put icon (awesome font ?) instead of string.
Thank you for help
You can customize the look and like of the buttons with CSS. In the following example the button is customized with a background-image.
.k-grid-content .k-button {
width: 20px;
height: 20px;
border: none;
min-width: 0 !important;
border-radius: 0;
color: transparent;
text-indent: -10000%;
box-shadow: none !important;
}
.k-grid-content .k-button span {
display: none;
}
.k-grid-content .k-button.k-grid-Edit {
background: url(/img/icons/icon-edit.png) no-repeat;
}
I created a dojo for you. Hope it helps.
http://dojo.telerik.com/ETIYa/2
Is there any knockout plugin for showing a nested context menu?
My specific need is to show a contextmenu for list items, that has a "SendTo" menuitem and the possible subItems have to be set at runtime.
In the apparent lack of suitable plugins I went for the more direct Knockout approach. I'm sure the code can be more elegantly packed in a custom binding but this is the solution I came up with, if anyone would need something similar. In my case the menu is build each time it's opened because it makes sense in my usecase. I'm sure the code can easily be customized to some other scenarios.
So... The markup:
<li data-bind="event: { contextmenu: $root.showSendToMenu }/>
is used to show the popup menu, for an item on a right click.
And the markup for the menu itself:
#*The send to popup menu*#
<ul class="context-menu" data-bind="visible:contextMenu.activeElement, style:{left:contextMenu.left, top:contextMenu.top}, template: { name: 'menu-item-template', foreach: contextMenu.items }, event: { mouseleave: contextMenu.contextMouseLeave }"></ul>
#*Template for a menu item*#
<script type="text/html" id="menu-item-template">
<li>
<!-- ko if: children -->
<span data-bind="text:text"></span>
<ul data-bind="template: { name: 'menu-item-template', foreach: children }"></ul>
<!-- /ko -->
<!-- ko if: !children -->
<!-- /ko -->
</li>
</script>
And in the viewModel, I have the following code (TypeScript):
contextMenu = { activeElement: ko.observable(null), left: ko.observable('0px'), top: ko.observable('200px'), items: ko.observableArray(<MenuItem[]>[]), contextMouseLeave : () => { this.contextMenu.activeElement(null); } };
showSendToMenu = (item, event) => {
//Set menu position
this.contextMenu.left(event.pageX + 'px');
this.contextMenu.top(event.pageY + 'px');
//Build the menu
var lines = [];
for (var i = 0; i < this.prodLines().length; i++) {
var line = this.prodLines()[i];
if (line.lists().length > 0) {
var lists = [];
for (var j = 0; j < line.lists().length; j++) {
var list = line.lists()[j];
lists.push(new MenuItem(list.name(), null, list));
}
lines.push(new MenuItem(line.name + "->", lists, line));
}
}
var items = [new MenuItem("SendTo ->", lines)];
//Set the menu
this.contextMenu.items(items);
this.contextMenu.activeElement(item);
}
onContextClick = (menuItem: MenuItem) => {
var sendToList = menuItem.tag;
var item = this.contextMenu.activeElement();
this.dropToList(item, sendToList);
//Hide the menu
this.contextMenu.activeElement(null);
}
And lastly, I used this piece of css to make the menu behave menu-like:
.context-menu {
position: absolute;
padding: 0;
margin: 0;
z-index: 1030;
background-color: #dddddd;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
min-width:100px;
border: 1px solid gray;
text-decoration:none;
}
.context-menu ul {
position: absolute;
z-index: 1031;
line-height: 1.6;
padding: 0;
margin: 0;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
display:none;
left:98px;
min-width:100px;
top:-1px;
background-color:#dddddd;
border: 1px solid gray;
text-decoration:none;
}
.context-menu li {
position:relative;
}
.context-menu li:hover > ul {
display:block;
}
.context-menu li {
padding: 4px 20px;
margin: 0;
list-style-type: none;
cursor: pointer;
white-space: nowrap;
color: #333333;
}
.context-menu ul > li:hover {
background-color: white;
text-decoration:underline;
}
I hope this will help someone
Style based on question jqGrid - How can I make the paging buttons bigger? is used to make jqgrid top level toolbar buttons bigger:
.ui-jqgrid .ui-jqgrid-toppager { height:35px !important; }
.ui-jqgrid .ui-pg-button { height:30px !important; width:30px !important;}
.ui-jqgrid .ui-jqgrid-toppager .ui-icon { position:relative; margin: 0px 10px;}
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div span.ui-icon {
margin: 0 10px !important;
}
/* some settings to place Button in jqGrid */
.ui-jqgrid .ui-pg-table .my-nav-checkbox
{
margin: 0px;
padding: 0px;
float: left;
height: 18px;
}
.ui-jqgrid .ui-pg-table .my-nav-checkbox > input
{
padding: 1px;
}
.ui-jqgrid .ui-pg-table .my-nav-checkbox > label
{
margin: 0px;
border-width: 0px;
}
.ui-jqgrid .ui-pg-table .my-nav-checkbox:hover > label
{
margin: 0px;
border-width: 1px;
}
/* fixing CSS of jQuery UI Buttons */
.ui-jqgrid .ui-pg-table .my-nav-checkbox > .ui-button > span.ui-button-text
{
margin: 0px;
padding: 1px 2px 1px 16px;
}
.ui-button-icon-only
{
width: 16px;
}
.ui-jqgrid .ui-pg-table .my-nav-checkbox > .ui-button > span.ui-button-icon-primary
{
margin: -8px 0px 0px -8px;
}
jqgrid toolbar contains also custom checkable buttons based on Oleg answer defined like:
var autoedit = false;
$("#grid_toppager_left table.navtable tbody tr").append(
'<td class="ui-pg-button ui-corner-all">' +
'<div class="ui-pg-div my-nav-checkbox">' +
'<input tabindex="-1" type="checkbox" id="AutoEdit" ' + (autoedit ? 'checked ' : '')+'/>' +
'<label title="Press to toggle"' +
' for="AutoEdit">Press to toggle</label></div></td>'
);
$("#AutoEdit").button({
text: false,
icons: {primary: "ui-icon-star"}
}).click(function () {
autoedit = !autoedit;
});
this custom button (star icon) in toolbar appears in wrong position: too right and together with next button:
Also width is smaller than standard button and top alignment is too big:
How to make custom button like standard button ?
If you need to use toolbar icons which are larger as standard I would recommend you to use Font Awesome icons in the navigator toolbar instead of standard jQuery UI icons. I described in the answer.
For example if I set just the following CSS in the old demo
.ui-jqgrid .ui-jqgrid-toppager { height:30px !important;}
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div>span { margin: 0 5px; font-size: 20px; }
I can use 20px icons in the top toolbar. The demo will shows the following results
Because all icons from Font Awesome are implemented just as vector fonts one get perfect results for any font size (icon size). One need of cause to post all other custom solution (like checkable buttons) to Font Awesome, but after some investments you could get very good final results.