Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2025-03-03 19:43:04 +08:00
Code Issues Projects Releases Packages Wiki Activity

🎨(theme-picker): Adjust styles

Browse source
This commit is contained in:
Jackie Luo 2016-03-10 15:18:52 -08:00
parent 93cdbf1d6e
commit 3630a1425f
6 changed files with 31 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
internal_packages/theme-picker/lib/theme-option.jsx
View file

@ -100,8 +100,8 @@ class ThemeOption extends React.Component {
ref="iframe"
className={`theme-preview-${this.props.theme.name}`}
frameBorder="0"
width="105px"
height="65px"
width="115px"
height="70px"
flex="1" />
</div>
);

2
internal_packages/theme-picker/lib/theme-picker-store.jsx
View file

@ -15,7 +15,7 @@ class ThemePickerStore extends NylasStore {
this.disposable = NylasEnv.commands.add("body", "window:launch-theme-picker", () => {
Actions.openModal({
component: (<ThemePicker />),
height: 400,
height: 390,
width: 250,
});
});

14
internal_packages/theme-picker/lib/theme-picker.jsx
View file

@ -61,23 +61,23 @@ class ThemePicker extends React.Component {
<div className="theme-picker">
<Flexbox direction="column">
<RetinaImg
style={{width: "14", height: "14", margin: "8px", WebkitFilter: "none"}}
style={{width: "14", height: "14", margin: "12px", WebkitFilter: "none"}}
name="picker-close.png"
mode={RetinaImg.Mode.ContentDark}
onMouseDown={() => Actions.closeModal()} />
<h4 style={{color: "#313435"}}>Themes</h4>
<div style={{color: "rgba(35, 31, 32, 0.5)"}}>Click any theme to preview.</div>
<div style={{margin: "10px 5px 0 5px", height: "300px", overflow: "auto"}}>
<h4 style={{color: "#434648"}}>Themes</h4>
<div style={{color: "rgba(35, 31, 32, 0.5)", fontSize: "12px"}}>Click any theme to apply:</div>
<div style={{margin: "10px 5px 0 5px", height: "290px", overflow: "auto"}}>
<Flexbox
direction="row"
height="auto"
style={{alignItems: "flex-start", flexWrap: "wrap"}}>
{this._renderThemeOptions()}
<div className="create-theme">
<a href="https://github.com/nylas/N1-theme-starter">Create a Theme</a>
</div>
</Flexbox>
</div>
<div className="create-theme">
<a href="https://github.com/nylas/N1-theme-starter">Create a Theme</a>
</div>
</Flexbox>
</div>
);

8
internal_packages/theme-picker/preview-styles/theme-option.less
View file

@ -12,6 +12,8 @@ body {
.theme-option {
position: absolute;
top: 0;
margin-top: 4px;
margin-left: 5px;
width: 100px;
height: 60px;
background-color: @background-secondary;
@ -22,6 +24,7 @@ body {
&.active-true {
border: 1px solid #3187e1;
box-shadow: 0 0 4px #9ecaed;
}
&.active-false {
@ -30,8 +33,9 @@ body {
.theme-name {
font-family: @font-family;
font-size: 14px;
margin-top: 5px;
font-size: 12px;
font-weight: 600;
margin-top: 7px;
height: 18px;
overflow: hidden;
}

22
internal_packages/theme-picker/styles/theme-picker.less
View file

@ -3,18 +3,14 @@
.theme-picker {
text-align: center;
cursor: default;
.create-theme {
width: 100%;
text-align: center;
h4 {
font-size: 14.5px;
margin-top: -10px;
margin-bottom: 5px;
a {
color: #3187e1;
text-decoration: none;
cursor: default;
}
}
.clickable-theme-option {
width: 115px;
height: 70px;
margin: 2px;
top: -10px;
iframe {
@ -23,4 +19,14 @@
z-index: 0;
}
}
.create-theme {
width: 100%;
text-align: center;
margin-top: 5px;
a {
color: #3187e1;
text-decoration: none;
cursor: default;
}
}
}

2
static/components/modal.less
View file

@ -8,7 +8,7 @@
position: absolute;
background-color: @background-primary;
border-radius: @border-radius-base;
box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.15), 0 -0.5px 0 rgba(0, 0, 0, 0.15), 0.5px 0 0 rgba(0, 0, 0, 0.15), -0.5px 0 0 rgba(0, 0, 0, 0.15), 0 4px 7px rgba(0,0,0,0.15);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.20), 0 0 1px rgba(0, 0, 0, 0.7);
}
}