Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Tahoe skin: boolean ListGridFields and filtering and editing

    Hi Isomorphic,

    please see this sample (now on SNAPSHOT_v11.1d_2017-03-19):
    Click image for larger version

Name:	BooleanItemListGridField.png
Views:	116
Size:	17.1 KB
ID:	243608
    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

    #2
    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.

    Comment


      #3
      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:
      Code:
      .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:
      Click image for larger version

Name:	cb-sprites.png
Views:	133
Size:	3.5 KB
ID:	243668

      cb-sprites.svg:

      Rename cb-sprites.txt

      Best regards
      Blama
      Attached Files

      Comment


        #4
        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).

        Code:
        [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
        Attached Files

        Comment


          #5
          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?

          Comment


            #6
            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.
            Click image for larger version

Name:	CheckBox_moves.gif
Views:	92
Size:	36.8 KB
ID:	248630

            Best regards
            Blama

            Comment


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

              Comment


                #8
                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):

                Click image for larger version

Name:	Box moves on click.gif
Views:	93
Size:	23.1 KB
ID:	250483

                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

                Comment


                  #9
                  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.
                  Click image for larger version

Name:	Filter BooleanItem hover.gif
Views:	97
Size:	114.0 KB
ID:	250964

                  Best regards
                  Blama

                  Comment


                    #10
                    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+.
                    Last edited by Isomorphic; 5 Jan 2018, 01:09.

                    Comment


                      #11
                      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

                      Comment


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

                        The second point is indeed by design.

                        Comment


                          #13
                          Hi Isomorphic,

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

                          Best regards
                          Blama

                          Comment

                          Working...
                          X