Skip to content

Commit 8a489e0

Browse files
author
Dobromir Hristov
committed
feat: implement icons
1 parent c50307b commit 8a489e0

File tree

8 files changed

+217
-19
lines changed

8 files changed

+217
-19
lines changed

‎src/components/DocumentationTopic/TopicLinkBlockIcon.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import PathIcon from 'theme/components/Icons/PathIcon.vue';
2323
import TutorialIcon from 'theme/components/Icons/TutorialIcon.vue';
2424
import { TopicRole } from 'docc-render/constants/roles';
2525
26-
const TopicRoleIcons = {
26+
export const TopicRoleIcons = {
2727
[TopicRole.article]: ArticleIcon,
2828
[TopicRole.collectionGroup]: ApiCollectionIcon,
2929
[TopicRole.learn]: PathIcon,

‎src/components/Icons/CollectionIcon.vue‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!--
2+
This source file is part of the Swift.org open source project
3+
4+
Copyright (c) 2021 Apple Inc. and the Swift project authors
5+
Licensed under Apache License v2.0 with Runtime Library Exception
6+
7+
See https://swift.org/LICENSE.txt for license information
8+
See https://swift.org/CONTRIBUTORS.txt for Swift project authors
9+
-->
10+
11+
<template>
12+
<SVGIcon viewBox="0 0 16 16" class="collection-icon">
13+
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
14+
<g transform="translate(2.100000, 2.800000)" fill="#509CA3" fill-rule="nonzero">
15+
<path
16+
d="M1.00195312,6.21367188 C1.55273438,6.21367188 2.00390625,5.7625 2.00390625,5.21171875 C2.00390625,4.6609375 1.55273438,4.20976563 1.00195312,4.20976563 C0.451171875,4.20976563 0,4.6609375 0,5.21171875 C0,5.7625 0.451171875,6.21367188 1.00195312,6.21367188 Z M10.9238281,5.93828125 C11.328125,5.93828125 11.6503906,5.621875 11.6503906,5.21171875 C11.6503906,4.80742188 11.3339844,4.48515625 10.9238281,4.48515625 L4.0546875,4.48515625 C3.65039063,4.48515625 3.328125,4.8015625 3.328125,5.21171875 C3.328125,5.61601563 3.64453125,5.93828125 4.0546875,5.93828125 L10.9238281,5.93828125 Z"></path>
17+
<path
18+
d="M1.00195312,8.41367188 C1.55273438,8.41367188 2.00390625,8.87070313 2.00390625,9.42148438 C2.00390625,9.97226563 1.55273438,10.4234375 1.00195312,10.4234375 C0.451171875,10.4234375 0,9.97226563 0,9.42148438 C0,8.87070313 0.451171875,8.41367188 1.00195312,8.41367188 Z M10.9238281,8.69492188 C11.3339844,8.69492188 11.6503906,9.0171875 11.6503906,9.42148438 C11.6503906,9.82578125 11.328125,10.1480469 10.9238281,10.1480469 L10.9238281,10.1480469 L4.0546875,10.1480469 C3.64453125,10.1480469 3.328125,9.82578125 3.328125,9.42148438 C3.328125,9.01132813 3.65039063,8.69492188 4.0546875,8.69492188 L4.0546875,8.69492188 Z"></path>
19+
<path
20+
d="M1.00195312,0 C1.55273438,0 2.00390625,0.45703125 2.00390625,1.0078125 C2.00390625,1.55859375 1.55273438,2.00976562 1.00195312,2.00976562 C0.451171875,2.00976562 0,1.55859375 0,1.0078125 C0,0.45703125 0.451171875,0 1.00195312,0 Z M10.9238281,0.28125 C11.3339844,0.28125 11.6503906,0.603515625 11.6503906,1.0078125 C11.6503906,1.41210938 11.328125,1.734375 10.9238281,1.734375 L10.9238281,1.734375 L4.0546875,1.734375 C3.64453125,1.734375 3.328125,1.41210938 3.328125,1.0078125 C3.328125,0.59765625 3.65039063,0.28125 4.0546875,0.28125 L4.0546875,0.28125 Z"></path>
21+
</g>
22+
</g>
23+
</SVGIcon>
24+
</template>
25+
26+
<script>
27+
import SVGIcon from 'docc-render/components/SVGIcon.vue';
28+
29+
export default {
30+
name: 'CollectionIcon',
31+
components: { SVGIcon },
32+
};
33+
</script>

‎src/components/Icons/SingleLetterSymbolIcon.vue‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!--
2+
This source file is part of the Swift.org open source project
3+
4+
Copyright (c) 2021 Apple Inc. and the Swift project authors
5+
Licensed under Apache License v2.0 with Runtime Library Exception
6+
7+
See https://swift.org/LICENSE.txt for license information
8+
See https://swift.org/CONTRIBUTORS.txt for Swift project authors
9+
-->
10+
11+
<template>
12+
<SVGIcon
13+
class="reset-circle-icon"
14+
width="16px" height="16px" viewBox="0 0 16 16"
15+
>
16+
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
17+
<g transform="translate(1.000000, 1.000000)">
18+
<rect :stroke="color" x="0.5" y="0.5" width="13" height="13" rx="3"></rect>
19+
<text font-family="SFProRounded-Bold, SF Pro Rounded" font-size="11" font-weight="bold" :fill="color">
20+
<tspan text-anchor="middle" x="7" y="11">{{ word[0] }}</tspan>
21+
</text>
22+
</g>
23+
</g>
24+
</SVGIcon>
25+
</template>
26+
27+
<script>
28+
import SVGIcon from 'docc-render/components/SVGIcon.vue';
29+
30+
export default {
31+
name: 'SingleLetterSymbolIcon',
32+
components: { SVGIcon },
33+
props: {
34+
word: {
35+
type: String,
36+
required: true,
37+
},
38+
color: {
39+
type: String,
40+
default: '#BF6AF7',
41+
},
42+
},
43+
};
44+
</script>

‎src/components/Icons/TwoLetterSymbolIcon.vue‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!--
2+
This source file is part of the Swift.org open source project
3+
4+
Copyright (c) 2021 Apple Inc. and the Swift project authors
5+
Licensed under Apache License v2.0 with Runtime Library Exception
6+
7+
See https://swift.org/LICENSE.txt for license information
8+
See https://swift.org/CONTRIBUTORS.txt for Swift project authors
9+
-->
10+
11+
<template>
12+
<SVGIcon
13+
class="reset-circle-icon"
14+
width="16px" height="16px" viewBox="0 0 16 16"
15+
>
16+
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
17+
<g transform="translate(1.000000, 1.000000)">
18+
<rect :stroke="color" x="0.5" y="0.5" width="13" height="13" rx="3"></rect>
19+
<text font-family="SFProRounded-Bold, SF Pro Rounded" font-size="8" font-weight="bold" :fill="color">
20+
<tspan x="9.08984375" y="11">{{ word[1] }}</tspan>
21+
</text>
22+
<text font-family="SFProRounded-Bold, SF Pro Rounded" font-size="11" font-weight="bold" :fill="color">
23+
<tspan x="2" y="11">{{ word[0] }}</tspan>
24+
</text>
25+
</g>
26+
</g>
27+
</SVGIcon>
28+
</template>
29+
30+
<script>
31+
import SVGIcon from 'docc-render/components/SVGIcon.vue';
32+
33+
export default {
34+
name: 'SingleLetterSymbolIcon',
35+
components: { SVGIcon },
36+
props: {
37+
word: {
38+
type: String,
39+
required: true,
40+
},
41+
color: {
42+
type: String,
43+
default: '#BF6AF7',
44+
},
45+
},
46+
};
47+
</script>

‎src/components/Navigator/NavigatorCard.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="navigator-card">
33
<div class="head-wrapper" :class="{ 'extra-info': showExtendedInfo }">
4-
<NavigatorLeafIcon :type="kind" />
4+
<NavigatorLeafIcon :kind="kind" />
55
<span class="card-link">
66
{{ technology }}
77
</span>

‎src/components/Navigator/NavigatorLeafIcon.vue‎

Lines changed: 49 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,64 @@
11
<template>
2-
<span class="NavigatorLeafIcon">
3-
{{ kindLetter }}
4-
</span>
2+
<div class="NavigatorLeafIcon">
3+
<component :is="icon" v-bind="iconProps" class="icon-inline" />
4+
</div>
55
</template>
66

77
<script>
8+
import SingleLetterSymbolIcon from 'docc-render/components/Icons/SingleLetterSymbolIcon.vue';
9+
import CurlyBracketsIcon from 'theme/components/Icons/CurlyBracketsIcon.vue';
10+
import TwoLetterSymbolIcon from 'docc-render/components/Icons/TwoLetterSymbolIcon.vue';
11+
import CollectionIcon from 'docc-render/components/Icons/CollectionIcon.vue';
12+
import { TopicRoleIcons } from 'docc-render/components/DocumentationTopic/TopicLinkBlockIcon.vue';
13+
import { TopicKind } from 'docc-render/constants/kinds';
14+
15+
const KindAliases = {
16+
[TopicKind.init]: TopicKind.method,
17+
[TopicKind.typeMethod]: TopicKind.method,
18+
[TopicKind.typeProperty]: TopicKind.property,
19+
[TopicKind.enumCase]: TopicKind.enum,
20+
};
21+
22+
const TopicKindIcons = {
23+
...TopicRoleIcons,
24+
[TopicKind.subscript]: CurlyBracketsIcon,
25+
[TopicKind.struct]: SingleLetterSymbolIcon,
26+
[TopicKind.method]: SingleLetterSymbolIcon,
27+
[TopicKind.protocol]: TwoLetterSymbolIcon,
28+
[TopicKind.property]: SingleLetterSymbolIcon,
29+
[TopicKind.enum]: SingleLetterSymbolIcon,
30+
[TopicKind.symbol]: CollectionIcon,
31+
[TopicKind.class]: SingleLetterSymbolIcon,
32+
[TopicKind.typealias]: SingleLetterSymbolIcon,
33+
[TopicKind.var]: SingleLetterSymbolIcon,
34+
[TopicKind.associatedtype]: CollectionIcon,
35+
[TopicKind.buildSetting]: CollectionIcon,
36+
};
37+
38+
const TopicRoleProps = {
39+
[TopicKind.struct]: { word: 'Struct' },
40+
[TopicKind.method]: { word: 'Method', color: '#272AD8' },
41+
[TopicKind.protocol]: { word: 'Protocol' },
42+
[TopicKind.property]: { word: 'Property', color: '#509CA3' },
43+
[TopicKind.enum]: { word: 'Enum', color: '#947100' },
44+
[TopicKind.typealias]: { word: 'Typealias', color: '#947100' },
45+
[TopicKind.class]: { word: 'Class' },
46+
[TopicKind.var]: { word: 'Var' },
47+
};
48+
849
export default {
950
name: 'NavigatorLeafIcon',
51+
components: { SingleLetterSymbolIcon },
1052
props: {
11-
type: {
53+
kind: {
1254
type: String,
1355
required: true,
1456
},
1557
},
1658
computed: {
17-
kindLetter({ type }) {
18-
return type.slice(0, 1);
19-
},
59+
normalisedKind: ({ kind }) => KindAliases[kind] || kind,
60+
icon: ({ normalisedKind }) => TopicKindIcons[normalisedKind],
61+
iconProps: ({ normalisedKind }) => TopicRoleProps[normalisedKind] || {},
2062
},
2163
};
2264
</script>
@@ -25,15 +67,7 @@ export default {
2567
@import 'docc-render/styles/_core.scss';
2668
2769
.NavigatorLeafIcon {
28-
border: 2px solid var(--color-figure-gray-tertiary);
29-
padding: 2px;
30-
border-radius: 4px;
3170
width: 0.8em;
32-
height: 0.8em;
33-
display: inline-flex;
34-
align-items: center;
35-
justify-content: center;
36-
text-transform: uppercase;
3771
margin-right: 5px;
3872
flex: 0 0 auto;
3973
}

‎src/components/Navigator/NavigatorTreeLeaf.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
>
1313
<InlineChevronRightIcon class="icon-inline chevron" :class="{ rotate: expanded }" />
1414
</button>
15-
<NavigatorLeafIcon :type="item.kind" />
15+
<NavigatorLeafIcon :kind="item.kind" />
1616
<div class="title-container">
1717
<router-link :to="item.path" class="leaf-link">
1818
<HighlightMatch
@@ -48,7 +48,7 @@ import TransitionExpand from 'docc-render/components/TransitionExpand.vue';
4848
import NavigatorLeafIcon from 'docc-render/components/Navigator/NavigatorLeafIcon.vue';
4949
import ContentNode from 'docc-render/components/DocumentationTopic/ContentNode.vue';
5050
import HighlightMatch from 'docc-render/components/Navigator/HighlightMatches.vue';
51-
import { baseNavHeight } from '@/constants/nav';
51+
import { baseNavHeight } from 'docc-render/constants/nav';
5252
5353
export default {
5454
name: 'NavigatorTreeLeaf',

‎src/constants/kinds.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
// eslint-disable-next-line import/prefer-default-export
2+
export const TopicKind = {
3+
article: 'article',
4+
associatedtype: 'associatedtype',
5+
buildSetting: 'buildSetting',
6+
class: 'class',
7+
container: 'container',
8+
dictionarySymbol: 'dictionarySymbol',
9+
enum: 'enum',
10+
enumCase: 'enum.case',
11+
extension: 'extension',
12+
func: 'func',
13+
funcOp: 'func.op',
14+
groupMarker: 'groupMarker',
15+
httpRequest: 'httpRequest',
16+
init: 'init',
17+
languageGroup: 'languageGroup',
18+
learn: 'learn',
19+
macro: 'macro',
20+
method: 'method',
21+
module: 'module',
22+
overview: 'overview',
23+
property: 'property',
24+
propertyListKey: 'propertyListKey',
25+
propertyListKeyReference: 'propertyListKeyReference',
26+
protocol: 'protocol',
27+
resources: 'resources',
28+
root: 'root',
29+
sampleCode: 'sampleCode',
30+
section: 'section',
31+
struct: 'struct',
32+
subscript: 'subscript',
33+
symbol: 'symbol',
34+
tutorial: 'tutorial',
35+
typeMethod: 'type.method',
36+
typeProperty: 'type.property',
37+
typealias: 'typealias',
38+
union: 'union',
39+
var: 'var',
40+
};

0 commit comments

Comments
 (0)