[jboss-jira] [JBoss JIRA] (DROOLS-2922) CSS: Pop-over menu for DMN decision tables.

[Sarah Rambacher (JIRA)]

    [ https://issues.jboss.org/browse/DROOLS-2922?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13637724#comment-13637724 ] 

Sarah Rambacher commented on DROOLS-2922:
-----------------------------------------

[~manstis] I think I understand, but when I move the div.pull-right after the label, it still displays on the same line as the label. You have some other classes (.input-group and .kie-data-type-container) that I'm guessing might be causing problems. I'm happy to look at a live version if it's possible, or screen share to work through it.

{code:java}
  <form id="#DecisionForm">
    <label for="kieName">Name</label>
    <input class="form-control pf-c-form-control" type="text" aria-label="Name text input" id="kieName" placeholder="Name" aria-placeholder="Name">
    <br/>
    <label for="kieDataType">Data Type</label>
    <div class="pull-right">
      <a href="#0"><!-- Links to the manage modal? -->
        <span class="fa fa-gear"></span> Manage
      </a>
    </div>
    
    <div class="btn-group bootstrap-select form-control  pf-c-form-control">
      <button class="dropdown-toggle btn btn-default" type="button" id="dropdownMenu1" data-toggle="dropdown">
        <span class="pull-left">Select</span>
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><input role="menuitem" class="form-control pf-c-form-control" type="text" aria-label="Data type text input" id="kieSelectTypeIn" placeholder="Data type" aria-placeholder="Data type"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">any</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">boolean</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">date</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">applicant</a></li>
      </ul>
    </div>
            
  </form>
{code}



> CSS: Pop-over menu for DMN decision tables.
> -------------------------------------------
>
>                 Key: DROOLS-2922
>                 URL: https://issues.jboss.org/browse/DROOLS-2922
>             Project: Drools
>          Issue Type: Story
>          Components: DMN Editor
>            Reporter: Liz Clayton
>            Assignee: Michael Anstis
>              Labels: UX, UXTeam, drools-tools
>         Attachments: DROOLS-2922.png, DataType selection ('Properties Panel' and 'in-grid').png, Screen Shot 2018-08-10 at 10.23.36 AM.png, pop-overc.png, pop-overcSpecs.png, select.png
>
>
> *Background*
> Persona: Business analyst or Rules practitioner
> Use Cases from the DMN canvas view, as a user I want to:
> * Search a list of available data types from a decision table, as part of an input/selection process. 
> * Select  a data type inline from a decision table. 
> * Have a means to rename the Decision (node.)
> * Have a means to access the Manage Data Types dialog.
> Notes: 
> Design requires a Pop-over, which includes:
> * Form field labels for usability (context) and accessibility.
> * Variant 1 of the PF pop-over patterns, which supports a the pop-up title. 
> * Drop down component with Live Search
> * "Manage" link opens a dialog. 
> * Pop-up is initiated by a single-left mouse click within the respective decision table cell. 
> * Design needs to be reasonably consistent with Stunner and PF components. 
> Verification conditions:
> * Scrum team and PO review. 



--
This message was sent by Atlassian JIRA
(v7.5.0#75005)