From b669078025c656efbf68b88d2f9c095ebe462b01 Mon Sep 17 00:00:00 2001 From: Stas Vilchik Date: Thu, 9 Feb 2017 16:53:05 +0100 Subject: [PATCH] revert styles used in views console --- .../src/main/less/components/navigator.less | 25 ++ .../main/less/components/navigator/base.less | 414 ++++++++++++++++++ .../less/components/navigator/config.less | 51 +++ .../less/components/navigator/filters.less | 340 ++++++++++++++ server/sonar-web/src/main/less/sonar.less | 1 + 5 files changed, 831 insertions(+) create mode 100644 server/sonar-web/src/main/less/components/navigator.less create mode 100644 server/sonar-web/src/main/less/components/navigator/base.less create mode 100644 server/sonar-web/src/main/less/components/navigator/config.less create mode 100644 server/sonar-web/src/main/less/components/navigator/filters.less diff --git a/server/sonar-web/src/main/less/components/navigator.less b/server/sonar-web/src/main/less/components/navigator.less new file mode 100644 index 00000000000..20c08a3d07a --- /dev/null +++ b/server/sonar-web/src/main/less/components/navigator.less @@ -0,0 +1,25 @@ +/* + * SonarQube + * Copyright (C) 2009-2016 SonarSource SA + * mailto:contact AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +@import (reference) "../mixins"; +@import (reference) "../variables"; + +@import "navigator/config"; +@import "navigator/base"; +@import "navigator/filters"; diff --git a/server/sonar-web/src/main/less/components/navigator/base.less b/server/sonar-web/src/main/less/components/navigator/base.less new file mode 100644 index 00000000000..86dc0e06fad --- /dev/null +++ b/server/sonar-web/src/main/less/components/navigator/base.less @@ -0,0 +1,414 @@ +/* + * SonarQube + * Copyright (C) 2009-2016 SonarSource SA + * mailto:contact AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +@import (reference) "../../variables"; +@import (reference) "../../mixins"; +@import (reference) "config"; + + +.navigator { } + + +.navigator-element() { + position: fixed; + z-index: @navigator-element-z-index; + box-sizing: border-box; +} + +.navigator-header { + height: @navigatorHeaderHeight; + margin: @navigatorPadding; + border: 1px solid @navigatorBorderLightColor; + box-sizing: border-box; +} + +.navigator-filters { + position: relative; + border: 1px solid @navigatorBorderLightColor; + box-sizing: border-box; +} + +.navigator-content { + display: table; + width: 100%; +} + +.navigator-side { + position: relative; + display: table-cell; + vertical-align: top; + width: @navigatorResultsWidth + 2 * @navigatorPadding; + min-width: 275px + 2 * @navigatorPadding; + max-width: 600px + 2 * @navigatorPadding; +} + +.navigator-main { + display: table-cell; + vertical-align: top; +} + +.navigator-results { + position: relative; + z-index: @navigator-results-z-index; + width: @navigatorResultsWidth; + min-width: 275px; + max-width: 600px; + margin: @navigatorPadding @navigatorPadding 0; + box-sizing: border-box; +} + +.navigator-actions { + position: relative; + z-index: @navigator-actions-z-index; + margin: 0 @navigatorPadding @navigatorPadding; + border: 1px solid @navigatorBorderLightColor; + box-sizing: border-box; + .clearfix; +} + +.navigator-details { + position: relative; + margin: @navigatorPadding 0 0 0; +} + +.navigator-notes { + display: none; +} + +.navigator-with-notes { + + .navigator-notes { + display: block; + } +} + + +.measures-page { + .navigator-details { overflow: visible; } +} + + +.navigator-fetching { + &:before { + content: " "; + position: absolute; + z-index: @navigator-fetching-z-index; + top: 0; bottom: 0; left: 0; right: 0; + background: #fff url(../../../images/loading.gif) no-repeat 4px 4px; + } +} + + +.navigator-page-loader { + padding: @navigatorPadding 0 0 @navigatorPadding; +} + + + +// Header +.navigator-header { + padding: 0 @navigatorPadding; + background-color: @navigatorBarBackground; + font-size: 0; + + .page-title, + .page-actions { + margin: (@navigatorHeaderHeight - @formControlHeight) / 2 0; + } +} + +.navigator-header-favorite { + padding-left: 58px; +} + +.navigator-header-title { + display: inline-block; + vertical-align: middle; + color: @navigatorHeaderColor; + font-size: 20px; + line-height: @navigatorHeaderLineHeight; +} + +.navigator-header-title-note { + vertical-align: middle; + color: #777; + font-size: @smallFontSize; +} + +.navigator-header-description { + display: inline-block; + vertical-align: middle; + max-width: 70%; + margin-left: 16px; + font-size: @smallFontSize; + font-style: italic; +} + +.navigator-header-actions { + margin: 8px 0 8px 20px; + + & > a { + vertical-align: middle; + margin: 0 8px; + font-size: @smallFontSize; + } +} + +.navigator-header-menu-toggle { + display: inline-block; + vertical-align: top; + height: 36px; + margin-right: 10px; + margin-left: -10px; + padding: 10px; + border-right: 1px solid transparent; + box-sizing: border-box; + cursor: pointer; + transition: all 0.2s ease; + + &:hover { + background-color: @navigatorHover; + } + + &.active { + border-color: #cdcdcd; + background-color: #fff; + } + + [class^="icon-"], [class*=" icon-"] { + font-size: 16px; + } +} + + + +// Notes +.navigator-notes { + margin: 0 @navigatorPadding @navigatorPadding @navigatorPadding; + padding: 0 @navigatorPadding; + border: 1px solid @navigatorBorderColor; + background-color: @navigatorBarBackground; + + color: #777; + font-size: @smallFontSize; + line-height: @navigatorNotesHeight; +} + + + +// Facets +.navigator-facets { + padding: @navigatorPadding; + border-bottom: 1px solid @navigatorBorderColor; + background-color: @navigatorBarBackground; +} + +.navigator-facets-list { + +} + +.navigator-facets-list-item { + font-size: 0; + margin-bottom: -6px; +} + +.navigator-facets-list-item + .navigator-facets-list-item { + margin-top: @navigatorPadding; +} + +.navigator-facets-list-item-name { + float: left; + line-height: 22px; + min-width: 120px; + margin-right: @navigatorPadding; + font-size: @smallFontSize; + font-weight: normal; + text-transform: uppercase; +} + +.navigator-facets-list-item-options { + overflow: hidden; +} + + + +// Results +.navigator-results { + background-color: @white; + overflow-x: hidden; + overflow-y: auto; + + &.fetching { + .navigator-results-list { visibility: hidden; } + .navigator-results-loader { display: block; } + } +} + +.navigator-results-loader { + position: fixed; + z-index: @navigator-results-loader-z-index; + display: none; + background-color: #fff; +} + +.navigator-results-list { + + & > li { + position: relative; + z-index: @normal-z-index; + padding: @navigatorPadding / 2 0; + border: 1px solid; + border-color: @navigatorBorderLightColor transparent; + cursor: pointer; + transition: all 0.2s ease; + + .line { + padding: @navigatorPadding / 2 @navigatorPadding; + line-height: 1.2; + } + + .line-small { + font-size: 11px; + line-height: 14px; + } + + .line-right { + float: right; + } + + .line-nowrap { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + &:hover { + background-color: @navigatorBarBackground; + } + + &.active { + z-index: @above-normal-z-index; + background-color: #CAE3F2; + border-color: #4B9FD5; + } + } + + & > li + li { margin-top: -1px; } +} + +.navigator-results-no-results { + padding-top: 20% !important; + background: #fff !important; + border-color: transparent !important; + color: #999; + cursor: default !important; + text-align: center; +} + + + +// Details +.navigator-details { + background-color: @white; + overflow: auto; + + &.loading { + background: @white url("../../../images/loading.gif") no-repeat 4px 2px; + } +} + + + +// Status +.navigator-actions { + padding: 0 @navigatorPadding 0 0; + + border-right: 1px solid @navigatorBorderLightColor; + border-bottom: 1px solid @navigatorBorderLightColor; + background-color: @navigatorBarBackground; + font-size: @smallFontSize; + + strong { font-weight: bold; } +} + +.navigator-actions-order { + float: left; + padding: 0 @navigatorPadding; + line-height: @navigatorStatusHeight; + cursor: pointer; + transition: all 0.2s ease; + + &:hover { + background-color: @navigatorHover; + } +} + +.navigator-actions-order-choices { + position: absolute; + top: 100%; + left: -1px; + min-width: @navigatorResultsWidth / 2; + background-color: #fff; + border: 1px solid @navigatorBorderLightColor; + box-shadow: @defaultShadow; + overflow: hidden; + display: none; + + & > li { + height: @navigatorStatusHeight; + line-height: @navigatorStatusHeight; + padding: 0 10px; + cursor: pointer; + transition: all 0.2s ease; + + &:hover { + background-color: @navigatorBarBackground; + } + } + + &.open { + display: block; + } +} + +.navigator-actions-total { + float: right; + height: @navigatorStatusHeight; + line-height: @navigatorStatusHeight; +} + +.navigator-actions-bulk { + position: relative; + top: -1px; + margin-left: 8px; + font-size: 16px; + text-decoration: none; +} + + + +// Footer +.navigator-page #footer { + margin: 0; + border-top: 1px solid @navigatorBorderLightColor; +} + +.navigator-page #ftlinks { + margin-top: 0; +} diff --git a/server/sonar-web/src/main/less/components/navigator/config.less b/server/sonar-web/src/main/less/components/navigator/config.less new file mode 100644 index 00000000000..d0d473b9a39 --- /dev/null +++ b/server/sonar-web/src/main/less/components/navigator/config.less @@ -0,0 +1,51 @@ +/* + * SonarQube + * Copyright (C) 2009-2016 SonarSource SA + * mailto:contact AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +@import (reference) "../../variables"; + +// Layout +@navigatorTopOffset: 80px; +@navigatorBottomOffset: 35px; + +@navigatorHeaderHeight: 40px; +@navigatorHeaderLineHeight: @navigatorHeaderHeight - 3px; +@navigatorFiltersHeight: 40px; +@navigatorFiltersLineHeight: @navigatorFiltersHeight - 3px; +@navigatorFacetsHeight: 90px; +@navigatorStatusHeight: 30px; +@navigatorNotesHeight: 20px; + +@navigatorResultsWidth: 320px; + +@navigatorPadding: 10px; + + +// Colors +@navigatorBarBackground: @barBackgroundColor; +@navigatorBorderColor: @barBorderColor; +@navigatorBorderLightColor: @barBorderColor; + +@navigatorHeaderColor: @baseFontColor; + +@navigatorFacetStatColor: @secondFontColor; +@navigatorFacetInactiveBackground: lighten(@barBackgroundColor, 4%); + + +@navigatorHover: darken(@navigatorBarBackground, 5%); +@navigatorFilterPadding: @navigatorPadding; diff --git a/server/sonar-web/src/main/less/components/navigator/filters.less b/server/sonar-web/src/main/less/components/navigator/filters.less new file mode 100644 index 00000000000..51a52071fe1 --- /dev/null +++ b/server/sonar-web/src/main/less/components/navigator/filters.less @@ -0,0 +1,340 @@ +/* + * SonarQube + * Copyright (C) 2009-2016 SonarSource SA + * mailto:contact AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +@import (reference) "../../variables"; +@import (reference) "../../mixins"; +@import (reference) "config"; + + +.navigator-filters { + padding-right: 85px; + background-color: @navigatorBarBackground; + font-size: 0; +} + +.navigator-filters-list { + display: inline-block; + vertical-align: middle; + font-size: 0; + margin-bottom: -1px; +} + +.navigator-filter-submit, +.navigator-filter-new-search { + vertical-align: middle; + margin-left: 15px; + font-size: @baseFontSize; +} + +.navigator-filter-submit { + position: absolute; + bottom: 0; right: 0; + width: 85px; + height: @navigatorFiltersHeight; + margin: -1px -1px -1px 0; + padding: 0; + border: 1px solid darken(@blue, 10%); + background: @blue; + color: #fff; + font-weight: normal; + transition: all 0.2s ease; + + &::-moz-focus-inner { border: 0; } + + &:hover, &:focus { + border-color: @blue; + background-color: lighten(@blue, 10%); + } +} + +.navigator-filter-list-favorite { + position: relative; + padding-left: 36px; + overflow: hidden; +} + +.navigator-filters-actions { + display: inline-block; + vertical-align: middle; + margin-left: 20px; + font-size: @baseFontSize; +} + +.navigator-filter { + position: relative; + z-index: @normal-z-index; + display: inline-block; + vertical-align: top; + height: @navigatorFiltersHeight; + line-height: @navigatorFiltersLineHeight; + margin: -1px 0 0 -1px; + padding: 0 1.5 * @navigatorFilterPadding; + border: 1px solid @navigatorBorderLightColor; + box-sizing: border-box; + white-space: nowrap; + cursor: pointer; + transition: all 0.2s ease; + + &:hover { + z-index: @above-normal-z-index; + border-color: @navigatorBorderColor; + background-color: @navigatorHover; + } + + &.active { + border-color: @darkGrey; + background: #fff; + } + +} + +.navigator-filter-disabled { + display: none; +} + +.navigator-filter-optional { + padding-right: 0; +} + +.navigator-filter-inline, +.navigator-filter-read-only, +.navigator-filter-inactive { + cursor: default; + + &:hover, + &.active { + border-color: transparent; + background: transparent; + } +} + +.navigator-filter-inline .navigator-filter-label:after { + content: ""; +} + +.navigator-filter-inactive { + opacity: 0.5; +} + +.navigator-filter-context { + z-index: @navigator-filter-context-z-index; + background-color: @contextBackground; + border-color: @contextBorder; +} + +.navigator-filter-label { + display: inline-block; + vertical-align: middle; + margin-right: 5px; + color: #333; + font-size: @baseFontSize; + + &:after { content: ":"; } +} + +.navigator-filter-value { + display: inline-block; + vertical-align: middle; + max-width: 120px; + color: #333; + font-size: @baseFontSize; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + &.default { + color: #666; + } +} + +.navigator-filter-disable { + display: inline-block; + vertical-align: middle; + width: 20px; + height: 20px; + line-height: 20px; + margin: 0 0 0 5px; + font-size: 18px; + text-align: center; + transition: background 0.3s ease; + + &:hover { + background-color: darken(@navigatorHover, 7%); + } +} + +.navigator-filter-range-input { + width: 120px; +} + +.navigator-filter-details { + display: none; + position: absolute; + z-index: @dropdown-menu-z-index; + min-width: 100px; + border: 1px solid @darkGrey; + background: #fff; + box-shadow: @defaultShadow; + font-size: @baseFontSize; + transition: opacity 0.3s ease; + + &.active { + display: block; + } +} + +@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + /* IE10+ specific styles go here */ + .navigator-filter-details { + width: 250px; + } +} + +.navigator-filter-details-inner { + max-width: 300px; + padding: 5px @navigatorFilterPadding; + + .select2-container, + input { + margin: 5px 0; + vertical-align: middle; + } +} + +.navigator-filter-select-list { + min-width: 150px; + max-width: 300px; + max-height: 182px; + padding: 5px 0; + overflow-y: auto; + -ms-overflow-style: scrollbar; + + label { + display: block; + padding: 5px @navigatorFilterPadding; + cursor: pointer; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + transition: background 0.2s ease; + + &:hover, + &.current { + background-color: darken(#fff, 7%); + } + + & > input[type=checkbox] { + vertical-align: baseline; + cursor: pointer; + } + + & > img { + vertical-align: text-bottom; + } + + &.special { + font-style: italic; + + & > span { + text-decoration: underline; + } + } + + &.inactive { + cursor: default; + opacity: 0.5; + + &:hover { + background-color: transparent; + } + } + } + + .single { + padding: 5px @navigatorFilterPadding; + } + + .line { + height: 1px; + margin: 5px 0; + background: @darkGrey; + } +} + +.navigator-filter-select-list:not(.hidden) + .navigator-filter-select-list { + margin-top: 5px; + border-top: 1px solid @darkGrey; +} + +.navigator-filter-search { + position: relative; + margin: @navigatorFilterPadding 26px @navigatorFilterPadding @navigatorFilterPadding; + + input { + width: 100%; + height: 26px; + padding: 0 7px; + border: 1px solid @darkGrey; + box-sizing: border-box; + } + + .fetching &:after { + content: ' '; + position: absolute; + top: 6px; right: -21px; + display: block; + width: 16px; + height: 16px; + background: #fff url(../../../images/loading.gif) no-repeat center center; + } + + &.fetching-error { + + input { border: 2px solid @red; } + } +} + +.navigator-filter-load-more { + display: none; + height: 26px; + line-height: 26px; + background-color: @grey; + text-align: center; + cursor: pointer; + transition: background 0.3s ease; + + &:hover { + background-color: darken(@grey, 7%); + } +} + +.navigator-filter-favorite { + position: relative; +} + +.navigator-filter-favorite-toggle { + width: 16px; + height: @navigatorFiltersHeight; + background: url(../../../images/navigator/favorite-filters@2x.png) no-repeat center center; + background-size: 16px 14px; +} + +.navigator-filter-more-criteria { + font-size: @baseFontSize; +} diff --git a/server/sonar-web/src/main/less/sonar.less b/server/sonar-web/src/main/less/sonar.less index e8e87f3a6bb..c9e9323628e 100644 --- a/server/sonar-web/src/main/less/sonar.less +++ b/server/sonar-web/src/main/less/sonar.less @@ -44,6 +44,7 @@ @import "components/dropdowns"; @import "components/menu"; @import "components/page"; +@import "components/navigator"; @import "components/component-name"; @import "components/navbar"; @import "components/select-list"; -- 2.39.5