Change search and filter icons to SVG (#13473)
Unfortunately, the Fomantic CSS relies on i.icon instead of .icon so a wrapper is necessary for these with an accompanying class to center the icon.
This commit is contained in:
parent
ef2ffc6aed
commit
8bae34c4b2
11 changed files with 25 additions and 25 deletions
|
@ -37,7 +37,7 @@
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<div class="ui icon input">
|
<div class="ui icon input">
|
||||||
<input class="searchbox" type="text" placeholder="{{.i18n.Tr "search_project"}}">
|
<input class="searchbox" type="text" placeholder="{{.i18n.Tr "search_project"}}">
|
||||||
<i class="search icon"></i>
|
<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
*/}}
|
*/}}
|
||||||
|
|
|
@ -18,7 +18,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="menu transition" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak>
|
<div class="menu transition" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak>
|
||||||
<div class="ui icon search input">
|
<div class="ui icon search input">
|
||||||
<i class="filter icon"></i>
|
<i class="icon df ac jc m-0">{{svg "octicon-filter" 16}}</i>
|
||||||
<input name="search" ref="searchField" v-model="searchTerm" @keydown="keydown($event)" placeholder="{{.i18n.Tr "repo.filter_branch_and_tag"}}...">
|
<input name="search" ref="searchField" v-model="searchTerm" @keydown="keydown($event)" placeholder="{{.i18n.Tr "repo.filter_branch_and_tag"}}...">
|
||||||
</div>
|
</div>
|
||||||
<div class="header branch-tag-choice">
|
<div class="header branch-tag-choice">
|
||||||
|
|
|
@ -21,7 +21,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="menu">
|
<div class="menu">
|
||||||
<div class="ui icon search input">
|
<div class="ui icon search input">
|
||||||
<i class="filter icon"></i>
|
<i class="icon df ac jc m-0">{{svg "octicon-filter" 16}}</i>
|
||||||
<input name="search" placeholder="{{.i18n.Tr "repo.pulls.filter_branch"}}...">
|
<input name="search" placeholder="{{.i18n.Tr "repo.pulls.filter_branch"}}...">
|
||||||
</div>
|
</div>
|
||||||
<div class="scrolling menu">
|
<div class="scrolling menu">
|
||||||
|
@ -54,7 +54,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="menu">
|
<div class="menu">
|
||||||
<div class="ui icon search input">
|
<div class="ui icon search input">
|
||||||
<i class="filter icon"></i>
|
<i class="icon df ac jc m-0">{{svg "octicon-filter" 16}}</i>
|
||||||
<input name="search" placeholder="{{.i18n.Tr "repo.pulls.filter_branch"}}...">
|
<input name="search" placeholder="{{.i18n.Tr "repo.pulls.filter_branch"}}...">
|
||||||
</div>
|
</div>
|
||||||
<div class="scrolling menu">
|
<div class="scrolling menu">
|
||||||
|
|
|
@ -12,7 +12,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="menu">
|
<div class="menu">
|
||||||
<div class="ui icon search input">
|
<div class="ui icon search input">
|
||||||
<i class="filter icon"></i>
|
<i class="icon df ac jc m-0">{{svg "octicon-filter" 16}}</i>
|
||||||
<input name="search" placeholder="{{.i18n.Tr "repo.filter_branch_and_tag"}}...">
|
<input name="search" placeholder="{{.i18n.Tr "repo.filter_branch_and_tag"}}...">
|
||||||
</div>
|
</div>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
|
|
|
@ -49,7 +49,7 @@
|
||||||
<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_labels_title"}}</div>
|
<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_labels_title"}}</div>
|
||||||
{{if or .Labels .OrgLabels}}
|
{{if or .Labels .OrgLabels}}
|
||||||
<div class="ui icon search input">
|
<div class="ui icon search input">
|
||||||
<i class="search icon"></i>
|
<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
|
||||||
<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_labels"}}">
|
<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_labels"}}">
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
|
@ -94,7 +94,7 @@
|
||||||
<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_milestone_title"}}</div>
|
<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_milestone_title"}}</div>
|
||||||
{{if or .OpenMilestones .ClosedMilestones}}
|
{{if or .OpenMilestones .ClosedMilestones}}
|
||||||
<div class="ui icon search input">
|
<div class="ui icon search input">
|
||||||
<i class="search icon"></i>
|
<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
|
||||||
<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_milestones"}}">
|
<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_milestones"}}">
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
|
@ -151,7 +151,7 @@
|
||||||
<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_project_title"}}</div>
|
<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_project_title"}}</div>
|
||||||
{{if or .OpenProjects .ClosedProjects}}
|
{{if or .OpenProjects .ClosedProjects}}
|
||||||
<div class="ui icon search input">
|
<div class="ui icon search input">
|
||||||
<i class="search icon"></i>
|
<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
|
||||||
<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_projects"}}">
|
<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_projects"}}">
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
|
@ -207,7 +207,7 @@
|
||||||
<div class="filter menu" data-id="#assignee_ids">
|
<div class="filter menu" data-id="#assignee_ids">
|
||||||
<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_assignees_title"}}</div>
|
<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_assignees_title"}}</div>
|
||||||
<div class="ui icon search input">
|
<div class="ui icon search input">
|
||||||
<i class="search icon"></i>
|
<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
|
||||||
<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_assignees"}}">
|
<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_assignees"}}">
|
||||||
</div>
|
</div>
|
||||||
<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_assignees"}}</div>
|
<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_assignees"}}</div>
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_reviewer_title"}}</div>
|
<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_reviewer_title"}}</div>
|
||||||
{{if .Reviewers}}
|
{{if .Reviewers}}
|
||||||
<div class="ui icon search input">
|
<div class="ui icon search input">
|
||||||
<i class="search icon"></i>
|
<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
|
||||||
<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_reviewers"}}">
|
<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_reviewers"}}">
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
|
@ -101,7 +101,7 @@
|
||||||
<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_labels_title"}}</div>
|
<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_labels_title"}}</div>
|
||||||
{{if or .Labels .OrgLabels}}
|
{{if or .Labels .OrgLabels}}
|
||||||
<div class="ui icon search input">
|
<div class="ui icon search input">
|
||||||
<i class="search icon"></i>
|
<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
|
||||||
<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_labels"}}">
|
<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_labels"}}">
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
|
@ -149,7 +149,7 @@
|
||||||
<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_milestone_title"}}</div>
|
<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_milestone_title"}}</div>
|
||||||
{{if or .OpenMilestones .ClosedMilestones}}
|
{{if or .OpenMilestones .ClosedMilestones}}
|
||||||
<div class="ui icon search input">
|
<div class="ui icon search input">
|
||||||
<i class="search icon"></i>
|
<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
|
||||||
<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_milestones"}}">
|
<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_milestones"}}">
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
|
@ -246,7 +246,7 @@
|
||||||
<div class="filter menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/assignee">
|
<div class="filter menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/assignee">
|
||||||
<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_assignees_title"}}</div>
|
<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_assignees_title"}}</div>
|
||||||
<div class="ui icon search input">
|
<div class="ui icon search input">
|
||||||
<i class="search icon"></i>
|
<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
|
||||||
<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_assignees"}}">
|
<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_assignees"}}">
|
||||||
</div>
|
</div>
|
||||||
<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_assignees"}}</div>
|
<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_assignees"}}</div>
|
||||||
|
|
|
@ -61,7 +61,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="menu">
|
<div class="menu">
|
||||||
<div class="ui icon search input">
|
<div class="ui icon search input">
|
||||||
<i class="filter icon"></i>
|
<i class="icon df ac jc m-0">{{svg "octicon-filter" 16}}</i>
|
||||||
<input name="search" placeholder="{{.i18n.Tr "repo.pulls.filter_branch"}}...">
|
<input name="search" placeholder="{{.i18n.Tr "repo.pulls.filter_branch"}}...">
|
||||||
</div>
|
</div>
|
||||||
<div class="scrolling menu" id="branch-select">
|
<div class="scrolling menu" id="branch-select">
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
<div class="ui fluid action input">
|
<div class="ui fluid action input">
|
||||||
<input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "repo.search.search_repo"}}">
|
<input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "repo.search.search_repo"}}">
|
||||||
<button class="ui button" type="submit">
|
<button class="ui button" type="submit">
|
||||||
<i class="search icon"></i>
|
<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="menu">
|
<div class="menu">
|
||||||
<div class="ui icon search input">
|
<div class="ui icon search input">
|
||||||
<i class="filter icon"></i>
|
<i class="icon df ac jc m-0">{{svg "octicon-filter" 16}}</i>
|
||||||
<input name="search" placeholder="{{.i18n.Tr "repo.wiki.filter_page"}}...">
|
<input name="search" placeholder="{{.i18n.Tr "repo.wiki.filter_page"}}...">
|
||||||
</div>
|
</div>
|
||||||
<div class="scrolling menu">
|
<div class="scrolling menu">
|
||||||
|
|
|
@ -29,9 +29,9 @@
|
||||||
<div class="ui attached secondary segment repos-search">
|
<div class="ui attached secondary segment repos-search">
|
||||||
<div class="ui fluid right action left icon input" :class="{loading: isLoading}">
|
<div class="ui fluid right action left icon input" :class="{loading: isLoading}">
|
||||||
<input @input="searchRepos(reposFilter)" v-model="searchQuery" ref="search" placeholder="{{.i18n.Tr "home.search_repos"}}">
|
<input @input="searchRepos(reposFilter)" v-model="searchQuery" ref="search" placeholder="{{.i18n.Tr "home.search_repos"}}">
|
||||||
<i class="search icon"></i>
|
<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
|
||||||
<div class="ui dropdown button" title="{{.i18n.Tr "home.filter"}}">
|
<div class="ui dropdown icon button" title="{{.i18n.Tr "home.filter"}}">
|
||||||
<i class="icon filter"></i>
|
<i class="icon df ac jc m-0">{{svg "octicon-filter" 16}}</i>
|
||||||
<div class="menu">
|
<div class="menu">
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<a @click="toggleArchivedFilter()">
|
<a @click="toggleArchivedFilter()">
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
.df { display: flex; }
|
.df { display: flex !important; }
|
||||||
.ac { align-items: center; }
|
.ac { align-items: center !important; }
|
||||||
.jc { justify-content: center; }
|
.jc { justify-content: center !important; }
|
||||||
.js { justify-content: flex-start; }
|
.js { justify-content: flex-start !important; }
|
||||||
.je { justify-content: flex-end; }
|
.je { justify-content: flex-end !important; }
|
||||||
.sb { justify-content: space-between; }
|
.sb { justify-content: space-between !important; }
|
||||||
.mono { font-family: var(--fonts-monospace); font-size: .9em; /* compensate for monospace fonts being usually slighty larger */ }
|
.mono { font-family: var(--fonts-monospace); font-size: .9em; /* compensate for monospace fonts being usually slighty larger */ }
|
||||||
.rounded { border-radius: var(--border-radius) !important; }
|
.rounded { border-radius: var(--border-radius) !important; }
|
||||||
.word-break { word-wrap: break-word; word-break: break-all; }
|
.word-break { word-wrap: break-word; word-break: break-all; }
|
||||||
|
|
Reference in a new issue