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

feat(windows): improve UI for Windows

Browse source 
Remove rounded corners and gradients
This commit is contained in:
Evan Morikawa 2015-10-21 20:32:33 -07:00
parent 134702805d
commit 2500e52179
20 changed files with 305 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
internal_packages/account-sidebar/stylesheets/account-sidebar.less
View file

@ -166,6 +166,21 @@
}
}
}
body.platform-win32 {
#account-switcher {
.dropdown {
border-radius: 0;
}
.item {
border-radius: 0;
}
.secondary-item {
&:first-child, &:last-child {
border-radius: 0;
}
}
}
}
#account-switcher.open {

8
internal_packages/attachments/stylesheets/attachments.less
View file

@ -174,3 +174,11 @@
}
}
body.platform-win32 {
.file-wrap {
.inner {
border-radius: 0;
}
}
}

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

@ -9,6 +9,17 @@
@compose-width: 800px;
@compose-min-height: 150px;
body.platform-win32 {
.composer-inner-wrap {
.composer-action-bar-wrap {
.btn {
height: 30px;
padding-top: 1px;
}
}
}
}
.composer-inner-wrap {
position: relative;
height: 100%;
@ -431,7 +442,7 @@
padding: 0 @padding;
}
.toolbar-btn {
button.btn.toolbar-btn {
@padding-top: 4px;
@padding-left: 8px;
@ -462,3 +473,13 @@
}
}
}
body.platform-win32 {
.composer-inner-wrap {
.composer-drop-cover {
border-radius: 0;
}
}
.floating-toolbar {
border-radius: 0;
}
}

14
internal_packages/events/stylesheets/events.less
View file

@ -86,4 +86,16 @@
}
}
}
}
}
body.platform-win32 {
.event-wrapper {
border-radius: 0;
.event-body {
.event-actions {
.btn-rsvp {
border-radius: 0;
}
}
}
}
}

40
internal_packages/message-list/stylesheets/message-list.less
View file

@ -18,7 +18,7 @@ body.platform-win32 {
.message-toolbar-arrow.down {
margin: 0 0 0 1px;
padding: 6px 5px 0 5px;
.windows-btn-hover;
.windows-btn-bg;
&:hover {
background: #e5e5e5;
}
@ -30,7 +30,7 @@ body.platform-win32 {
.message-toolbar-arrow.up {
margin: 0 0 0 1px;
padding: 6px 5px 0 5px;
.windows-btn-hover;
.windows-btn-bg;
&.btn-icon:hover {
color: @text-color;
img.content-mask { background: rgba(35, 31, 32, 0.8); }
@ -42,6 +42,25 @@ body.platform-win32 {
}
}
}
#message-list {
.message-item-wrap {
.message-item-white-wrap {
border-radius: 0;
}
}
.minified-bundle {
.num-messages {
border-radius: 0;
}
.msg-line {
border-radius: 0;
}
}
.footer-reply-area-wrap {
border-radius: 0;
}
}
}
.sheet-toolbar {
@ -148,7 +167,7 @@ body.platform-win32 {
}
.minified-bundle + .message-item-wrap {
margin-top: 0;
margin-top: -5px;
}
.message-item-wrap {
@ -255,7 +274,7 @@ body.platform-win32 {
top: 50%;
left: 50%;
margin-left: -80px;
margin-top: -12px;
margin-top: -14px;
border-radius: 15px;
border: 1px solid @border-color-divider;
width: 160px;
@ -272,15 +291,14 @@ body.platform-win32 {
max-width: @message-max-width;
margin: 0 auto;
width: 100%;
margin-top: -13px;
}
.msg-line {
border-radius: 4px 4px 0 0;
position: relative;
border-top: 1px solid @border-color-divider;
border-right: 1px solid @border-color-divider;
border-left: 1px solid @border-color-divider;
background-color: darken(@background-primary, 2%);
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
box-shadow: 0 0.5px 0 rgba(0,0,0,0.1), 0 -0.5px 0 rgba(0,0,0,0.1), 0.5px 0 0 rgba(0,0,0,0.1), -0.5px 0 0 rgba(0,0,0,0.1);
}
}
@ -326,14 +344,14 @@ body.platform-win32 {
transition: opacity 100ms, width 150ms;
transition-delay: 50ms, 0ms;
transition-timing-function: ease-in-out;
width: 98px;
width: 99px;
height: 32px;
opacity: 1;
text-align: right;
}
.button-dropdown {
width: 76px;
}
.button-dropdown {
width: 77px;
}
.message-actions-ellipsis {

9
internal_packages/notifications/stylesheets/notifications.less
View file

@ -178,3 +178,12 @@
}
}
}
body.platform-win32 {
.notifications-sticky {
.notifications-sticky-item {
a {
border-radius: 0;
}
}
}
}

25
internal_packages/preferences/stylesheets/preferences.less
View file

@ -161,6 +161,10 @@ body.platform-darwin {
width:70%;
margin: auto;
.section-appearance {
padding-left: 0;
}
.appearance-mode {
background-color: @background-off-primary;;
border-radius: 10px;
@ -169,7 +173,7 @@ body.platform-darwin {
flex: 1;
padding:25px;
padding-bottom:9px;
margin:10px;
margin-right:10px;
margin-top:0;
img {
background-color: @background-tertiary;
@ -275,6 +279,12 @@ body.platform-darwin {
}
}
body.platform-win32.is-blurred {
.preference-header {
background: lighten(@toolbar-background-color, 14%);
}
}
body.platform-win32 {
.preference-header {
background: #f2f2f2;
@ -284,7 +294,7 @@ body.platform-win32 {
margin-right: 1px;
width: 80px;
padding-top: 3px;
.windows-btn-hover;
.windows-btn-bg;
height: 63px;
color: @text-color;
@ -302,4 +312,15 @@ body.platform-win32 {
}
}
}
.preferences-wrap {
.well {
border-radius: 0;
}
.container-appearance {
.appearance-mode {
border-radius: 0;
}
}
}
}

35
internal_packages/thread-list/stylesheets/thread-list.less
View file

@ -216,6 +216,10 @@
// quick actions
@reply-img: "../static/images/thread-list-quick-actions/ic-quick-button-reply@2x.png";
@archive-img: "../static/images/thread-list-quick-actions/ic-quick-button-archive@2x.png";
@forward-img: "../static/images/thread-list-quick-actions/ic-quick-button-forward@2x.png";
@trash-img: "../static/images/thread-list-quick-actions/ic-quick-button-trash@2x.png";
.thread-list .list-item .list-column-HoverActions {
display:none;
@ -231,16 +235,39 @@
margin-right:40px;
}
.action.action-reply {
background: url(../static/images/thread-list-quick-actions/ic-quick-button-reply@2x.png) top left no-repeat, @background-gradient;
background: url(@reply-img) top left no-repeat, @background-gradient;
}
.action.action-forward {
background: url(../static/images/thread-list-quick-actions/ic-quick-button-forward@2x.png) top left no-repeat, @background-gradient;
background: url(@forward-img) top left no-repeat, @background-gradient;
}
.action.action-archive {
background: url(../static/images/thread-list-quick-actions/ic-quick-button-archive@2x.png) center no-repeat, @background-gradient;
background: url(@archive-img) center no-repeat, @background-gradient;
}
.action.action-trash {
background: url(../static/images/thread-list-quick-actions/ic-quick-button-trash@2x.png) center no-repeat, @background-gradient;
background: url(@trash-img) center no-repeat, @background-gradient;
}
}
body.platform-win32 {
.thread-list .list-item .list-column-HoverActions {
.action {
border: 0;
margin: 9px 0 0 0;
&:last-child {
margin-right: 30px;
}
}
.action.action-reply {
background: url(@reply-img) top left no-repeat;
}
.action.action-forward {
background: url(@forward-img) top left no-repeat;
}
.action.action-archive {
background: url(@archive-img) center no-repeat;
}
.action.action-trash {
background: url(@trash-img) center no-repeat;
}
}
}
.thread-list .list-item:hover .list-column-HoverActions {

5
internal_packages/undo-redo/stylesheets/undo-redo.less
View file

@ -44,6 +44,11 @@
}
}
}
body.platform-win32 {
.undo-redo {
border-radius: 0;
}
}
.undo-redo-item-enter {
opacity: 0.01;

11
src/components/mail-label.cjsx
View file

@ -10,10 +10,13 @@ LabelColorizer =
backgroundColorDark: (label) -> "hsl(#{label.hue()}, 62%, 57%)"
styles: (label) ->
color: LabelColorizer.color(label)
backgroundColor: LabelColorizer.backgroundColor(label)
boxShadow: "inset 0 0 1px hsl(#{label.hue()}, 62%, 47%), inset 0 1px 1px rgba(255,255,255,0.5), 0 0.5px 0 rgba(255,255,255,0.5)"
backgroundImage: 'linear-gradient(rgba(255,255,255, 0.4), rgba(255,255,255,0))'
styles =
color: LabelColorizer.color(label)
backgroundColor: LabelColorizer.backgroundColor(label)
boxShadow: "inset 0 0 1px hsl(#{label.hue()}, 62%, 47%), inset 0 1px 1px rgba(255,255,255,0.5), 0 0.5px 0 rgba(255,255,255,0.5)"
if process.platform isnt "win32"
styles["backgroundImage"] = 'linear-gradient(rgba(255,255,255, 0.4), rgba(255,255,255,0))'
return styles
class MailLabel extends React.Component
@propTypes:

38
static/buttons.less
View file

@ -8,6 +8,44 @@ button, html input[type="button"] {
}
}
body.platform-win32 {
.btn {
.windows-btn-bg;
.windows-btn-border;
&.btn-action {
border: 2px solid darken(@btn-action-bg-color, 10%);
&:hover {
background: @btn-action-bg-color;
}
}
&.btn-emphasis {
background: @btn-emphasis-bg-color;
border: 0;
&:hover {
border-radius: 0;
background: darken(@btn-emphasis-bg-color, 10%);
}
}
&.btn-emphasis:active {
background: @btn-emphasis-bg-color;
box-shadow: 0 0 0;
}
&.btn-danger, .btn-destructive {
background: @btn-danger-bg-color;
border: 0;
&:hover {
border-radius: 0;
background: darken(@btn-danger-bg-color, 10%);
}
}
}
}
.btn {
padding: 0.33em 1em;
border-radius: @border-radius-base;

12
static/components/button-dropdown.less
View file

@ -112,7 +112,19 @@
body.platform-win32 {
.button-dropdown {
.primary-item {
.windows-btn-bg;
.windows-btn-border;
border-radius: 0;
height: 34px;
padding-top: 5px;
}
.secondary-picker {
.windows-btn-bg;
.windows-btn-border;
border-left: 0;
height: 34px;
padding-top: 5px;
box-shadow: 0 0 0;
}
.secondary-picker,
.secondary-items {

15
static/components/extra.less
View file

@ -1,4 +1,5 @@
@import "ui-variables";
@import "ui-mixins";
.quoted-text-control {
color: @text-color-very-subtle;
@ -26,6 +27,20 @@
}
}
body.platform-win32 {
.quoted-text-control {
.windows-btn-bg;
.windows-btn-border;
&:hover {
color: @text-color-very-subtle;
.windows-btn-border;
}
}
.mail-label {
border-radius: 0;
}
}
.mail-label {
font-size: 0.9em;
padding: 2px 8px;

9
static/components/menu.less
View file

@ -97,3 +97,12 @@
}
}
}
body.platform-win32 {
.menu {
.header-container {
input.search {
border-radius: 0;
}
}
}
}

10
static/components/scroll-region.less
View file

@ -115,3 +115,13 @@
}
}
}
body.platform-win32 {
.scroll-tooltip {
border-radius: 0;
}
.scrollbar-track {
.scrollbar-handle {
border-radius: 0;
}
}
}

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

@ -181,3 +181,26 @@
body.is-blurred .tokenizing-field .token:not(.invalid) {
background: @background-secondary;
}
body.platform-win32 {
.tokenizing-field {
.content-container {
border-radius: 0;
}
}
.token {
border-radius: 0;
background: @token-bottom;
&.selected,
&.dragging {
border-radius: 0;
background: @token-selected-top;
}
&:hover {
background: @token-hover-bottom;
}
&.invalid.selected, &.invalid.dragging {
background: @token-invalid-selected-top;
}
}
}

19
static/inputs.less
View file

@ -37,3 +37,22 @@ input[type="email"]:focus, {
box-shadow: 0 0 3px @accent-primary;
}
}
body.platform-win32 {
input[type="text"],
input[type="email"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="range"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"] {
&.input-bordered {
border-radius: 0;
}
}
}

5
static/mixins/common-ui-elements.less
View file

@ -15,3 +15,8 @@
line-height: @line-height-small;
border-radius: @border-radius-small;
}
body.platform-win32 {
.item-count-box {
border-radius: 0;
}
}

8
static/mixins/windows.less
View file

@ -1,6 +1,12 @@
.windows-btn-hover {
.windows-btn-bg {
transition: background 300ms;
background: transparent;
border-radius: 0;
&:hover {
background: #e5e5e5;
}
}
.windows-btn-border {
border: 2px solid #e5e5e5;
box-shadow: 0 0 0;
}

5
static/workspace.less
View file

@ -400,6 +400,11 @@ body.platform-win32 {
}
}
}
.btn-feedback {
background: @blue;
&:hover { background: lighten(@blue, 5%); }
&:active { background: lighten(@blue, 20%); }
}
}
body.platform-win32.is-blurred {