Date text is rendered lower than other elements in status bar
AndrewBastin opened this issue · comments
Thank you for this. I'll look into it ASAP, as the rendering position has been an issue for quite a while. On which platform you experienced this problem?
I am experiencing this in Windows...
I'm fixing this right now. It seems to be a thing on OS X as well.
Removing all the CSS and adding the inline-block
class to the clock element seemed to fix it for me. I'm on OS X by the way.
atom-clock.less
:
@import "ui-variables";
.atom-clock {
// display: inline-block;
// margin-left: 1em;
// margin-right: 0.5em;
// position: relative;
// vertical-align: middle;
//
// .span {
// text-align: left;
// }
}
atom-clock-view.js
:
drawElement() {
this.element = document.createElement('div')
this.element.className = 'atom-clock inline-block'
this.element.appendChild(document.createElement('span'))
this.statusBar.addRightTile({
item: this.element,
priority: -1
})
}
I actually did not change the code, just the style file, adding some stuff for the icon. The result seems to be pretty much the same.
@import "ui-variables";
@import "octicon-mixins";
.atom-clock {
display: inline-block;
position: relative;
.icon:before {
.icon-size(14px);
top: 1px;
margin-right: 3px;
}
}
Actually, the atom-clock
class should also have margin-left
set to @component-padding
, so that there will be space between the clock and the element to the left.
The inline-block
class seems to add margin-left: 1.5em
so maybe the CSS could just be used to move the icon around. Up to you I guess, it seems to be what other packages are using