Commit 492b7483 authored by Claire Hernandez's avatar Claire Hernandez
Browse files

Light theme for MyBibApp

- more white
- grey background
- one color (tints of blue)
- sass support to have variables in app.scss
- logo changed but not seen in the app
- TabView set always in top
- ids and classes added to be sure to style the good thing
- a little bit of lines wrapped

My proposal can be completly reviewed or removed :)
parent 5406966f
node_modules/
platforms/
\ No newline at end of file
platforms/
hooks/
*.swp
.idea
......@@ -2,4 +2,5 @@ app/models/**/*.js
app/controllers/**/*.js
app/tests/**/*.js
app/views/**/*.js
app/app.js
\ No newline at end of file
app/app.js
app/app.css
......@@ -3,25 +3,56 @@ In NativeScript, the app.css file is where you place CSS rules that
you would like to apply to your entire application. Check out
http://docs.nativescript.org/ui/styling for a full list of the CSS
selectors and properties you can use to style UI components.
This file is managed by Sass, this is the only one you have to change to style
the app. The module nativescript-dev-sass take care of generating css file.
*/
/* Variables */
$first-color: #137ED9;
$first-color-light1: #A1CCF0;
$first-color-light2:#E3F0FB;
$second-color: #585B60;
$second-color-light1: #ABACAE;
$second-color-light2: #DEDEDF;
$zone-background-color: white;
$zone-label-color: black;
$warn-color: red;
$warn-color2: #99243a;
/* General */
* {
font-family: FontAwesome, fa-solid-900;
font-size: 18dip;
}
Button {
padding: 20dip;
.text-multi {
line-height: 10dip;
letter-spacing: 0.05dip;
}
Page {
.button-bottom {
border-top-color: $second-color;
border-top-width: 1dip;
padding: 15dip;
background-color: $zone-background-color;
}
TabView {
tab-background-color: $first-color-light2;//$zone-background-color;
selected-tab-text-color: $first-color;
android-selected-tab-highlight-color: $first-color;
tab-text-color: $second-color;
}
ActionBar {
background-color: #29586e;
color:white;
background-color: $first-color;
color: $zone-background-color;
}
ActionBar Label {
......@@ -32,19 +63,33 @@ ActionBar Label {
Label {
padding: 5dip;
color:black;
color: $zone-label-color;
}
#sideDrawerContent {
padding: 10dip;
DockLayout ScrollView {
background-color: $second-color-light2;
}
GridLayout {
background-color: $zone-background-color;
}
.scan_card {
padding:0;
font-size:20dip;
height:34dip;
}
/* SideBar */
#sideDrawerContent {
padding: 5dip;
}
#sideDrawerContent Label {
font-size: 18dip;
}
#oauth_authorize {
margin: 5dip;
}
......@@ -59,92 +104,130 @@ Label {
height: 25dip;
}
#sideDrawerContent {
background-color: #29586e;
}
.list-item {
padding: 5dip;
background-color: $second-color-light2;
}
#sideDrawerContent StackLayout StackLayout{
margin: 10dip;
padding: 10dip;
background-color: white;
border-radius: 10dip;
color: black;
background-color: $zone-background-color;
border-radius: 6dip;
color: $second-color;
}
#accounts .list-item GridLayout {
padding: 5dip;
background-color: #ccc;
border-color: #ccc;
border-radius: 5dip;
border-width: 2dip;
/* List general */
.list-item .title {
background-color: $zone-background-color;
font-weight: bold;
line-height: 2dip;
font-size: 18dip;
}
.list-item .key {
font-size: 16dip;
color: $second-color-light1;
}
.list-item .title {
background-color: #ccc;
.list-item .value {
font-size: 16dip;
color: $second-color;
}
.cover {
margin: 5dip;
}
.list-item GridLayout.late .date_due{
color: red;
color: $warn-color;
}
/* Accounts */
#holds .status {
font-weight: bold;
.list-accounts {
margin: 5dip;
border-bottom-color: $second-color-light1;
border-bottom-width: 3dip;
border-right-color: $second-color-light1;
border-right-width: 3dip;
border-radius: 2dip;
}
#accounts .list-accounts GridLayout {
background-color: $zone-background-color;
border-color: $zone-background-color;
border-width: 2dip;
}
.loan-item .title,
#novelties .title {
#accounts .account-name {
font-weight: bold;
}
#accounts .list-item #login {
#accounts .list-accounts #login {
font-size: 14dip;
}
#accounts .list-item Label + Label {
#accounts .list-accounts Label + Label {
margin-top: 2dip;
text-align: right;
color: $second-color;
}
#accounts .list-item Label.count {
background-color: white;
border-radius: 40dip;
#accounts .list-accounts Label.count {
text-align: center;
color: black;
color: $zone-label-color;
}
.scan_card {
padding:0;
font-size:20dip;
height:34dip;
/* Holds & Loans */
#holds .status {
font-weight: bold;
}
#holds .list-item .title,
#loans .list-item .title {
padding-bottom: 10dip;
}
.loan-item {
text-align: center;
padding: 20dip;
.loan-item .title,
#novelties .title {
font-weight: bold;
}
#novel {
padding: 5dip;
}
#loans {
background-color: $second-color-light2;
}
#holds .list-item,
#loans .list-item {
padding-bottom: 10dip;
background-color: $zone-background-color;
border-color: $zone-background-color;
border-radius: 2dip;
border-width: 1dip;
border-bottom-color: $second-color-light1;
}
/* forms */
.form_label { font-weight: bold; }
.error { color: red; padding:0; height: auto;}
.bt_delete {
background-color: #99243a;
color:white;
.form_label {
font-weight: bold;
}
.error {
color: $warn-color;
padding:0;
height:
auto;
}
TabView {
selected-tab-text-color: #185a9d;
android-selected-tab-highlight-color: #185a9d;
.bt_delete {
background-color: $warn-color2;
color:$zone-background-color;
}
......@@ -3,7 +3,9 @@
<ActionBar title="{{ L('add_account') }}" icon="">
</ActionBar>
<DockLayout stretchLastChild="true">
<Button dock="bottom" text="{{ '&#xf00c; ' + L('save') }}" tap="{{ saveAccountAdvancedAction }} "/>
<Button dock="bottom" text="{{ '&#xf00c; ' + L('save') }}"
tap="{{ saveAccountAdvancedAction }} "
class="button-bottom"/>/>
<accounts:form />
</DockLayout>
</Page.actionBar>
......
<Page xmlns:accounts="views/accounts" loaded="{{ onAddAccountPageLoaded }}">
<Page.actionBar>
<ActionBar title="{{ L('welcome') }}" icon="">
<ActionBar
title="{{ L('welcome') }}"
icon="" android.windowContentOverlay="@drawable/actionbar_shadow">
</ActionBar>
</Page.actionBar>
<DockLayout>
<Button dock="bottom" tap="{{ addAdvancedAccountAction }}" text="{{ '&#xf067; ' + L('add_account_advanced') }}"/>
<Button dock="bottom" tap="{{ addAdvancedAccountAction }}"
text="{{ '&#xf067; ' + L('add_account_advanced') }}"
class="button-bottom"/>/>
<StackLayout>
<Label text="{{ L('welcome_help') }}" textWrap="true" />
<Label text="{{ L('welcome_search_library') }}" textWrap="true" />
<Label text="{{ L('welcome_help') }}" textWrap="true" class="text-multi"/>
<Label text="{{ L('welcome_search_library') }}" textWrap="true" class="text-multi"/>
<accounts:search_library />
<GridLayout columns="50, *"
rows="auto, auto"
visibility="{{account.url, account.url.length ? 'visible' : 'collapsed' }}" >
visibility="{{account.url, account.url.length ? 'visible' : 'collapsed' }}">
<Label text="{{ L('url') }}" class="form_label" col="0" row="0"/>
<Label text="{{ account.url }}" col="1" row="0"/>
<Button text="{{ L('library_found') }}"
tap="{{ saveAccountAction }}"
colSpan="2"
col="0"
row="1" />
row="1"
class="button-bottom"/>
</GridLayout>
</StackLayout>
</DockLayout>
......
......@@ -5,7 +5,9 @@
</ActionBar>
<DockLayout stretchLastChild="true">
<StackLayout dock="bottom">
<Button dock="bottom" text="{{ '&#xf00c; ' + L('save') }}" tap="{{ saveAccountAdvancedAction }} "/>
<Button dock="bottom" text="{{ '&#xf00c; ' + L('save') }}"
tap="{{ saveAccountAdvancedAction }} "
class="button-bottom"/>/>
<Button text="{{ '&#xf00d; ' + L('delete') }}" tap="{{ deleteAccountAction }}" class="bt_delete"/>
</StackLayout>
<accounts:form />
......
<TabView xmlns:accounts="views/accounts">
<TabView xmlns:accounts="views/accounts" id="tab-top">
<TabView.items>
<TabViewItem title="{{ L('your_library') }}">
<TabViewItem.view>
<ScrollView>
<GridLayout columns="120, *" rows="50, auto">
<Label text="{{ L('label') }}" col="0" row="0" class="form_label"/>
<GridLayout col="1" row="0" rows="auto, auto">
<TextField text="{{ account.label }}"
hint="{{ L('choose_account_label') }}"
......@@ -22,9 +22,9 @@
row="1"
class="form_label"
visibility="{{ portalsVisible ? 'visible' : 'collapsed' }}"/>
<accounts:search_library col="1" row="1" />
</GridLayout>
</ScrollView>
</TabViewItem.view>
......@@ -52,4 +52,3 @@
</TabViewItem>
</TabView.items>
</TabView>
......@@ -5,7 +5,9 @@
</Page.actionBar>
<DockLayout>
<Button dock="bottom" tap="{{ addAccountAction }}" text="{{ '&#xf067; ' + L('add_account') }}"/>
<Button dock="bottom" tap="{{ addAccountAction }}"
text="{{ '&#xf067; ' + L('add_account') }}"
class="button-bottom"/>
<Label dock="top"
text="{{ L('add_account_hint') }}"
visibility="{{ show_add_account_hint ? 'visible' : 'collapsed' }}"
......@@ -17,9 +19,9 @@
itemHold="{{ accountActionsAction }}"
separatorColor="transparent">
<lv:RadListView.itemTemplate>
<StackLayout class="list-item">
<StackLayout class="list-accounts">
<GridLayout columns="*, 50" rows="auto, auto, auto">
<Label text="{{ label }}" colspan="2" col="0" row="0" />
<Label text="{{ label }}" colspan="2" col="0" row="0" class="account-name"/>
<Label text="{{ L('loans') + ':' }}" col="0" row="1" />
<Label text="{{ numberOfLoans() }}" col="1" row="1" class="count" />
......
<GridLayout colums="auto" row="auto" xmlns:lv="nativescript-ui-listview">
<Label visibility="{{ holds.length || busy == 'on' ? 'collapsed' : 'visible' }}" style="text-align: center; height: 100dip" text="{{ L('no_holds') }}"/>
<lv:RadListView col="0" row="0"
items="{{ holds }}"
id="holds"
......@@ -11,16 +11,29 @@
<lv:RadListView.itemTemplate>
<StackLayout class="list-item">
<GridLayout columns="100, *" rows="auto,auto,auto,auto,auto,auto" class="hold">
<Label text="{{ getTitle() }}" class="title" textWrap="true" col="0" row="0" colSpan="3"/>
<Label text="{{ getTitle() }}"
textWrap="true" col="0" row="0" colSpan="3"
class="title" />
<Image src="{{ getRecordThumbnail() }}"
visibility="{{ getRecordThumbnail().length ? 'visible' : 'collapsed' }}"
col="0" row="1" stretch="aspectFill" rowSpan="4"
class="cover"/>
<Label text="{{ L('author') + ':'}}"
col="{{ getRecordThumbnail().length ? '1' : '0' }}"
row="1" class="form_label key"/>
<Label text="{{ getAuthor() }}" textWrap="true"
col="1" row="{{ getRecordThumbnail().length ? '2' : '1' }}"
class="value"/>
<Image src="{{ getRecordThumbnail() }}" visibility="{{ getRecordThumbnail().length ? 'visible' : 'collapsed' }}" col="0" row="1" stretch="aspectFill" rowSpan="4"/>
<Label text="{{ L('author') + ':'}}" col="{{ getRecordThumbnail().length ? '1' : '0' }}" row="1" class="form_label"/>
<Label text="{{ getAuthor() }}" textWrap="true" col="1" row="{{ getRecordThumbnail().length ? '2' : '1' }}"/>
<Label text="{{ L('library') + ':'}}"
col="{{ getRecordThumbnail().length ? '1' : '0' }}" row="3"
class="form_label key"/>
<Label text="{{ getLibrary() }}" col="1"
row="{{ getRecordThumbnail().length ? '4' : '3' }}"
class="value" />
<Label text="{{ L('library') + ':'}}" col="{{ getRecordThumbnail().length ? '1' : '0' }}" row="3" class="form_label"/>
<Label text="{{ getLibrary() }}" col="1" row="{{ getRecordThumbnail().length ? '4' : '3' }}" />
<Label text="{{ getStatus() }}" col="1" row="5" class="status" />
</GridLayout>
</StackLayout>
......
......@@ -8,7 +8,7 @@
<Label text='&#xf021;'/>
</ActionItem.actionView>
</ActionItem>
<ActionItem text="{{ L('menu) }}" tap="{{ toggleDrawerAction }}">
<ActionItem.actionView>
<Label text='&#xf0c9;'/>
......@@ -17,7 +17,7 @@
</ActionBar>
</Page.actionBar>
<nsDrawer:RadSideDrawer id="sideDrawer" drawerLocation="Right" drawerTransition="PushTransition">
<nsDrawer:RadSideDrawer.drawerContent xmlns:nsDrawer="nativescript-pro-ui/sidedrawer">
<shared:sidedrawer />
......@@ -25,7 +25,8 @@
<nsDrawer:RadSideDrawer.mainContent>
<GridLayout columns="*" rows="*" stretchLastChild="true" >
<TabView androidTabsPosition="bottom" xmlns:library="views/library" col="0" row="0" >
<TabView androidTabsPosition="top" xmlns:library="views/library"
col="0" row="0">
<TabView.items>
<TabViewItem title="{{ '&#xf02d; ' + L('loans') }}">
<TabViewItem.view>
......@@ -47,4 +48,3 @@
</nsDrawer:RadSideDrawer>
</Page>
<GridLayout colums="auto" row="auto" xmlns:lv="nativescript-ui-listview">
<Label visibility="{{ loans.length || busy == 'on' ? 'collapsed' : 'visible' }}" style="text-align: center; height: 100dip" text="{{ L('no_loans') }}"/>
<lv:RadListView col="0" row="0"
items="{{ loans }}"
id="loans"
......@@ -10,19 +10,40 @@
pullToRefreshInitiated="{{ refreshLoansAndHoldsAction }}">
<lv:RadListView.itemTemplate>
<StackLayout class="list-item">
<GridLayout columns="100, *" rows="auto,auto,auto,auto,auto" class="{{ 'loan' + (isLate() ? ' late' : '')}}">
<Label text="{{ getTitle() }}" class="title" textWrap="true" col="0" row="0" colSpan="3"/>
<Image src="{{ getRecordThumbnail() }}" visibility="{{ getRecordThumbnail().length ? 'visible' : 'collapsed' }}" col="0" row="1" stretch="aspectFill" rowSpan="4"/>
<Label text="{{ L('author') + ':'}}" col="{{ getRecordThumbnail().length ? '1' : '0' }}" row="1" class="form_label"/>
<Label text="{{ getAuthor() }}" textWrap="true" col="1" row="{{ getRecordThumbnail().length ? '2' : '1' }}"/>
<Label text="{{ L('date_due') + ':'}}" col="{{ getRecordThumbnail().length ? '1' : '0' }}" row="3" class="form_label"/>
<Label text="{{ formattedDateDue() }}" col="1" row="{{ getRecordThumbnail().length ? '4' : '3' }}" class="date_due"/>
<GridLayout columns="100, *" rows="auto,auto,auto,auto,auto"
class="{{ 'loan' + (isLate() ? ' late' : '')}}">
<Label text="{{ getTitle() }}"
textWrap="true" col="0" row="0" colSpan="3"
class="title" />
<Image src="{{ getRecordThumbnail() }}"
visibility="{{ getRecordThumbnail().length ? 'visible' : 'collapsed' }}"
col="0" row="1" stretch="aspectFill" rowSpan="4"
class="cover"/>
<Label text="{{ L('author') + ':'}}"
col="{{ getRecordThumbnail().length ? '1' : '0' }}"
row="1"
class="form_label key"/>
<Label text="{{ getAuthor() }}"
textWrap="true" col="1"
row="{{ getRecordThumbnail().length ? '2' : '1' }}"
class="value"/>
<Label text="{{ L('date_due') + ':'}}"
col="{{ getRecordThumbnail().length ? '1' : '0' }}"
row="3"
class="form_label key"/>
<Label text="{{ formattedDateDue() }}"
col="1"
row="{{ getRecordThumbnail().length ? '4' : '3' }}"
class="date_due value"/>
</GridLayout>
</StackLayout>
</lv:RadListView.itemTemplate>
</lv:RadListView>
</GridLayout>
......@@ -2,22 +2,23 @@
<Page.actionBar>
<ActionBar title="{{ L('authentication') }}" icon="" />
</Page.actionBar>
<ScrollView>
<StackLayout>
<Label text="{{ L('enter_login_password') }}" textWrap="true" />
<GridLayout columns="120, *, 40" rows="auto, auto">
<Label text="{{ L('login') }}" col="0" row="0" textWrap="true" />
<TextField text="{{ credentials.login }}" col="1" row="0"/>
<Button text="&#xf02a;" col="2" row="0" class="scan_card" tap="{{ scanCardAction }}"/>
<Label text="{{ L('password') }}" col="0" row="1" textWrap="true" />
<TextField secure="true" text="{{ credentials.password }}" col="1" row="1"/>
</GridLayout>
<StackLayout>
<Button text="{{ L('save') }}" tap="{{ saveLoginPasswordAction }}" />
<Button text="{{ L('save') }}" tap="{{ saveLoginPasswordAction }}"
class="button-bottom"/>/>
<ActivityIndicator id="activity-indicator" busy="{{ busy }}"/>
</StackLayout>
</StackLayout>
......
......@@ -9,7 +9,7 @@
</ActionItem>
</ActionBar>
</Page.actionBar>
<nsDrawer:RadSideDrawer id="sideDrawer" drawerLocation="Right" drawerTransition="PushTransition">
<nsDrawer:RadSideDrawer.drawerContent xmlns:nsDrawer="nativescript-pro-ui/sidedrawer">
<shared:sidedrawer />
......@@ -23,8 +23,8 @@
dock="top"
itemTap="{{ onNoveltyTap }}">
<ListView.itemTemplate>
<GridLayout columns="100, *" rows="100">
<Image src="{{ getThumbnailUrl() }}" col="0" row="0" stretch="aspectFill"/>
<GridLayout columns="100, *" rows="100" id="novel">
<Image src="{{ getThumbnailUrl() }}" col="0" row="0" stretch="aspectFill" class="cover"/>
<DockLayout row="0" col="1" stretchLastChild="true">
<Label text="{{ getTitle() }}" textWrap="true" class="title" dock="top"/>
<Label text="{{ getDocType() }}" textWrap="true" dock="bottom" />
......@@ -32,7 +32,7 @@
</DockLayout>>
</GridLayout>
</ListView.itemTemplate>
</ListView>
<ActivityIndicator busy="true"/>
</StackLayout>
......
This diff is collapsed.
......@@ -42,7 +42,9 @@
"babylon": "6.15.0",
"chai": "^3.5.0",
"chai-spies": "^0.7.1",
"clean-webpack-plugin": "~0.1.19",
"copy-webpack-plugin": "~4.0.1",
"css-loader": "~0.28.7",
"extract-text-webpack-plugin": "~3.0.0",
"karma": "^1.4.1",
"karma-chai": "^0.1.0",
......@@ -52,18 +54,17 @@
"lazy": "1.0.11",
"mocha": "^3.2.0",
"nativescript-css-loader": "~0.26.0",
"nativescript-dev-sass": "^1.6.0",