[NIFI-2038] Make component buttons larger and add grip across bottom

• Type: Sub-task
• Status: Resolved
• Priority: Major
• Resolution: Fixed
• Component/s: Core UI
• Assignee: Scott Aslan
• Reporter: Rob Moran
• Created: 16/Jun/16 19:15
• Updated: 19/Jul/16 20:35
• Resolved: 08/Jul/16 13:06

Description

For #header .component-button
REMOVE
background-color: #aabbc3;
border-radius: 2px;

ADD
background: none;
height: 56px;
position: relative;
width: 56px;

Could not find CSS where current hover state is being applied to .component-button, but need to change background-color and and box-shadow
(FOR COMPONENT-BUTTON HOVER STATE)
background-color: #e3e8eb;
box-shadow: 0 3px 6px rgba(0,0,0,0.3);

For the button grip
See the attached image (component-button-sample.png) mocked up using browser dev tools.
This was created by adding

<span class="component-button-grip"></span>

within each

<button>

and applying this CSS class:

.component-button-grip {
    background: repeating-linear-gradient(90deg,rgba(170,187,195,1),rgba(170,187,195,1) 4px,rgba(170,187,195,0) 4px,rgba(170,187,195,0) 6px);
    bottom: 2px;
    height: 4px;
    left: 2px;
    position: absolute;
    width: 52px;
}

The grip should also drag onto the canvas along with the icon. I don't believe any changes are needed for this to happen.

Issue Links

• duplicates: NIFI-1906 UI - Toolbox Icons for hover and draggable
• relates to: NIFI-1906 UI - Toolbox Icons for hover and draggable
• links to: GitHub Pull Request #604