Skip to content

Commit

Permalink
feat: StatusStripe should respond to font zooming
Browse files Browse the repository at this point in the history 
this also fixes an oversight with font zooming for other icons. for cmd- below the default size, those icons weren’t unzooming
this also cleans up zoom.css, avoiding repeated css paths by leveraging scss nesting

Fixes #4242
  • Loading branch information
@starpit
starpit committed Apr 10, 2020
1 parent 80caabd commit 26ba443
Show file tree
Hide file tree
Showing 2 changed files with 210 additions and 162 deletions.
2 changes: 1 addition & 1 deletion plugins/plugin-client-common/src/components/StatusStripe/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export default class StatusStripe extends React.PureComponent {

public render() {
return (
<div className="kui--status-stripe kui--inverted-color-context" id="kui--status-stripe">
<div className="kui--status-stripe kui--inverted-color-context zoomable" id="kui--status-stripe">
{this.widgets()}
<div className="kui--status-stripe-button">
<div className="kui--status-stripe-element">{this.screenshot()}</div>
Expand Down
370 changes: 209 additions & 161 deletions plugins/plugin-core-support/web/css/static/zoom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,165 +40,213 @@
.page[data-zoom="1"] svg.zoomable {
transform: scale(1);
}
.page[data-zoom="2"] .zoomable .view-lines > div,
.page[data-zoom="2"] .zoomable {
font-size: 106.25% !important;
}
.page[data-zoom="2"] .zoomable svg[width="16"] {
width: 17px;
height: 17px;
}
.page[data-zoom="2"] .graphical-icon > svg {
width: 21.25px;
height: 21.25px;
}
.page[data-zoom="3"] .zoomable .view-lines > div,
.page[data-zoom="3"] .zoomable {
font-size: 112.5% !important;
}
.page[data-zoom="3"] .zoomable svg[width="16"] {
width: 18px;
height: 18px;
}
.page[data-zoom="3"] .graphical-icon > svg {
width: 22.25px;
height: 22.25px;
}
.page[data-zoom="4"] .zoomable .view-lines > div,
.page[data-zoom="4"] .zoomable {
font-size: 118.75% !important;
}
.page[data-zoom="4"] .zoomable[data-bounded-zoom] {
font-size: 112.5% !important;
}
.page[data-zoom="4"] .zoomable svg[width="16"] {
width: 19px;
height: 19px;
}
.page[data-zoom="4"] .graphical-icon > svg {
width: 23.75px;
height: 23.75px;
}
.page[data-zoom="5"] .zoomable .view-lines > div,
.page[data-zoom="5"] .zoomable {
font-size: 125% !important;
}
.page[data-zoom="5"] .zoomable[data-bounded-zoom] {
font-size: 112.5% !important;
}
.page[data-zoom="5"] .zoomable svg[width="16"] {
width: 20px;
height: 20px;
}
.page[data-zoom="5"] .graphical-icon > svg {
width: 25px;
height: 25px;
}
.page[data-zoom="6"] .zoomable .view-lines > div,
.page[data-zoom="6"] .zoomable {
font-size: 131.25% !important;
}
.page[data-zoom="6"] .zoomable[data-bounded-zoom] {
font-size: 112.5% !important;
}
.page[data-zoom="6"] .zoomable svg[width="16"] {
width: 21px;
height: 21px;
}
.page[data-zoom="6"] .graphical-icon > svg {
width: 26.25px;
height: 26.25px;
}
.page[data-zoom="7"] .zoomable .view-lines > div,
.page[data-zoom="7"] .zoomable {
font-size: 137.5% !important;
}
.page[data-zoom="7"] .zoomable[data-bounded-zoom] {
font-size: 112.5% !important;
}
.page[data-zoom="7"] .zoomable svg[width="16"] {
width: 22px;
height: 22px;
}
.page[data-zoom="7"] .graphical-icon > svg {
width: 27.5px;
height: 27.5px;
}
.page[data-zoom="8"] .zoomable .view-lines > div,
.page[data-zoom="8"] .zoomable {
font-size: 143.75% !important;
}
.page[data-zoom="8"] .zoomable[data-bounded-zoom] {
font-size: 112.5% !important;
}
.page[data-zoom="8"] .zoomable svg[width="16"] {
width: 23px;
height: 23px;
}
.page[data-zoom="8"] .graphical-icon > svg {
width: 28.75px;
height: 28.75px;
}
.page[data-zoom="9"] .zoomable .view-lines > div,
.page[data-zoom="9"] .zoomable {
font-size: 150% !important;
}
.page[data-zoom="9"] .zoomable[data-bounded-zoom] {
font-size: 112.5% !important;
}
.page[data-zoom="9"] .zoomable svg[width="16"] {
width: 24px;
height: 24px;
}
.page[data-zoom="9"] .graphical-icon > svg {
width: 30px;
height: 30px;
}
.page[data-zoom="10"] .zoomable .view-lines > div,
.page[data-zoom="10"] .zoomable {
font-size: 156.25% !important;
}
.page[data-zoom="10"] .zoomable[data-bounded-zoom] {
font-size: 112.5% !important;
}
.page[data-zoom="10"] .zoomable svg[width="16"] {
width: 25px;
height: 25px;
}
.page[data-zoom="10"] .graphical-icon > svg {
width: 31.25px;
height: 31.25px;
}
.page[data-zoom="0"] .zoomable .view-lines > div,
.page[data-zoom="0"] .zoomable {
font-size: 93.75% !important;
}
.page[data-zoom="0"] .zoomable[data-bounded-zoom] {
font-size: 100% !important;
}
.page[data-zoom="0"] .graphical-icon > svg {
width: 18.75px;
height: 18.75px;
}
.page[data-zoom="-1"] .zoomable .view-lines > div,
.page[data-zoom="-1"] .zoomable {
font-size: 87.5% !important;
}
.page[data-zoom="-1"] .zoomable[data-bounded-zoom] {
font-size: 100% !important;
}
.page[data-zoom="-1"] .graphical-icon > svg {
width: 17.5px;
height: 17.5px;
}
.page[data-zoom="-2"] .zoomable .view-lines > div,
.page[data-zoom="-2"] .zoomable {
font-size: 81.25% !important;
}
.page[data-zoom="-2"] .zoomable[data-bounded-zoom] {
font-size: 100% !important;
}
.page[data-zoom="-2"] .graphical-icon > svg {
width: 16.25px;
height: 16.25px;
.page[data-zoom="2"] {
.zoomable .view-lines > div,
.zoomable {
font-size: 106.25% !important;
}
.zoomable svg[width="16"] {
width: 17px;
height: 17px;
}
.graphical-icon > svg,
.zoomable svg[width="20"] {
width: 21.25px;
height: 21.25px;
}
}
.page[data-zoom="3"] {
.zoomable .view-lines > div,
.zoomable {
font-size: 112.5% !important;
}
.zoomable svg[width="16"] {
width: 18px;
height: 18px;
}
.graphical-icon > svg,
.zoomable svg[width="20"] {
width: 22.25px;
height: 22.25px;
}
}
.page[data-zoom="4"] {
.zoomable .view-lines > div,
.zoomable {
font-size: 118.75% !important;
}
.zoomable[data-bounded-zoom] {
font-size: 112.5% !important;
}
.zoomable svg[width="16"] {
width: 19px;
height: 19px;
}
.graphical-icon > svg,
.zoomable svg[width="20"] {
width: 23.75px;
height: 23.75px;
}
}
.page[data-zoom="5"] {
.zoomable .view-lines > div,
.zoomable {
font-size: 125% !important;
}
.zoomable[data-bounded-zoom] {
font-size: 112.5% !important;
}
.zoomable svg[width="16"] {
width: 20px;
height: 20px;
}
.graphical-icon > svg,
.zoomable svg[width="20"] {
width: 25px;
height: 25px;
}
}
.page[data-zoom="6"] {
.zoomable .view-lines > div,
.zoomable {
font-size: 131.25% !important;
}
.zoomable[data-bounded-zoom] {
font-size: 112.5% !important;
}
.zoomable svg[width="16"] {
width: 21px;
height: 21px;
}
.graphical-icon > svg,
.zoomable svg[width="20"] {
width: 26.25px;
height: 26.25px;
}
}
.page[data-zoom="7"] {
.zoomable .view-lines > div,
.zoomable {
font-size: 137.5% !important;
}
.zoomable[data-bounded-zoom] {
font-size: 112.5% !important;
}
.zoomable svg[width="16"] {
width: 22px;
height: 22px;
}
.graphical-icon > svg,
.zoomable svg[width="20"] {
width: 27.5px;
height: 27.5px;
}
}
.page[data-zoom="8"] {
.zoomable .view-lines > div,
.zoomable {
font-size: 143.75% !important;
}
.zoomable[data-bounded-zoom] {
font-size: 112.5% !important;
}
.zoomable svg[width="16"] {
width: 23px;
height: 23px;
}
.graphical-icon > svg,
.zoomable svg[width="20"] {
width: 28.75px;
height: 28.75px;
}
}
.page[data-zoom="9"] {
.zoomable .view-lines > div,
.zoomable {
font-size: 150% !important;
}
.zoomable[data-bounded-zoom] {
font-size: 112.5% !important;
}
.zoomable svg[width="16"] {
width: 24px;
height: 24px;
}
.graphical-icon > svg,
.zoomable svg[width="20"] {
width: 30px;
height: 30px;
}
}
.page[data-zoom="10"] {
.zoomable .view-lines > div,
.zoomable {
font-size: 156.25% !important;
}
.zoomable[data-bounded-zoom] {
font-size: 112.5% !important;
}
.zoomable svg[width="16"] {
width: 25px;
height: 25px;
}
.graphical-icon > svg,
.zoomable svg[width="16"] {
width: 31.25px;
height: 31.25px;
}
}
.page[data-zoom="0"] {
.zoomable .view-lines > div,
.zoomable {
font-size: 93.75% !important;
}
.zoomable[data-bounded-zoom] {
font-size: 100% !important;
}
.zoomable svg[width="16"] {
width: 15px;
height: 15px;
}
.graphical-icon > svg,
.zoomable svg[width="20"] {
width: 18.75px;
height: 18.75px;
}
}
.page[data-zoom="-1"] {
.zoomable .view-lines > div,
.zoomable {
font-size: 87.5% !important;
}
.zoomable[data-bounded-zoom] {
font-size: 100% !important;
}
.zoomable svg[width="16"] {
width: 14px;
height: 14px;
}
.graphical-icon > svg,
.zoomable svg[width="20"] {
width: 17.5px;
height: 17.5px;
}
}
.page[data-zoom="-2"] {
.zoomable .view-lines > div,
.zoomable {
font-size: 81.25% !important;
}
.zoomable[data-bounded-zoom] {
font-size: 100% !important;
}
.zoomable svg[width="16"] {
width: 13px;
height: 13px;
}
.graphical-icon > svg,
.zoomable svg[width="20"] {
width: 16.25px;
height: 16.25px;
}
}

0 comments on commit 26ba443

Please # to comment.