Tahoe skin: boolean ListGridFields and filtering and editing

[Blama]

Hi Isomorphic,

please see this sample (now on SNAPSHOT_v11.1d_2017-03-19):

There are some problems here IMHO:

• Positioning is not in line
• Filter BooleanItem is not vertically centered in the filter row
• I don't understand the One-way-sign when hovering the BooleanItems in the data. Should't be the different background enough to indicate that you can't edit here?
• The tri-state BooleanItem in the filterRow has the problem that it is not possible to identify "false" and "null" by just looking at the item. This is better in Enterprise / Simplicity. Now the user only wonders why it takes him two clicks from unselected to selected.

While the first two are just bugs, I assume that the others are on purpose. Here I really like the other options I described better.

Best regards
Blama

[Isomorphic]

The "one way sign" you refer to is the standard cursor for indicating something is non-interactive, which is what it is doing here.

The others are already tracked.

[Blama]

Hi Isomorphic,

I wanted to try something new and I'll anyway want to customize the blue color of the Check, so I created this sprite in Inkscape. Perhaps it will help you targeting this one faster.

Most likely using a sprite here involves more skin changes. I saw that you have a sprite file in Enterprise here, but use small pngs cut from the sprite.

If you change the SVG, can you please include it in the framework download? Best, for all *.png and *.gif you deliver (see also here).

skin_styles.css changes:

.checkboxTrueDisabled,
.checkboxTrue,
.checkboxTrueOver,
.checkboxTrueDown,
.checkboxFalseDisabled,
.checkboxFalse,
.checkboxFalseOver,
.checkboxFalseDown,
.checkboxPartialDisabled,
.checkboxPartial,
.checkboxPartialOver,
.checkboxPartialDown,
.checkboxUnsetDisabled,
.checkboxUnset,
.checkboxUnsetOver,
.checkboxUnsetDown {
  min-height: 25px;
  display: inline-block;
  background-position: 0px 0px;
  padding-left: 10px;
  vertical-align: middle !important;
  background: url(./images/LT/replacements/cb-sprites.png) no-repeat;
  width: 25px;
  height: 25px;
  }

.checkboxTrueDisabled {
  background-position: -3px -4px;
}

.checkboxTrue {
  background-position: -32px -4px;
}

.checkboxTrueOver {
  background-position: -61px -4px;
}

.checkboxTrueDown {
  background-position: -90px -4px;
}

.checkboxFalseDisabled {
  background-position: -3px -37px;
}

.checkboxFalse {
  background-position: -32px -37px;
}

.checkboxFalseOver {
  background-position: -61px -37px;
}

.checkboxFalseDown {
  background-position: -90px -37px;
}

.checkboxUnsetDisabled {
  background-position: -3px -70px;
}

.checkboxUnset {
  background-position: -32px -70px;
}

.checkboxUnsetOver {
  background-position: -61px -70px;
}

.checkboxUnsetDown {
  background-position: -90px -70px;
}

cb-sprites.png:


cb-sprites.svg:
Rename cb-sprites.txt

Best regards
Blama

[Blama]

Hi Isomorphic,

I improved handling of the file a bit. For now, I'll just replace your CheckBox files and not use a sprite.
Attached the revised SVG file and the code I use to convert it to a pngs, if needed (Windows bat file).

[USER="13436"]echo[/USER] off
set customerName=%1
set customerColor=%2

REM Replacement Icons
mkdir workdir\%customerName%\replacements

for /R replacements %%a in (cb-sprites.svg) do (
    @copy replacements\%%~na%%~xa workdir\%customerName%\replacements\%%~na%%~xa
    REM skinned version
    rxrepl.exe --file workdir\%customerName%\replacements\%%~na%%~xa --alter --no-backup --search #157FCC --replace %customerColor%
    "C:\Program Files\Inkscape-0.48\inkscape.exe" -f "workdir\%customerName%\replacements\%%~na%%~xa" -e "workdir\%customerName%\replacements\cb-TrueDisabled.png" "--export-id=checkboxTrueDisabled_outerbox" "--export-width=24" "--export-background-opacity=100"
    "C:\Program Files\Inkscape-0.48\inkscape.exe" -f "workdir\%customerName%\replacements\%%~na%%~xa" -e "workdir\%customerName%\replacements\cb-True.png" "--export-id=checkboxTrue_outerbox" "--export-width=24" "--export-background-opacity=100"
    "C:\Program Files\Inkscape-0.48\inkscape.exe" -f "workdir\%customerName%\replacements\%%~na%%~xa" -e "workdir\%customerName%\replacements\cb-TrueOver.png" "--export-id=checkboxTrueOver_outerbox" "--export-width=24" "--export-background-opacity=100"
    "C:\Program Files\Inkscape-0.48\inkscape.exe" -f "workdir\%customerName%\replacements\%%~na%%~xa" -e "workdir\%customerName%\replacements\cb-TrueDown.png" "--export-id=checkboxTrueDown_outerbox" "--export-width=24" "--export-background-opacity=100"
    "C:\Program Files\Inkscape-0.48\inkscape.exe" -f "workdir\%customerName%\replacements\%%~na%%~xa" -e "workdir\%customerName%\replacements\cb-FalseDisabled.png" "--export-id=checkboxFalseDisabled_outerbox" "--export-width=24" "--export-background-opacity=100"
    "C:\Program Files\Inkscape-0.48\inkscape.exe" -f "workdir\%customerName%\replacements\%%~na%%~xa" -e "workdir\%customerName%\replacements\cb-False.png" "--export-id=checkboxFalse_outerbox" "--export-width=24" "--export-background-opacity=100"
    "C:\Program Files\Inkscape-0.48\inkscape.exe" -f "workdir\%customerName%\replacements\%%~na%%~xa" -e "workdir\%customerName%\replacements\cb-FalseOver.png" "--export-id=checkboxFalseOver_outerbox" "--export-width=24" "--export-background-opacity=100"
    "C:\Program Files\Inkscape-0.48\inkscape.exe" -f "workdir\%customerName%\replacements\%%~na%%~xa" -e "workdir\%customerName%\replacements\cb-FalseDown.png" "--export-id=checkboxFalseDown_outerbox" "--export-width=24" "--export-background-opacity=100"
    "C:\Program Files\Inkscape-0.48\inkscape.exe" -f "workdir\%customerName%\replacements\%%~na%%~xa" -e "workdir\%customerName%\replacements\cb-UnsetDisabled.png" "--export-id=checkboxUnsetDisabled_outerbox" "--export-width=24" "--export-background-opacity=100"
    "C:\Program Files\Inkscape-0.48\inkscape.exe" -f "workdir\%customerName%\replacements\%%~na%%~xa" -e "workdir\%customerName%\replacements\cb-Unset.png" "--export-id=checkboxUnset_outerbox" "--export-width=24" "--export-background-opacity=100"
    "C:\Program Files\Inkscape-0.48\inkscape.exe" -f "workdir\%customerName%\replacements\%%~na%%~xa" -e "workdir\%customerName%\replacements\cb-UnsetOver.png" "--export-id=checkboxUnsetOver_outerbox" "--export-width=24" "--export-background-opacity=100"
    "C:\Program Files\Inkscape-0.48\inkscape.exe" -f "workdir\%customerName%\replacements\%%~na%%~xa" -e "workdir\%customerName%\replacements\cb-UnsetDown.png" "--export-id=checkboxUnsetDown_outerbox" "--export-width=24" "--export-background-opacity=100"

    del workdir\%customerName%\replacements\%%~na%%~xa
    echo source:[replacements\%%~na%%~xa] to:[replacements\%%~na.png] ["12 versions"]
)

Best regards
Blama

[Isomorphic]

You should already be able to use real SVGs (with <object> tags being generated rather than <img>) in 6.1 - which version are you testing?

[Blama]

Hi Isomorphic,

the horizontal alignment issue from #1 is still open using v11.1p_2017-08-20. Please see this sample and add showFilterEditor: true.
Also, the unset-icon moves on hover.


Best regards
Blama

[Isomorphic]

Both of these have been fixed for builds dated August 25 and later.

[Blama]

Hi Isomorphic,

searching the forums I saw that I did not retest this one.
I can see that it is fixed for hover, but there is still some movement for clicks (very minor for me and I assume everyone, v11.1p_2017-11-20):



As you can see on the beginning and on the end of the capture, the box moves visibly for the transition from unset to true.

Best regards
Blama

[Blama]

Hi Isomorphic,

I can see you did some changes here in 12.0d (SNAPSHOT_v12.0d_2017-12-29), but now the white cell background seems to move here on hover (Chromium 63.0.3239.84).
The moving box issue from #8 is still present in 12.0d nevertheless.


Best regards
Blama

[Isomorphic]

This is fixed in 12.0 for builds dated January 6 and later - we added over-styling for FormItems in 12.0 and missed adding a couple of *Over classes for checkBoxItem.

Note that the 1px offset problem with the two "partial" (anything) images from #8 is also fixed for tomorrow's builds, in 11.1+.

[Blama]

Hi Isomorphic,

I can see that the 1px offset problem from #8 is fixed in SNAPSHOT_v12.0d_2018-01-07 and v11.1p_2018-01-07, thanks.

Please note that in 12.0d, the over-styling for FormItems-issue for checkBoxItem is fixed. But I still do see two other issues here:

• Date-column "Nationhood": Same issue on hover as before for checkBoxItem
• checkBox-column "G8": No blue border around the filter-cell on hover (like for all other columns), only hover-image for the checkbox itself (might be on purpose, though)

Best regards
Blama

[Isomorphic]

The first issue you mention has been fixed for tomorrow's builds.

The second point is indeed by design.

[Blama]

Hi Isomorphic,

this is all fixed for me in the 12.0d sample using SNAPSHOT_v12.0d_2018-01-10.

Best regards
Blama