[
https://issues.apache.org/jira/browse/NIFI-2038?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=15364769#comment-15364769
]
ASF GitHub Bot commented on NIFI-2038:
--------------------------------------
Github user moranr commented on the issue:
https://github.com/apache/nifi/pull/604
For **NIFI-2038**
* For #header .component-button, height and width properties are declared
twice at 40px and 56px. Should only be 56px
* Icons (#header .icon and #header .fa) should be 32px (NIFI-2037)
* Looks like #header .icon will need padding-left:6px added to center them
within the buttons (once size is updated to 32px)
* The version of each icon with a plus should display on hover. Currently
it only shows once you start dragging
* When button is click and while dragging, set cursor to cursor:grabbing
See mockup as example (nifi-drag-drop-component.png)
> Make component buttons larger and add grip across bottom
> --------------------------------------------------------
>
> Key: NIFI-2038
> URL: https://issues.apache.org/jira/browse/NIFI-2038
> Project: Apache NiFi
> Issue Type: Sub-task
> Components: Core UI
> Reporter: Rob Moran
> Assignee: Scott Aslan
> Attachments: component-button-sample.png
>
>
> *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 {code}<span
> class="component-button-grip"></span>{code} within each {code}<button>{code}
> and applying this CSS class:
> {code}.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;
> }{code}
> The grip should also drag onto the canvas along with the icon. I don't
> believe any changes are needed for this to happen.
--
This message was sent by Atlassian JIRA
(v6.3.4#6332)
