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

[Michael Anstis (JIRA)]

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

Michael Anstis edited comment on DROOLS-2922 at 9/24/18 11:48 AM:
------------------------------------------------------------------

[~srambach] Could I please have some help?

The "Data type" selector widget is used in different places and the label is not part of the widget itself (as it can be provided by the generic "Forms" library and the pop-over specific to this JIRA - in both cases the label can also contain different text). That's possibly not entirely clear so hopefully the attached (see "DROOLS-2922.png") screenshot and the following HTML fragments help more.

*When used in the Popover*
{code}
<!-- Rendered by Popover -->
<form id="#DecisionForm">
  <label for="kieName" data-i18n-key="Name">Name</label>
  <input data-field="nameEditor" 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-i18n-key="Data_Type">Data Type</label>
<!-- Rendered by Popover -->

<!-- Data Type Selector Widget -->
  <div data-i18n-prefix="DataTypePickerWidget." data-field="typeRefSelector" id="kieDataType">
    <div class="input-group kie-data-type-container">
      <div class="pull-right">
        <a href="#0" id="typeButton">
          <span class="fa fa-gear"></span> Manage
        </a>
      </div>
      <div class="btn-group bootstrap-select show-tick input-group-btn form-control">..blah blah.. Bootstrap Select component </div>
    </div>
  </div>
<!-- Data Type Selector Widget -->

<!-- Rendered by Popover -->
</form>
<!-- Rendered by Popover -->
{code}
*When used in the Properties Panel*
{code}
<!-- Rendered by Forms -->
<div class="form-group" data-i18n-prefix="DefaultFormGroupViewImpl.">
  <label class="control-label" data-i18n-prefix="FieldLabelViewImpl." data-field="fieldLabel" for="">
    <span data-field="labelText">Output data-type</span>
  </label>
  <div data-field="fieldContainer">
<!-- Rendered by Forms -->

<!-- Data Type Selector Widget -->
    <div data-i18n-prefix="DataTypePickerWidget.">
      <div class="input-group kie-data-type-container">
        <div class="pull-right">
          <a href="#0" id="typeButton">
            <span class="fa fa-gear"></span> Manage
          </a>
        </div>
        <div class="btn-group bootstrap-select show-tick input-group-btn form-control">..blah blah.. Bootstrap Select component </div>
      </div>
    </div>
<!-- Data Type Selector Widget -->

<!-- Rendered by Forms -->
    <div data-field="helpBlock" class="help-block"></div>
  </div>
</div>
<!-- Rendered by Forms -->
{code}
My problem is I need to specify the "label" BEFORE the "Manage" hyperlink but this then shows the "Manage" on a different line to the "label". Your raw {{HTML}} has the "Manage" hyperlink before the "label". Can you please provide some different HTML (I fiddled around for a couple of hours but didn't come up with anything that worked - I'm no HTML/CSS expert for sure!)



was (Author: manstis):
[~srambach] Could I please have some help?

The "Data type" selector widget is used in different places and the label is not part of the widget itself (as it can be provided by the generic "Forms" library and the pop-over specific to this JIRA - in both cases the label can also contain different text). That's possibly not entirely clear so hopefully the attached (DROOLS-2922) screenshot and the following HTML fragments help more.

*When used in the Popover*
{code}
<!-- Rendered by Popover -->
<form id="#DecisionForm">
  <label for="kieName" data-i18n-key="Name">Name</label>
  <input data-field="nameEditor" 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-i18n-key="Data_Type">Data Type</label>
<!-- Rendered by Popover -->

<!-- Data Type Selector Widget -->
  <div data-i18n-prefix="DataTypePickerWidget." data-field="typeRefSelector" id="kieDataType">
    <div class="input-group kie-data-type-container">
      <div class="pull-right">
        <a href="#0" id="typeButton">
          <span class="fa fa-gear"></span> Manage
        </a>
      </div>
      <div class="btn-group bootstrap-select show-tick input-group-btn form-control">..blah blah.. Bootstrap Select component </div>
    </div>
  </div>
<!-- Data Type Selector Widget -->

<!-- Rendered by Popover -->
</form>
<!-- Rendered by Popover -->
{code}
*When used in the Properties Panel*
{code}
<!-- Rendered by Forms -->
<div class="form-group" data-i18n-prefix="DefaultFormGroupViewImpl.">
  <label class="control-label" data-i18n-prefix="FieldLabelViewImpl." data-field="fieldLabel" for="">
    <span data-field="labelText">Output data-type</span>
  </label>
  <div data-field="fieldContainer">
<!-- Rendered by Forms -->

<!-- Data Type Selector Widget -->
    <div data-i18n-prefix="DataTypePickerWidget.">
      <div class="input-group kie-data-type-container">
        <div class="pull-right">
          <a href="#0" id="typeButton">
            <span class="fa fa-gear"></span> Manage
          </a>
        </div>
        <div class="btn-group bootstrap-select show-tick input-group-btn form-control">..blah blah.. Bootstrap Select component </div>
      </div>
    </div>
<!-- Data Type Selector Widget -->

<!-- Rendered by Forms -->
    <div data-field="helpBlock" class="help-block"></div>
  </div>
</div>
<!-- Rendered by Forms -->
{code}
My problem is I need to specify the "label" BEFORE the "Manage" hyperlink but this then shows the "Manage" on a different line to the "label". Your raw {{HTML}} has the "Manage" hyperlink before the "label". Can you please provide some different HTML (I fiddled around for a couple of hours but didn't come up with anything that worked - I'm no HTML/CSS expert for sure!)


> 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)