mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 00:06:06 +08:00
Fixes T1868: tokenizing inputs resize properly
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:
parent
2aa24bcd66
commit
81f1b5538e
|
@ -374,6 +374,7 @@ body.is-blurred .composer-inner-wrap .tokenizing-field .token {
|
|||
height: 12.5px + 2*@padding-top;
|
||||
margin: 7.5px 0;
|
||||
|
||||
border: 0;
|
||||
border-right: 1px solid @border-color-divider;
|
||||
&:last-child { border-right: 0 }
|
||||
|
||||
|
|
|
@ -194,13 +194,15 @@ TokenizingTextField = React.createClass
|
|||
# resize the input field to fit.
|
||||
input = React.findDOMNode(@refs.input)
|
||||
measure = React.findDOMNode(@refs.measure)
|
||||
measure.innerText = @state.inputValue
|
||||
measure.innerHTML = @state.inputValue.replace(/\s/g, " ")
|
||||
measure.style.top = input.offsetTop + "px"
|
||||
measure.style.left = input.offsetLeft + "px"
|
||||
if @_atMaxTokens()
|
||||
input.style.width = "4px"
|
||||
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: ->
|
||||
{Menu} = require 'nylas-component-kit'
|
||||
|
|
|
@ -34,7 +34,7 @@
|
|||
color: @text-color;
|
||||
padding: 0.4em @spacing-half 0.4em @spacing-half;
|
||||
padding-right: 1.5em;
|
||||
margin: 0 5px 5px 0;
|
||||
margin: 2px 5px 3px 0;
|
||||
border-radius: @border-radius-base;
|
||||
font-size: 15px;
|
||||
background-color: @background-secondary;
|
||||
|
@ -94,11 +94,14 @@
|
|||
min-width: 5em;
|
||||
background-color:transparent;
|
||||
|
||||
// Note: padding and margin should match `.token` to ensure
|
||||
// they have the same baseline!
|
||||
padding: 0.4em @spacing-half 0.4em @spacing-half;
|
||||
padding-right: 1.5em;
|
||||
margin: 0 5px 5px 0;
|
||||
// NOTE: padding-top and padding-bottom need to match that of
|
||||
// `.token`. to ensure they have the same baseline.
|
||||
//
|
||||
// The padding-left and padding-right must be 0 so we can manually
|
||||
// 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 {
|
||||
position: absolute;
|
||||
|
|
Loading…
Reference in a new issue