Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add toolbox text style support #10231

Merged
merged 2 commits into from
Apr 11, 2019
Merged

feat: add toolbox text style support #10231

merged 2 commits into from
Apr 11, 2019

Conversation

Ovilia
Copy link
Contributor

@Ovilia Ovilia commented Apr 8, 2019

#10202 Requested a more flexible toolbox label configuring method. This PR fulfills that requirement but the little triangle in the design of https://gitlab.com/gitlab-org/gitlab-ce/issues/57130 is not supported.

Requirement:
屏幕快照 2019-04-08 18 21 46副本

Example of what you can get from this PR:
屏幕快照 2019-04-08 18 21 46

The text color, background color, border radius, text padding can all be configured.

But the small triangle is currently not supported, because we have to add new option entry for that and thus needs further discussion. @jivanvl Please see if this meets your requirement.


In this PR, I added support for several options for toolbox.emphasis.iconStyle, namely:

  • textPosition, textFill, textAlign: these options were supported but have no effect for settings in toolbox.emphasis.iconStyle.xxx due to a bug and they were fixed in this PR.
  • textBackgroundColor, textBorderRadius, textPadding: these are newly supported options.

They can be set in toolbox.emphasis.iconStyle for all features, or toolbox.feature.XXX.emphasis.iconStyle for a specific feature XXX.

option = {
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {
                show: true,
                title: 'Save as Image',
                emphasis: {
                    iconStyle: {
                        textFill: 'red'
                    }
                }
            },
            restore: {
                show: true,
                title: 'Restore'
            }
        }
        emphasis: {
            iconStyle: {
                textBackgroundColor: '#222',
                textFill: '#ddd',
                textBorderRadius: 3,
                textPadding: [5, 8],
                textPosition: 'top'
            }
        }
    },
    ...
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants