Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2024-09-22 00:06:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fixes T1868: tokenizing inputs resize properly

Browse source 
Summary:
Fixes T1868
The hidden sizing window was not getting whitespace properly and the width
was different because of different paddings

Test Plan: edgehill --test

Reviewers: bengotow

Reviewed By: bengotow

Maniphest Tasks: T1868

Differential Revision: https://phab.nylas.com/D1623
This commit is contained in:
Evan Morikawa 2015-06-11 18:39:55 -07:00
parent 2aa24bcd66
commit 81f1b5538e
3 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
internal_packages/composer/stylesheets/composer.less
View file

@ -374,6 +374,7 @@ body.is-blurred .composer-inner-wrap .tokenizing-field .token {
height: 12.5px + 2*@padding-top; height: 12.5px + 2*@padding-top;
margin: 7.5px 0; margin: 7.5px 0;
border: 0;
border-right: 1px solid @border-color-divider; border-right: 1px solid @border-color-divider;
&:last-child { border-right: 0 } &:last-child { border-right: 0 }

6
src/components/tokenizing-text-field.cjsx
View file

@ -194,13 +194,15 @@ TokenizingTextField = React.createClass
# resize the input field to fit. # resize the input field to fit.
input = React.findDOMNode(@refs.input) input = React.findDOMNode(@refs.input)
measure = React.findDOMNode(@refs.measure) measure = React.findDOMNode(@refs.measure)
measure.innerText = @state.inputValue measure.innerHTML = @state.inputValue.replace(/\s/g, " ")
measure.style.top = input.offsetTop + "px" measure.style.top = input.offsetTop + "px"
measure.style.left = input.offsetLeft + "px" measure.style.left = input.offsetLeft + "px"
if @_atMaxTokens() if @_atMaxTokens()
input.style.width = "4px" input.style.width = "4px"
else else
input.style.width = "calc(6px + #{measure.offsetWidth}px)" # The 10px comes from the 7.5px left padding and 2.5px more of
# breathing room.
input.style.width = "#{measure.offsetWidth+10}px"
render: -> render: ->
{Menu} = require 'nylas-component-kit' {Menu} = require 'nylas-component-kit'

15
static/components/tokenizing-text-field.less
View file

@ -34,7 +34,7 @@
color: @text-color; color: @text-color;
padding: 0.4em @spacing-half 0.4em @spacing-half; padding: 0.4em @spacing-half 0.4em @spacing-half;
padding-right: 1.5em; padding-right: 1.5em;
margin: 0 5px 5px 0; margin: 2px 5px 3px 0;
border-radius: @border-radius-base; border-radius: @border-radius-base;
font-size: 15px; font-size: 15px;
background-color: @background-secondary; background-color: @background-secondary;
@ -94,11 +94,14 @@
min-width: 5em; min-width: 5em;
background-color:transparent; background-color:transparent;
// Note: padding and margin should match `.token` to ensure // NOTE: padding-top and padding-bottom need to match that of
// they have the same baseline! // `.token`. to ensure they have the same baseline.
padding: 0.4em @spacing-half 0.4em @spacing-half; //
padding-right: 1.5em; // The padding-left and padding-right must be 0 so we can manually
margin: 0 5px 5px 0; // set the width properly to always match the size of the input
// test.
padding: 0.4em 0 0.4em 7.5px;
margin: 2px 5px 3px 0;
&.noop-input { &.noop-input {
position: absolute; position: absolute;