diff --git a/src/popup/app/current/views/current.html b/src/popup/app/current/views/current.html index 8ba133f0bf..712aa6d51d 100644 --- a/src/popup/app/current/views/current.html +++ b/src/popup/app/current/views/current.html @@ -1,7 +1,8 @@ - - -

- Some content for your current sites. -

- - +
+ Back + Save +
Current Sites
+
+
+ Some content for your current sites. +
diff --git a/src/popup/app/global/globalModule.js b/src/popup/app/global/globalModule.js new file mode 100644 index 0000000000..6670e2ba92 --- /dev/null +++ b/src/popup/app/global/globalModule.js @@ -0,0 +1,2 @@ +angular + .module('bit.global', []); diff --git a/src/popup/app/global/mainController.js b/src/popup/app/global/mainController.js new file mode 100644 index 0000000000..0d42af1024 --- /dev/null +++ b/src/popup/app/global/mainController.js @@ -0,0 +1,10 @@ +angular + .module('bit.global') + + .controller('mainController', function ($scope, $state) { + $scope.currentYear = new Date().getFullYear(); + + $scope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) { + + }); + }); diff --git a/src/popup/app/global/tabs.html b/src/popup/app/global/tabs.html index b732cd8aee..9d23e04f59 100644 --- a/src/popup/app/global/tabs.html +++ b/src/popup/app/global/tabs.html @@ -1,14 +1,9 @@ - - - - - - - - - - - - - - +
+
+ +
diff --git a/src/popup/app/global/tabsController.js b/src/popup/app/global/tabsController.js new file mode 100644 index 0000000000..529a54bf19 --- /dev/null +++ b/src/popup/app/global/tabsController.js @@ -0,0 +1,6 @@ +angular + .module('bit.global') + + .controller('tabsController', function ($scope) { + + }); diff --git a/src/popup/index.html b/src/popup/index.html index 39129fb69d..f2bec79d7e 100644 --- a/src/popup/index.html +++ b/src/popup/index.html @@ -1,4 +1,5 @@ - + + @@ -29,6 +30,10 @@ + + + + @@ -46,19 +51,8 @@ - - - - - - - - + +
diff --git a/src/popup/less/popup.less b/src/popup/less/popup.less index 6fa88516d1..6ffca6b970 100644 --- a/src/popup/less/popup.less +++ b/src/popup/less/popup.less @@ -1,3 +1,137 @@ -body { +@import "../../../node_modules/bootstrap/less/bootstrap.less"; +@font-family: "Open Sans", sans-serif; +@brand-primary: #3c8dbc; + +body { + font-family: @font-family; + width: 320px; + height: 568px; +} + +.header { + min-height: 44px; + max-height: 44px; + background-color: @brand-primary; + color: white; + font-family: @font-family; + text-align: center; + position: absolute; + top: 0; + left: 0; + right: 0; + overflow: hidden; + + a { + color: white !important; + text-decoration: none; + + &:hover { + background-color: rgba(255, 255, 255, 0.1); + } + } + .title { + font-weight: bold; + display: block; + padding: 12px 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .left { + float: left; + display: block; + padding: 12px 10px; + } + .right { + float: right; + display: block; + padding: 12px 10px; + } +} + +.content { + position: absolute; + top: 44px; + bottom: 55px; + left: 0; + right: 0; + overflow: auto; +} + +.tabs { + width: 100%; + height: 55px; + background-color: #f5f5f5; + border-top: 1px solid #ddd; + position: absolute; + bottom: 0; + left: 0; + right: 0; + overflow: hidden; + + ul { + width: 100%; + list-style: none; + padding: 0; + margin: 0; + + li { + width: 25%; + float: left; + display: inline-block; + padding: 0; + margin: 0; + + a { + text-align: center; + display: block; + padding: 7px 0; + text-decoration: none; + color: #777; + font-size: 12px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &:hover { + background-color: rgba(255, 255, 255, 0.8); + } + + i { + display: block; + margin-bottom: 2px; + } + } + + &.active { + a { + color: @brand-primary; + } + } + } + } +} + +.list { + .list-item { + display: block; + padding: 10px 10px; + background-color: white; + border-bottom: 1px solid #ddd; + color: #333; + text-decoration: none; + + &:last-child { + border: none; + } + .text { + display: block; + } + .detail { + font-size: 12px; + color: #777; + display: block; + } + } }