Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use icon tag instead of font awesome icon #2537

Merged
merged 18 commits into from
Dec 7, 2021
Merged

Use icon tag instead of font awesome icon #2537

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
3ce7244
WIP: Use icon tag instead of font awesome icon #2508
Shivan-997 Nov 23, 2021
5b14025
WIP: Use icon tag instead of font awesome icon #2508
Shivan-997 Nov 29, 2021
f57eaa7
Merge branch 'main' into fix/2508/weird-metric-description
Shivan-997 Nov 29, 2021
e29ed7d
WIP: move search bar 1px to right #2508
Shivan-997 Nov 29, 2021
a104994
Merge branch 'main' into fix/2508/weird-metric-description
Shivan-997 Nov 29, 2021
8759d00
Merge branch 'main' into fix/2508/weird-metric-description
Shivan-997 Nov 29, 2021
fd588ad
Merge branch 'main' into fix/2508/weird-metric-description
Shivan-997 Nov 29, 2021
3ae8cbc
Merge branch 'main' into fix/2508/weird-metric-description
Shivan-997 Nov 29, 2021
dad33c8
Merge branch 'main' into fix/2508/weird-metric-description
Shivan-997 Nov 29, 2021
f4c660c
Merge branch 'main' into fix/2508/weird-metric-description
Shivan-997 Nov 30, 2021
a77e636
resolve change requests #2508
Shivan-997 Dec 6, 2021
7148d9c
Merge branch 'main' into fix/2508/weird-metric-description
Shivan-997 Dec 6, 2021
89489c5
Fix focus searchbar #2508
Shivan-997 Dec 6, 2021
4415fcb
Merge branch 'fix/2508/weird-metric-description' of https://github.co…
Shivan-997 Dec 6, 2021
466d9a6
Fix metric chooser test #2508
Shivan-997 Dec 7, 2021
1d44cd1
Add Entry to Changelog #2508
Shivan-997 Dec 7, 2021
c7ce590
remove unnecessary div tag, fix edge chooser test #2508
Shivan-997 Dec 7, 2021
6281a7b
add search-bar class name to area metric chooser #2508
Shivan-997 Dec 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
21 changes: 12 additions & 9 deletions visualization/app/codeCharta/ui/edgeChooser/edgeChooser.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,18 @@
ng-disabled="$ctrl.noEdgesAvailable()"
>
<md-select-header>
<input
id="edge-metric-selector"
class="metric-search"
ng-model="$ctrl._viewModel.searchTerm"
type="text"
placeholder="&#xF002; Metric (highest value)"
ng-keydown="$event.stopPropagation()"
ng-change="$ctrl.filterMetricData()"
/>
<div class="search-bar">
<i class="fa fa-search search-icon"></i>
<input
id="color-metric-selector"
class="metric-search color-metric"
ng-model="$ctrl._viewModel.searchTerm"
type="text"
placeholder="Metric (highest value)"
ng-keydown="$event.stopPropagation()"
ng-change="$ctrl.filterMetricData()"
/>
</div>
</md-select-header>
<md-content class="option-group">
<md-option
Expand Down
21 changes: 12 additions & 9 deletions visualization/app/codeCharta/ui/metricChooser/metricChooser.area.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,18 @@
md-container-class="ribbonBarDropdown"
>
<md-select-header>
<input
id="area-metric-selector"
class="metric-search area-metric"
ng-model="$ctrl._viewModel.searchTerm"
type="text"
placeholder="&#xF002; Metric (highest value)"
ng-keydown="$event.stopPropagation()"
ng-change="$ctrl.filterMetricData()"
/>
<div class="search-bar">
<i class="fa fa-search search-icon"></i>
<input
id="color-metric-selector"
class="metric-search color-metric"
Shivan-997 marked this conversation as resolved.
Show resolved Hide resolved
ng-model="$ctrl._viewModel.searchTerm"
type="text"
placeholder="Metric (highest value)"
ng-keydown="$event.stopPropagation()"
ng-change="$ctrl.filterMetricData()"
/>
</div>
</md-select-header>
<md-content class="option-group">
<md-option ng-repeat="metric in $ctrl._viewModel.metricData track by metric.name" value="{{::metric.name}}">
Expand Down
21 changes: 12 additions & 9 deletions visualization/app/codeCharta/ui/metricChooser/metricChooser.color.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,18 @@
md-container-class="ribbonBarDropdown"
>
<md-select-header>
<input
id="color-metric-selector"
class="metric-search color-metric"
ng-model="$ctrl._viewModel.searchTerm"
type="text"
placeholder="&#xF002; Metric (highest value)"
ng-keydown="$event.stopPropagation()"
ng-change="$ctrl.filterMetricData()"
/>
<div class="search-bar">
<i class="fa fa-search search-icon"></i>
<input
id="color-metric-selector"
class="metric-search color-metric"
ng-model="$ctrl._viewModel.searchTerm"
type="text"
placeholder="Metric (highest value)"
ng-keydown="$event.stopPropagation()"
ng-change="$ctrl.filterMetricData()"
/>
</div>
</md-select-header>
<md-content class="option-group">
<md-option ng-repeat="metric in $ctrl._viewModel.metricData track by metric.name" value="{{::metric.name}}">
Expand Down
43 changes: 31 additions & 12 deletions visualization/app/codeCharta/ui/metricChooser/metricChooser.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,26 +79,45 @@ edge-chooser-component {
display: initial;
}

.search-bar {
i,
input {
background-color: #f5f5f5;
padding: 10px;
border: none;
border-bottom: solid 2px;
border-color: rgba(0, 0, 0, 0.12);
}
}

.search-bar:focus-within {
i,
input {
border-color: rgb(0, 150, 136);
color: rgb(0, 150, 136);
}
}

.search-icon {
position: absolute;
left: 0;
width: 12%;
height: $optionHeight - 8 + px;
top: 8px;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.metric-search {
display: block;
position: fixed;
top: 8px;
width: 100%;
padding: 10px;
left: 12%;
width: 88%;
height: $optionHeight - 8 + px;
outline: none;
border: none;
border-bottom: solid 2px;
border-color: rgba(0, 0, 0, 0.12);
background-color: #f5f5f5;
font-family: Arial, FontAwesome, sans-serif;
font-size: 11pt;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2) !important;

&:focus {
Shivan-997 marked this conversation as resolved.
Show resolved Hide resolved
border-color: rgb(0, 150, 136);
color: rgb(0, 150, 136);
}
box-shadow: 5px 1px 5px 0 rgba(0, 0, 0, 0.2);
}

md-content.option-group {
Expand Down
21 changes: 12 additions & 9 deletions visualization/app/codeCharta/ui/metricChooser/metricChooser.distribution.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,18 @@
md-container-class="distributionBarDropdown"
>
<md-select-header>
<input
id="distribution-metric-selector"
class="metric-search distribution-metric"
ng-model="$ctrl._viewModel.searchTerm"
type="text"
placeholder="&#xF002; Metric (highest value)"
ng-keydown="$event.stopPropagation()"
ng-change="$ctrl.filterMetricData()"
/>
<div class="search-bar">
<i class="fa fa-search search-icon"></i>
<input
id="color-metric-selector"
class="metric-search color-metric"
ng-model="$ctrl._viewModel.searchTerm"
type="text"
placeholder="Metric (highest value)"
ng-keydown="$event.stopPropagation()"
ng-change="$ctrl.filterMetricData()"
/>
</div>
</md-select-header>
<md-content class="option-group">
<md-option ng-repeat="metric in $ctrl._viewModel.metricData track by metric.name" value="{{::metric.name}}">
Expand Down
21 changes: 12 additions & 9 deletions visualization/app/codeCharta/ui/metricChooser/metricChooser.height.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,18 @@
md-container-class="ribbonBarDropdown"
>
<md-select-header>
<input
id="height-metric-selector"
class="metric-search height-metric"
ng-model="$ctrl._viewModel.searchTerm"
type="text"
placeholder="&#xF002; Metric (highest value)"
ng-keydown="$event.stopPropagation()"
ng-change="$ctrl.filterMetricData()"
/>
<div class="search-bar">
<i class="fa fa-search search-icon"></i>
<input
id="color-metric-selector"
class="metric-search color-metric"
ng-model="$ctrl._viewModel.searchTerm"
type="text"
placeholder="Metric (highest value)"
ng-keydown="$event.stopPropagation()"
ng-change="$ctrl.filterMetricData()"
/>
</div>
</md-select-header>
<md-content class="option-group">
<md-option ng-repeat="metric in $ctrl._viewModel.metricData track by metric.name" value="{{::metric.name}}">
Expand Down