mirror of
https://github.com/fleetdm/fleet
synced 2026-05-24 09:28:54 +00:00
62c41fa5b2
+ Update bubble component to use for displaying roles in REST API docs + Update callout box to reflect styles in the product, and create a new mixin for consistent styling (Adding the actual bubbles to the REST API docs will be done in a separate PR, figured we could get these changes merged in first since it might take awhile to verify that the role permissions are documented accurately.) #### Screenshot of style changes in the REST API docs: <img width="1057" height="444" alt="Screenshot 2026-04-15 at 5 59 44 PM" src="https://github.com/user-attachments/assets/1478b4d0-f610-4f87-a72f-2b08af917484" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Role bubbles can be clickable links for specific roles and show hover interactions. * **Style** * Redesigned bubble visuals (typography, padding, border, radius, colors) with distinct role variants. * Added hover transition for role-linked bubbles. * Consolidated "tip" block styling across the site for consistent layout and spacing. * Minor spacing tweak for bubbles in documentation. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Eric <[email protected]>
88 lines
2.7 KiB
JavaScript
Vendored
88 lines
2.7 KiB
JavaScript
Vendored
/**
|
|
* <bubble>
|
|
* -----------------------------------------------------------------------------
|
|
* A styled span used in documentation.
|
|
*
|
|
* @type {Component}
|
|
*
|
|
* @event click [emitted when clicked]
|
|
* -----------------------------------------------------------------------------
|
|
*/
|
|
|
|
parasails.registerComponent('bubble', {
|
|
// ╔═╗╦═╗╔═╗╔═╗╔═╗
|
|
// ╠═╝╠╦╝║ ║╠═╝╚═╗
|
|
// ╩ ╩╚═╚═╝╩ ╚═╝
|
|
props: [
|
|
'type',
|
|
],
|
|
|
|
// ╦╔╗╔╦╔╦╗╦╔═╗╦ ╔═╗╔╦╗╔═╗╔╦╗╔═╗
|
|
// ║║║║║ ║ ║╠═╣║ ╚═╗ ║ ╠═╣ ║ ║╣
|
|
// ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
|
|
data: function (){
|
|
let rawType = this.type ? this.type.toLowerCase() : '';
|
|
let roleLink = '';
|
|
|
|
switch (rawType) {
|
|
case 'admin':
|
|
roleLink = '/guides/role-based-access#admin';
|
|
break;
|
|
case 'maintainer':
|
|
roleLink = '/guides/role-based-access#maintainer';
|
|
break;
|
|
case 'observer':
|
|
roleLink = '/guides/role-based-access#observer';
|
|
break;
|
|
case 'observer+':
|
|
roleLink = '/guides/role-based-access#observer2';
|
|
rawType = 'observer-plus';
|
|
break;
|
|
case 'technician':
|
|
roleLink = '/guides/role-based-access#technician';
|
|
break;
|
|
case 'gitops':
|
|
roleLink = '/guides/role-based-access#gitops';
|
|
break;
|
|
}
|
|
|
|
return {
|
|
rawType: rawType,
|
|
roleLink: roleLink
|
|
};
|
|
},
|
|
|
|
// ╦ ╦╔╦╗╔╦╗╦
|
|
// ╠═╣ ║ ║║║║
|
|
// ╩ ╩ ╩ ╩ ╩╩═╝
|
|
template: `
|
|
<a v-if="roleLink" class="role-link" :href="roleLink">
|
|
<span purpose="bubble-heart" :class="rawType">{{type}}</span>
|
|
</a>
|
|
<span v-else>
|
|
<span purpose="bubble-heart" :class="rawType">{{type}}</span>
|
|
</span>
|
|
`,
|
|
|
|
// ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗
|
|
// ║ ║╠╣ ║╣ ║ ╚╦╝║ ║ ║╣
|
|
// ╩═╝╩╚ ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
|
|
beforeMount: function() {
|
|
if(this.type === undefined){
|
|
throw new Error(`Incomplete usage of <bubble>: Please provide a 'type' that will be displayed as text inside the bubble. e.g., <bubble type="Observer"></bubble>`);
|
|
}
|
|
},
|
|
mounted: async function(){
|
|
//…
|
|
},
|
|
beforeDestroy: function() {
|
|
//…
|
|
},
|
|
|
|
// ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
|
|
// ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗
|
|
// ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
|
|
methods: {
|
|
//…
|
|
}
|
|
});
|