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.

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

Add ember-appuniversum #171

Merged
merged 10 commits into from
Nov 4, 2021
Merged
Changes from 9 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -88,9 +88,7 @@ When installing this through `ember install` the addon will add the snippet abov
### Customisation

You can override the variables to provide a custom theme for the editor.
- [_s-colors.scss](https://github.com/lblod/ember-rdfa-editor/blob/master/app/styles/ember-rdfa-editor/_s-colors.scss): Collection of colors used.
- [_s-settings.scss](https://github.com/lblod/ember-rdfa-editor/blob/master/app/styles/ember-rdfa-editor/_s-settings.scss): General settings (spacing, font family, sizes and weights, media-queries)
- [_s-theme.scss](https://github.com/lblod/ember-rdfa-editor/blob/master/app/styles/ember-rdfa-editor/_s-theme.scss): Specific theme variables
- [_s-theme.scss](https://github.com/lblod/ember-rdfa-editor/blob/master/app/styles/ember-rdfa-editor/_s-theme.scss): Theme variables


## Compatibility
18 changes: 9 additions & 9 deletions addon/components/rdfa/editor-toolbar.hbs
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" class="say-icon say-icon--large" aria-hidden="true">
<path d="M35.406875,8.58125 C31.975,5.1375 27.236875,3 21.988125,3 C11.490625,3 3.011875,11.5025 3.011875,22 C3.011875,32.4975 11.490625,41 21.988125,41 C30.835,41 38.245,34.94375 40.346875,26.75 L35.406875,26.75 C33.4475,32.28375 28.19875,36.25 21.988125,36.25 C14.115,36.25 7.738125,29.873125 7.738125,22 C7.738125,14.126875 14.115,7.75 21.988125,7.75 C25.91875,7.75 29.445625,9.38875 32.0225,11.965625 L24.363125,19.625 L40.988125,19.625 L40.988125,3 L35.406875,8.58125 Z" transform="matrix(-1 0 0 1 44 0)"/>
</svg>
<span class="say-u-hidden-visually">
<span class="au-u-hidden-visually">
Undo
</span>
</button>
@@ -16,31 +16,31 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" class="say-icon say-icon--large" aria-hidden="true">
<path d="M37.2663126,30.0151745 C37.2663126,25.3444613 35.392261,22.5766313 31.4711684,20.9908953 C33.6047041,19.4628225 34.8732929,16.983308 34.8732929,13.2063733 C34.8732929,4.64339909 28.3573596,3 20.3998483,3 L12.5288316,3 C10.1069803,3 7.39681335,3.14415781 7.16616085,3.25948407 C6.90667678,3.43247344 6.73368741,4.49924127 6.73368741,5.85432473 C6.73368741,6.71927162 6.82018209,8.01669196 6.99317147,8.33383915 C7.94461305,8.65098634 9.15553869,8.91047041 10.4817906,9.11229135 L10.4817906,34.8877086 C9.15553869,35.0895296 7.94461305,35.3490137 6.99317147,35.6661608 C6.82018209,35.983308 6.73368741,37.2807284 6.73368741,38.1456753 C6.73368741,39.5007587 6.90667678,40.5675266 7.16616085,40.7405159 C7.38827067,40.8515708 9.90962842,40.9893612 12.2586911,40.9994155 L18.237481,41 C28.4150228,41 37.2663126,40.1638847 37.2663126,30.0151745 Z M18.0391597,18.1362975 L17.2283763,18.1365706 L17.2283763,8.76631259 L18.5720147,8.76727625 C24.4991751,8.78556785 27.8095599,9.11011538 27.8095599,13.4658574 C27.8095599,17.8221433 24.5346064,18.1263682 18.0391597,18.1362975 Z M19.5620282,35.261814 L17.2283763,35.262519 L17.2283763,24.6236722 L20.2556904,24.6236722 C26.6274659,24.6236722 30.2025797,25.5751138 30.2025797,30.0728376 C30.2025797,34.4887847 26.7284955,35.2360988 19.5620282,35.261814 Z"/>
</svg>
<span class="say-u-hidden-visually">
<span class="au-u-hidden-visually">
Bold
</span>
</button>
<button type="button" class="say-toolbar__button {{if this.isItalic " is-active"}}" {{on "click" this.toggleItalic}}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" class="say-icon say-icon--large" aria-hidden="true">
<path d="M22.5618876,43.1999278 C22.7898438,42.9394064 22.9526696,42.0601468 22.9526696,41.2134523 C22.9526696,40.5295836 22.8549741,39.8131498 22.6595831,39.5200632 C21.6826279,39.292107 20.380021,39.0641508 19.0448488,38.8687598 L29.9701878,5.16380539 C31.30536,4.96841435 32.6079669,4.70789297 33.5849221,4.47993675 C33.7803131,4.18685019 33.8780086,3.47041638 33.8780086,2.78654774 C33.8780086,1.93985323 33.7151828,1.06059355 33.4872266,0.800072168 C33.2706682,0.676324509 31.4082659,0.552576851 29.6310948,0.540511454 L25.5738894,0.539550781 C23.7176746,0.539550781 21.6660686,0.669811475 21.4381124,0.800072168 C21.2101562,1.06059355 21.0473304,1.93985323 21.0473304,2.78654774 C21.0473304,3.47041638 21.1450259,4.18685019 21.3404169,4.47993675 C22.3173721,4.70789297 23.5874139,4.96841435 24.9551512,5.16380539 L14.0298122,38.8687598 C12.6620749,39.0641508 11.3920331,39.292107 10.4150779,39.5200632 C10.2196869,39.8131498 10.1219914,40.5295836 10.1219914,41.2134523 C10.1219914,42.0601468 10.2848172,42.9394064 10.5127734,43.1999278 C10.7293318,43.3236755 12.5917341,43.4474231 14.3689052,43.4594885 L18.4261106,43.4604492 C20.2823254,43.4604492 22.3339314,43.3301885 22.5618876,43.1999278 Z"/>
</svg>
<span class="say-u-hidden-visually">
<span class="au-u-hidden-visually">
Italic
</span>
</button>
<button type="button" class="say-toolbar__button {{if this.isUnderline "is-active"}}" {{on "click" this.toggleUnderline}}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" class="say-icon say-icon--large" aria-hidden="true">
<path fill-rule="evenodd" d="M36.2154035,40.1888021 L36.2154035,44 L7.78459653,44 L7.78459653,40.1888021 L36.2154035,40.1888021 Z M12.5096136,0.628248429 C14.0025437,0.638384084 15.5670731,0.742339526 15.7489951,0.846294968 C15.940492,1.06514853 16.0772755,1.8037793 16.0772755,2.51505338 C16.0772755,3.08954398 15.9952054,3.69139128 15.8310652,3.93760153 C15.0103644,4.1290984 13.9160966,4.34795196 12.794472,4.51209213 L12.794472,4.51209213 L12.794472,21.9109503 C12.794472,32.6621316 17.5271803,33.3460489 21.9042516,33.3460489 L22.1003345,33.3455624 C26.8660897,33.32135 31.205528,32.3549233 31.205528,21.9109503 L31.205528,21.9109503 L31.205528,4.51209213 C30.0565468,4.34795196 28.9896356,4.1290984 28.1689348,3.93760153 C28.0047946,3.69139128 27.9227245,3.08954398 27.9227245,2.51505338 C27.9227245,1.8037793 28.059508,1.06514853 28.2510049,0.846294968 C28.4425017,0.736868187 30.1659735,0.627441406 31.7253052,0.627441406 L35.1336006,0.628248429 C36.6265307,0.638384084 38.1910601,0.742339526 38.3729821,0.846294968 C38.564479,1.06514853 38.7012625,1.8037793 38.7012625,2.51505338 C38.7012625,3.08954398 38.6191924,3.69139128 38.4550522,3.93760153 C37.6343513,4.1290984 36.5400835,4.34795196 35.418459,4.51209213 L35.418459,4.51209213 L35.418459,23.2787851 C35.418459,35.5892979 28.1142214,37.2306997 21.9316083,37.2306997 C15.8310652,37.2306997 8.58154097,35.6440113 8.58154097,23.2787851 L8.58154097,23.2787851 L8.58154097,4.51209213 C7.43255977,4.34795196 6.36564866,4.1290984 5.5449478,3.93760153 C5.38080763,3.69139128 5.29873754,3.08954398 5.29873754,2.51505338 C5.29873754,1.8037793 5.43552102,1.06514853 5.62701789,0.846294968 C5.81851475,0.736868187 7.54198655,0.627441406 9.10131818,0.627441406 Z"/>
</svg>
<span class="say-u-hidden-visually">
<span class="au-u-hidden-visually">
Underline
</span>
</button>
<button type="button" class="say-toolbar__button {{if this.isStrikethrough "is-active"}}" {{on "click" this.toggleStrikethrough}}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" class="say-icon say-icon--large" aria-hidden="true">
<path fill-rule="evenodd" d="M32.6525773,26.855607 C33.100625,27.9170302 33.353803,29.1773985 33.353803,30.7266036 C33.353803,39.0230226 26.1021183,42.8639573 18.9118885,42.8639573 C16.1644905,42.8639573 13.4443113,42.3195812 11.084381,41.2820645 L10.646197,41.0817636 L10.6470166,36.5326437 C10.657833,34.875928 10.7734966,33.0838401 10.8612894,32.9082546 C11.1071092,32.6624347 11.9367511,32.5395248 12.7356655,32.5395248 C13.41167,32.5395248 14.0876745,32.6317073 14.3642218,32.7853446 C14.6714966,34.1680811 15.0094988,36.1039122 15.1938637,38.0397433 C16.6073277,38.2855631 18.1437016,38.4392005 19.649348,38.4392005 C24.412107,38.4392005 28.9290462,36.8106442 28.9290462,31.7713379 C28.9290462,29.5718008 28.0751215,28.1041993 26.5326554,26.8558446 L32.6525773,26.855607 Z M38.1351346,19.6139323 L38.1351346,23.3623047 L5.8648654,23.3623047 L5.8648654,19.6139323 L38.1351346,19.6139323 Z M23.3981002,1.1360427 C25.6955701,1.1360427 27.966858,1.50259059 30.0186199,2.06651044 L30.526875,2.21150441 L30.526246,6.48375741 C30.5166859,8.149056 30.4001242,9.96251064 30.3117827,10.1391936 C30.0659629,10.3850135 29.236321,10.5079234 28.4374066,10.5079234 C27.7614021,10.5079234 27.0853975,10.4157409 26.8088502,10.2621035 C26.5015755,9.06373192 26.2250282,7.37372065 26.0099358,5.65298191 C25.1495665,5.56079947 24.2584696,5.49934452 23.3981002,5.49934452 C19.2191633,5.49934452 15.1938637,6.7591711 15.1938637,11.6755675 C15.1938637,13.6728536 15.8391407,14.9326801 16.9453299,15.9159594 C17.0324292,15.991698 17.1248179,16.0676958 17.2221892,16.1439784 L11.5082315,16.144335 C11.0900999,14.9729288 10.8612894,13.6087176 10.8612894,12.0442973 C10.8612894,3.90151568 17.0375124,1.1360427 23.3981002,1.1360427 Z"/>
</svg>
<span class="say-u-hidden-visually">
<span class="au-u-hidden-visually">
Strikethrough
</span>
</button>
@@ -50,7 +50,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" class="say-icon say-icon--large" aria-hidden="true">
<path d="M3.56756757,18.4324324 C1.59351351,18.4324324 0,20.0259459 0,22 C0,23.9740541 1.59351351,25.5675676 3.56756757,25.5675676 C5.54162162,25.5675676 7.13513514,23.9740541 7.13513514,22 C7.13513514,20.0259459 5.54162162,18.4324324 3.56756757,18.4324324 Z M3.56756757,4.16216216 C1.59351351,4.16216216 0,5.75567568 0,7.72972973 C0,9.70378378 1.59351351,11.2972973 3.56756757,11.2972973 C5.54162162,11.2972973 7.13513514,9.70378378 7.13513514,7.72972973 C7.13513514,5.75567568 5.54162162,4.16216216 3.56756757,4.16216216 Z M3.56756757,32.7027027 C1.58162162,32.7027027 0,34.3081081 0,36.2702703 C0,38.2324324 1.60540541,39.8378378 3.56756757,39.8378378 C5.52972973,39.8378378 7.13513514,38.2324324 7.13513514,36.2702703 C7.13513514,34.3081081 5.55351351,32.7027027 3.56756757,32.7027027 Z M10.7027027,38.6486486 L44,38.6486486 L44,33.8918919 L10.7027027,33.8918919 L10.7027027,38.6486486 Z M10.7027027,24.3783784 L44,24.3783784 L44,19.6216216 L10.7027027,19.6216216 L10.7027027,24.3783784 Z M10.7027027,5.35135135 L10.7027027,10.1081081 L44,10.1081081 L44,5.35135135 L10.7027027,5.35135135 Z"/>
</svg>
<span class="say-u-hidden-visually">
<span class="au-u-hidden-visually">
Unordered list
</span>
</button>
@@ -59,7 +59,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" class="say-icon say-icon--large" aria-hidden="true">
<path d="M0,33.5789474 L4.63157895,33.5789474 L4.63157895,34.7368421 L2.31578947,34.7368421 L2.31578947,37.0526316 L4.63157895,37.0526316 L4.63157895,38.2105263 L0,38.2105263 L0,40.5263158 L6.94736842,40.5263158 L6.94736842,31.2631579 L0,31.2631579 L0,33.5789474 Z M2.31578947,12.7368421 L4.63157895,12.7368421 L4.63157895,3.47368421 L0,3.47368421 L0,5.78947368 L2.31578947,5.78947368 L2.31578947,12.7368421 Z M0,19.6842105 L4.16842105,19.6842105 L0,24.5473684 L0,26.6315789 L6.94736842,26.6315789 L6.94736842,24.3157895 L2.77894737,24.3157895 L6.94736842,19.4526316 L6.94736842,17.3684211 L0,17.3684211 L0,19.6842105 Z M11.5789474,5.78947368 L11.5789474,10.4210526 L44,10.4210526 L44,5.78947368 L11.5789474,5.78947368 Z M11.5789474,38.2105263 L44,38.2105263 L44,33.5789474 L11.5789474,33.5789474 L11.5789474,38.2105263 Z M11.5789474,24.3157895 L44,24.3157895 L44,19.6842105 L11.5789474,19.6842105 L11.5789474,24.3157895 Z"/>
</svg>
<span class="say-u-hidden-visually">
<span class="au-u-hidden-visually">
Ordered list
</span>
</button>
@@ -71,7 +71,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" class="say-icon say-icon--large" aria-hidden="true">
<path d="M19.7888889,33.0555556 L41.9,33.0555556 L41.9,28.6333333 L19.7888889,28.6333333 L19.7888889,33.0555556 Z M2.1,22 L10.9444444,30.8444444 L10.9444444,13.1555556 L2.1,22 Z M2.1,41.9 L41.9,41.9 L41.9,37.4777778 L2.1,37.4777778 L2.1,41.9 Z M2.1,2.1 L2.1,6.52222222 L41.9,6.52222222 L41.9,2.1 L2.1,2.1 Z M19.7888889,15.3666667 L41.9,15.3666667 L41.9,10.9444444 L19.7888889,10.9444444 L19.7888889,15.3666667 Z M19.7888889,24.2111111 L41.9,24.2111111 L41.9,19.7888889 L19.7888889,19.7888889 L19.7888889,24.2111111 Z"/>
</svg>
<span class="say-u-hidden-visually">
<span class="au-u-hidden-visually">
Reverse indent
</span>
</button>
@@ -81,7 +81,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" class="say-icon say-icon--large" aria-hidden="true">
<path d="M2.09933036,41.9006696 L41.9006696,41.9006696 L41.9006696,37.4782986 L2.09933036,37.4782986 L2.09933036,41.9006696 Z M2.09933036,13.1552579 L2.09933036,30.8447421 L10.9440724,22 L2.09933036,13.1552579 Z M19.7888145,33.0559276 L41.9006696,33.0559276 L41.9006696,28.6335565 L19.7888145,28.6335565 L19.7888145,33.0559276 Z M2.09933036,2.09933036 L2.09933036,6.52170139 L41.9006696,6.52170139 L41.9006696,2.09933036 L2.09933036,2.09933036 Z M19.7888145,15.3664435 L41.9006696,15.3664435 L41.9006696,10.9440724 L19.7888145,10.9440724 L19.7888145,15.3664435 Z M19.7888145,24.2111855 L41.9006696,24.2111855 L41.9006696,19.7888145 L19.7888145,19.7888145 L19.7888145,24.2111855 Z"/>
</svg>
<span class="say-u-hidden-visually">
<span class="au-u-hidden-visually">
Indent
</span>
</button>
16 changes: 4 additions & 12 deletions addon/components/rdfa/rdfa-editor.hbs
Original file line number Diff line number Diff line change
@@ -5,18 +5,12 @@
@showTextStyleButtons="{{if @toolbarOptions.showTextStyleButtons "true"}}" @showListButtons="{{if @toolbarOptions.showListButtons "true"}}"
@showIndentButtons="{{if @toolbarOptions.showIndentButtons "true"}}">
{{#if @editorOptions.showToggleRdfaAnnotations}}
<div class="say-switch">
<input {{on "click" this.toggleRdfaBlocks}} id="toggle-1" class="say-switch__input" type="checkbox" name="toggle">
<label class="say-switch__label" for="toggle-1">Toon annotaties</label>
</div>
<AuToggleSwitch {{on "click" this.toggleRdfaBlocks}} @label="Toon annotaties"/>
{{/if}}
{{#if @editorOptions.showInsertButton}}
<button type="button" class="say-button say-button--secondary" {{on "click" this.triggerHints}}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" class="say-icon say-icon--left" aria-hidden="true">
<polygon points="40.5 24.643 24.643 24.643 24.643 40.5 19.357 40.5 19.357 24.643 3.5 24.643 3.5 19.357 19.357 19.357 19.357 3.5 24.643 3.5 24.643 19.357 40.5 19.357"/>
</svg>
<AuButton {{on "click" this.triggerHints}} @icon="add" @iconAlignment="left" @skin="link">
Voeg sjabloon in
</button>
</AuButton>
{{/if}}
</Rdfa::EditorToolbar>
{{/if}}
@@ -42,9 +36,7 @@
{{#if this.hasActiveHints}}
{{#each this.hintsRegistry.activeHints as |card|}}
<li class="say-editor-hints__list-item">
<div class="say-card"> {{!-- Todo: remove this div once it is over --}}
{{component card.card info=card.info}}
</div>
{{component card.card info=card.info}}
</li>
{{/each}}
{{/if}}
2 changes: 1 addition & 1 deletion addon/components/rdfa/toolbar-dropdown.hbs
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" class="say-icon say-icon--large" aria-hidden="true">
<path d="M3.23694339,3.23694339 L3.23694339,40.7630566 L40.7630566,40.7630566 L40.7630566,3.23694339 L3.23694339,3.23694339 Z M19.9152368,36.5935302 L7.40650735,36.5935302 L7.40650735,24.0847632 L19.9152368,24.0847632 L19.9152368,36.5935302 Z M19.9152368,19.9152368 L7.40650735,19.9152368 L7.40650735,7.40650735 L19.9152368,7.40650735 L19.9152368,19.9152368 Z M36.5935302,36.5935302 L24.0847632,36.5935302 L24.0847632,24.0847632 L36.5935302,24.0847632 L36.5935302,36.5935302 Z M36.5935302,19.9152368 L24.0847632,19.9152368 L24.0847632,7.40650735 L36.5935302,7.40650735 L36.5935302,19.9152368 Z"/>
</svg>
<span class="say-u-hidden-visually">{{@dropdownButtonLabel}}</span>
<span class="au-u-hidden-visually">{{@dropdownButtonLabel}}</span>
</button>
{{#if this.dropdownOpen}}
<div id="{{this.dropdownId}}"
Original file line number Diff line number Diff line change
@@ -4,18 +4,18 @@

.say-alert {
display: flex;
color: $say-gray-800;
padding: $say-unit;
margin-bottom: $say-unit;
background-color: $say-gray-200;
color: $au-gray-800;
padding: $au-unit;
margin-bottom: $au-unit;
background-color: $au-gray-200;
}

.say-alert__icon {
background-color: $say-white;
border-radius: $say-unit-large;
height: $say-unit-large - .1rem; // compensate for visual distortion of perfect circle
width: $say-unit-large;
margin-right: $say-unit-large / 2;
background-color: $au-white;
border-radius: $au-unit-large;
height: $au-unit-large - .1rem; // compensate for visual distortion of perfect circle
width: $au-unit-large;
margin-right: $au-unit-large / 2;

display: flex;
align-items: center;
@@ -37,5 +37,5 @@
}

.say-alert__title {
font-weight: $say-medium;
font-weight:$au-medium;
}
Original file line number Diff line number Diff line change
@@ -7,18 +7,18 @@
}

.say-article__section {
@include say-font-size($say-h6);
padding: $say-unit;
@include au-font-size($au-h6);
padding: $au-unit;
display: flex;
flex-direction: row-reverse;

& + & {
border-top: .1rem solid $say-neutral-200;
border-top: .1rem solid $au-gray-200;
}
}

.say-article__section--highlight {
background-color: $say-neutral-100;
background-color: $au-gray-100;
}

.say-article__action {
@@ -28,71 +28,71 @@
}

.say-article__content {
color: $say-neutral-800;
margin-right: $say-unit;
color: $au-gray-800;
margin-right: $au-unit;

> * {
max-width: 90ch;
}

> * + * {
margin-top: $say-unit-small;
margin-top: $au-unit-small;
}

h1,
.h1 {
@include say-font-size($say-h2-font-size,1.3);
@include au-font-size($say-h2-font-size,1.3);
font-family: $say-h2-font-family;
font-weight: $say-h2-font-weight;
}

h2,
.h2 {
@include say-font-size($say-h3-font-size,1.3);
@include au-font-size($say-h3-font-size,1.3);
font-family: $say-h3-font-family;
font-weight: $say-h3-font-weight;
}

h3,
.h3 {
@include say-font-size($say-h4-font-size);
@include au-font-size($say-h4-font-size);
font-family: $say-h4-font-family;
font-weight: $say-h4-font-weight;
}

h4,
.h4 {
@include say-font-size($say-h5-font-size);
@include au-font-size($say-h5-font-size);
font-family: $say-h5-font-family;
font-weight: $say-h5-font-weight;
}

h5,
.h5 {
@include say-font-size($say-h6-font-size);
@include au-font-size($say-h6-font-size);
font-family: $say-h6-font-family;
font-weight: $say-h6-font-weight;
}

h6,
.h6 {
@include say-font-size($say-h6-font-size);
@include au-font-size($say-h6-font-size);
font-family: $say-h6-font-family;
font-weight: $say-h6-font-weight;
}
}

.say-article__insert {
@include say-font-size($say-h6);
@include au-font-size($au-h6);
color: $say-primary-700;
font-family: $say-font;
font-family: $say-font-family;
appearance: none;
padding: 0;
border: 0;
display: inline-flex;
align-items: center;
border-radius: .2rem;
transition: color $say-transition, background-color $say-transition;
transition: color $au-transition, background-color $au-transition;
white-space: nowrap;

&:hover,
Loading